* {
    user-select: none;
}

body {
    width: 100vw;
    height: 100vw;
    overflow: hidden;
    background: linear-gradient( #0099b4, #1c92af) no-repeat;
    text-align: center;
}

.swal2-popup{
    font-size: 1vw;
}

#iniciar,#professor , #encerrar {
    height: 3vw;  
}

#iniciar:hover, #professor:hover, #encerrar:hover{
    transform: scale(1.1);
}


#iniciar h4, #professor h4, #encerrar h4{
    font-size: 2.3vw;  
    border: solid 0.5vw rgb(205, 148, 231);
    background-color: #00ffdd85;
    border-radius: 1.5vw;   
    margin: 0%;
    cursor: pointer;
}





@keyframes pulsa {
    0% { transform: scale(1.0);
        
    }
    20% { transform: scale(1.1);
       
    }
    30% {
        transform: scale(1.0);
    }
    40% {
        transform: scale(1.1);
    }
    100% { transform: scale(1.0);
      
    }
}


.mato{
    position: absolute;
}

#falink1, #falink2{
    position: absolute;
    width: 13vw;
    bottom: 0%;
    z-index: 1;
}
#falink1{
    left: 15%;
}
#falink2{
    left: 75%;
    transform: scaleX(-1);
}

#arvore1, #arvore2{
    position: absolute;
    width: 35vw;
}
#arvore1{
    left: -8%;
    bottom: 0%;
    transform: scaleX(-1);
}
#arvore2{
    right: -8%;
    bottom: 0%;
}

#nuvens{
    width:20%;   
    position: absolute;
    top:10%;
    left:70%;
  
}


#nuvens2{
    width:20%;   
    position: absolute;
    top:-5%;
    left:20%;

}

#nuvens3{
    width:20%;   
    position: absolute;
    top:5%;
    left:0%;
}


@keyframes nuvem_movimento1{
    0%{
        left: 60%;

    }
    50%{
        left: 80%;
    }
    100%{
        left: 60%;

    }
}


@keyframes nuvem_movimento2{
    0%{
        left: 30%;

    }
    50%{
        left: 40%;
    }
    100%{
        left: 30%;

    }
}


@keyframes nuvem_movimento3{
    0%{
        left: 10%;

    }
    50%{
        left: 20%;
    }
    100%{
        left: 10%;

    }
}


#arbok{
    position: absolute;
    width: 8vw;
    bottom: 0%;
    left: 38%;
    transform: scaleX(1);
    z-index: 1;
}


#uA, #uB, #uC{
    position: absolute;
    width: 4vw;
    bottom: 25%;
}

#uA{
    left: 25%;
    animation: movimentoLetras 2s infinite linear;
}
#uB{
    bottom: 45%;
    left: 35%;
    animation: movimentoLetras 4s infinite linear;
}
#uC{
    left: 75%;
    z-index: 1;
    animation: movimentoLetras 3s infinite linear;
}


@keyframes movimentoLetras {
    0% {
        transform: translate(-100%, -30%) scale(1);
    }
    25% {
        transform: translate(-10%, -50%) scale(1.02);
    }
    50% {
        transform: translate(-60%, -50%) scale(1);
    }
    75% {
        transform: translate(-30%, -90%) translateY(-10%) scale(1.02);
    }
    100% {
        transform: translate(-100%, -30%) scale(1);
    }
}

#rotom{
    position: absolute;
    width: 10vw;
    bottom: 15%;
    left: 10%;
}


#zubat1, #zubat2, #zubat3{
    position: absolute;
    width: 8vw;
}

#zubat1{
    top: 1%;
    animation: zubats_movimento 21s infinite linear;
}
#zubat2{
    top: 5%;
    animation: zubats_movimento 26s infinite linear;
}
#zubat3{
    top: 3%;
    animation: zubats_movimento 33s infinite linear;
}

@keyframes zubats_movimento{
    0%{
        right: 0%;

    }
    50%{
        right: 50%;
    }
    100%{
        right: 100%;

    }
}


#drifloon{
    position: absolute;
    width: 6.5vw;
    bottom: 20%;
    right: 90%;
    animation: animacao_drifloon 20s infinite linear;
    transform: scaleX(-1);
    z-index: 0;
}

@keyframes animacao_drifloon {
    0% {
        right: 90%; 
    }
   
    50% {
        right: 40%; 

    }
    100% {
        right: -10%; 
    }
}



.container-menu{
    position: absolute;
    left: 40%;
    top: 35%;
    width: 25%;
    height: 49%;
    border-radius: 5%;
    display: grid;
}

.logo{
    position: absolute;
    left: 30%;
    width: 45vw;
    top: 15%;
    z-index: 2;
}

@font-face{
    font-family: 'Pokemon';
    src: url('../fonte/Pokemon\ Solid.ttf') format('truetype');
    font-weight: normal;
    font-size: normal;
}

h4{
    font-family: 'Pokemon';
    -webkit-text-stroke-width: 0.13vw; /* largura da borda */
    -webkit-text-stroke-color: rgb(209, 123, 209); /* cor da borda */
    -webkit-text-fill-color: rgb(255, 255, 255);
}