@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;
}

@font-face {
    font-family: 'shine_bubble_decoregular';
    src: url('./fonts/shine_bubble_deco-webfont.woff') format('woff2'), url('./fonts/shine_bubble_deco-webfont.woff2') 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: 1;
    }
}

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

    100% {
        opacity: 1;
    }
}


/* Animación cuando Clow es Golpeado */

@keyframes hit {
    0% {
        filter: brightness(0) saturate(100%) invert(22%) sepia(75%) saturate(7472%) hue-rotate(358deg) brightness(104%) contrast(125%);
    }

    50% {
        filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
    }

    100% {
        filter: brightness(0) saturate(100%) invert(22%) sepia(75%) saturate(7472%) hue-rotate(358deg) brightness(104%) contrast(125%);
    }
}

@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);
    }
}

@keyframes ondulacionBurbujas {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(30px);
    }

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

* {
    cursor: none;
}

body {
    padding: 0px;
    margin: 0px;
    border: 0px;
    overflow: hidden;
}

.background_game {
    background-image: url("./img/background_game.jpg");
    background-repeat: no-repeat;
    background-size: 100vw 100vh;
}

#gui {
    position: relative;
    display: flex;
    justify-content: space-between;
    vertical-align: middle;
}

#palabra {
    font-family: 'shine_bubble_decoregular';
    font-size: 40px;
    color: rgba(40, 200, 240, 0.8);
    transform: translateY(-50px);
    text-align: center;
    letter-spacing: 5px;
    text-transform: uppercase;
    user-select: none;
}

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

.divBoard {
    position: relative;
}

.cssBotonesBoard {
    padding: 15px;
}

.textosGUI {
    position: absolute;
    font-family: 'luckiest_guyregular';
    font-size: 2rem;
    font-weight: bolder;
    color: #ffc117bd;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, .3), -1px -1px 1px rgba(65, 31, 0, 0.788);
    user-select: none;
}

#energia {
    top: 29px;
    left: 490px;
}

#vidas {
    top: 29px;
    left: 255px;
}

.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;
}

#clow {
    width: 107px;
    height: 70px;
    position: absolute;
    transition: transform 1000ms ease-in-out;
}

#peces {
    position: absolute;
    height: 100vh;
    width: 100vw;
}

.pez {
    position: absolute;
}

.hitPez {
    animation: hit 0.1s ease-out;
}

.plantas1 {
    position: absolute;
}

.plantas2 {
    position: absolute;
    filter: blur(2px);
}

#gana {
    position: absolute;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100vw;
    height: 100vh;
    top: 0px;
    background-color: rgba(22, 15, 116, 0.5);
    display: none;
}

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

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

.ondulacionBurbujas {
    animation: ondulacionBurbujas 4s ease-in-out infinite;
}

.burbuja {
    width: 80px;
    height: 80px;
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
}

.burbuja p {
    position: absolute;
    font-family: 'shine_bubble_decoregular';
    font-size: 40px;
    color: rgba(13, 60, 99, 0.5);
}