body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient( #d6cf64, #e41616) no-repeat;
    text-align: center;
}




.container-menu{
    display: flex;
    position: absolute;
    flex-direction: column;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
}

.logo img{
    width: 55vw;
    z-index: 2;
}





#iniciar {
    height: 4vw;    
    width: 20vw;
    font-size: 4.3vw;  
    border: solid 0.5vw rgb(54, 0, 0);
    background-color: #11d4e2d0;
    border-radius: 1.5vw;   
    margin: 0%;
    cursor: pointer; 
}

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

#iniciar h4{
    font-size: 3.5vw;  
    border-radius: 1.5vw;   
    margin: 0%;
    cursor: pointer;  
    color: rgb(255, 255, 255);
}

h4{
    margin-top: 0vw;
}


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

#nuvens{
    animation: nuvem_movimento1 45s infinite linear; 
    width:20%;   
    position: absolute;
    top:10%;
    left:80%;
  
}


#nuvens2{
    animation: nuvem_movimento2 40s infinite linear; 
    width:20%;   
    position: absolute;
    top:-5%;
    left:20%;

}

#nuvens3{
    animation: nuvem_movimento3 35s infinite linear; 
    width:20%;   
    position: absolute;
    top:5%;
    left:0%;
}

#besouro1, #besouro2, #besouro3, #besouro4{
    position: absolute;
    width: 4vw;
    bottom: 25%;
}

#besouro1{
    left: 25%;
    bottom: 15%;
}
#besouro2{
    bottom: 35%;
    left: 35%;
}
#besouro3{
    left: 75%;
    z-index: 1;
}
#besouro4{
    bottom: 50%;
    left: 72%;
    z-index: 1;
}

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

#diploma{
    position: absolute;
    width: 2vw;
    bottom: 15%;
    left: 20%;
}

.jeanPista {    
    z-index: 2;
}

.jeanPista img{    
    width: 20vw;
    border-radius: 10%;
}



.introducao{
    display: flex;
    position: absolute;
    flex-direction: column;
    width: 50%;
    left: 24%;
    bottom: 5%;   
	z-index: 3;    
}


.balao{
	background-color: white;
	width: 45vw;
	min-height: 16vw;
	border-radius: 1%;
	z-index: 3;
    margin: auto;
}

#caixaDialogo{
	margin-left: 1vw;
	margin-right: 1vw;
}

#dialogo{
	font-size: 1.2vw;
	line-height: 1.5; 
}

#dialogo h4{
	font-size: 1.2vw;
	line-height: 1.5; 
}

#botao, #botao2{
    position: absolute;
    bottom: 1%;
    height: 2vw;
    width: 10vw;
    font-size: 1vw;
    border-radius: 1vw;
    color: #ffffff;
    background-color: #ee0c0c;
	cursor: pointer;
	animation: hover 1s infinite;
}
#botao{
    left: 43%;
}
#botao2{
    left: 68%;
}

@keyframes hover {
    0% {
        transform: scale(1);
    }
    
    50% {
        transform: scale(1.1);
    }
    
    100% {
        transform: scale(1);
    }
}

#telaTransparente {
	position: fixed;
	top: 0;
	left: 0;
	width: 120%;
	height: 120%;
	background-color: rgba(0, 0, 0, 0.664);
	z-index: 1;
}