/* ESTILOS GENERALES */

html {
    scroll-behavior: smooth;
}

body {
    background: #F2E8DA;
    height: 100vh;
    overflow-x: hidden;
    margin: 0;
}

header,
main,
footer {
    margin: auto;
    width: 100%;
}

h1 {
    font-family: 'Gliker';
    font-size: 3em;
    font-weight: 100;
    text-align: center;
    color: #464545;
}

.cursiva {
    font-family: 'Gliker Expanded';
    font-weight: 100;
    color: #464545;
}

.ocultar {
    transform: translateX(-110%);
    transition: transform 0.7s ease;
}

.mostrar {
    transform: translateX(0);
    transition: transform 0.7s ease;
}

/* Contenido */

.introduccion {
    z-index: -2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    margin: auto;
    transition: all 1.2s ease;
    text-align: center;
}

.introduccion.visible {
    transform: translate(70%, -50%);
    transition: all 1s ease;
}

.introduccion img {
    width: 100px;
}

.introduccion h1 {
    margin-bottom: 15px;
}

.flecha {
    animation: moverFlecha 1.5s infinite;
}

@keyframes moverFlecha {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(20px);
    }

    100% {
        transform: translateY(0);
    }
}

.contenido {
    width: 90%;
    margin-top: 100vh;
    margin-left: auto;
    margin-right: auto;
    z-index: 2;
}

.contenido h2 {
    font-size: 2rem;
    font-family: 'Gliker';
    text-align: center;
    color: #464545;
}

.contenido p {
    font-family: "Open Sauce";
    font-weight: lighter;
    color: #464545;
}

.flecha-link.sub {
    transform: rotate(0deg);
    transition: all 0.4s ease;
}

@media screen and (max-width: 700px) {

    .introduccion {
        width: 100%;
        z-index: 3;
    }
}