@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
@font-face {
    font-family: 'luckiest_guyregular';
    src: url('./fonts/luckiest_guy_regular-webfont.woff2') format('woff2'), url('./fonts/luckiest_guy_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* ----------------------------------------------
 * Generated by Animista on 2023-9-9 2:57:7
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista

 * animation fade-in
 * ----------------------------------------
 */


/* Animación del Brillo del Agua */

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.3;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.3;
    }
}

@keyframes ondulacion1 {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes ondulacion2 {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0);
    }
}

* {
    cursor: none;
}

body {
    padding: 0px;
    margin: 0px;
    border: 0px;
    overflow: hidden;
    background-image: url("./img/background_info.jpg");
    background-repeat: no-repeat;
    background-size: 100vw 100vh;
    font-family: 'Luckiest Guy', cursive;
    color: lightslategray;
    user-select: none;
}

.titulo {
    font-size: 2.2rem;
}

.subtitulo {
    font-size: 1.5rem;
}

.boton {
    filter: brightness(70%);
}

.boton:hover {
    filter: drop-shadow(0px 0px 15px rgba(255, 255, 255, 1)) brightness(120%);
}

.shine {
    position: absolute;
    height: 100vh;
    width: 100vw;
}

.fade-in_1 {
    -webkit-animation: fade-in 1.2s ease-in-out infinite alternate both;
    animation: fade-in 1.2s ease-in-out infinite alternate both;
}

.fade-in_2 {
    -webkit-animation: fade-in 2.2s ease-in-out infinite alternate-reverse both;
    animation: fade-in 2.2s ease-in-out infinite alternate-reverse both;
}

#contenido {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-content: stretch;
    align-items: center;
    position: absolute;
    margin-top: 10vh;
    height: 80vh;
    width: 100vw;
}

#texto {
    text-align: center;
    filter: opacity(0.8);
}

.ondulacion1 {
    animation: ondulacion1 3s ease-in-out infinite;
}

.ondulacion2 {
    animation: ondulacion2 2.5s ease-in-out infinite;
}