@import "base/tipografia.css";
@import "base/colores.css";
@import "base/texto.css";
@import "base/transiciones.css";

@import "footer/footer.css";

@import "indice/indice.css";

@import "pagina/pagina.css";

@import "contacto/contacto.css";

:root {
	--color-frame: var(--gris-claro);
}

/* 1em = 16px; */

html, body {
	background-color: var(--negro);
}

body {
	font-family: var(--font-family);
	margin: 0;
	padding: 2em;
	
    text-rendering: optimizeSpeed;
	
	@media (max-width: 480px) {
        padding: 1em;
    }
}

.frame {
	position: fixed;
	inset: 0;
	border: 4px solid var(--color-frame);
	pointer-events: none;
	z-index: 9999;

	/* Animación de entrada */
	opacity: 0;
	animation: frameIn 1s ease forwards;
}

/* Animación */
@keyframes frameIn {
  to {
    opacity: 1;
  }
}

p {
	margin: 0;
}

hr {
	border: none;
	margin: 1em 0;

	&.separador {
		width: 100%;
		border: 1px solid var(--gris-claro);
	}
}