body{
margin: 0;
padding: 0;
/*background-image: url(..//VS-CODE/img/futu2.jpg);*/
background-position: center;
background-repeat: no-repeat;
background-size:1000px;
/*height: 720px*/
height: 2000px;
flex-direction: column;
display: flex;
align-items: center;
background: linear-gradient(-18deg, gray, purple, black, gray);
                                                                                                        
}

header{
/*background-color: red;*/
width: 90%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 1px 2px 5px black;
border-radius: 10px;
justify-content: center;
backdrop-filter: blur(10px);
                                                        
}

.cabecalho{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
                    

}

.cabecalho img{
width: 100%;
border-radius: 10px;
height: 40px;
}

.divimg{
/*background-color: blue;*/
width: 120px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
margin-left: 15px;
}


.contato{
display: flex;
justify-content: center;
align-items: center;
/*background-color: blue;*/
margin-right: 15px;
                        
}

.contato h1{
color: white;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 18px;

}

.menu{
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
                
                

}

.menu ul{
    list-style: none;
}

.menu a{
font-size: 30px;
color: red;
text-decoration: none;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: bold;
animation-name: nome;
animation-duration: 6s;
animation-direction: alternate;
animation-iteration-count: infinite;
                      
}

@keyframes nome{
    from{
        color: red;
    }

    50%{
        color: gold;
    }

    to{
        color: blue;
    }
}

.menu a:hover{
    color: greenyellow;
        transition: 0s;
            font-size: 30px;
}

.menu h1{
    color: white;
        font-size: 20px;
}


.divcentral{
background-color: transparent;
width: 33%;
height: 120%;
display: flex;
justify-content: center;
align-items: center;
gap: 1px;
flex-wrap: wrap;
border: 1px solid gray;
border-radius: 30px;
box-shadow: 1px 2px 7px gray;
margin-top: 140px;
margin-left: 15px;
}

.divcentral2{
background-color: transparent;
width: 42%;
height: 125%;
display: flex;
justify-content: center;
/*align-items: center;*/
gap: 8px;
flex-wrap: wrap;
border: 1px solid gray;
border-radius: 30px;
margin-top: 160px;
box-shadow: 1px 2px 7px gray;            
}

.divcentral2 span{
    font-size: 15px;
}

.divcentral3{
background-color: transparent;
width: 33%;
height: 250%;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
flex-wrap: wrap;
border: 1px solid gray;
border-radius: 30px;
box-shadow: 1px 2px 7px gray;
margin-right: 15px;
margin-top: 785px;                         
}



.container{
display: flex;
width: 100%;
height: 500px;
/*background-color: blue;*/
gap: 10px;
justify-content: center;
align-items: center;
gap: 30px;
                              
}

.aplicado{
width: 80px;
height: 35px;
display: flex;
align-items: center;
background-color: yellow;
justify-content: center;
border-radius: 5px;
border: 1px solid black;
flex-direction: column;
font-family: sans-serif;
font-size: 13px;

}

.naoaplicado{
width: 80px;
height: 35px;
display: flex;
align-items: center;
background:linear-gradient(120deg, red, white);
justify-content: center;
border-radius: 5px;
border: 1px solid black;
margin: 2px;
font-family: sans-serif;
font-size: 13px;

}

.aplicado1{
width: 130px;
height: 40px;
display: flex;
align-items: center;
background:linear-gradient(-100deg, black, blue, black);
justify-content: center;
border-radius: 5px;
/*box-shadow: 1px 2px 5px white;*/
flex-direction: column;
color: white;
border: 1px solid white;
margin-top: 5px;
font-family: sans-serif;
                                                                       
}

.aplicado1 span{
font-size: 11px;

}



.divcentral3 span{
    color: yellow;
    font-family:monospace;
    font-size: 12px;
}


.divcentral3 img{
width: 100%;
border-radius: 10px;
box-shadow: 1px 5px 9px black;
}

.divcentral3 div{
width: 80px;
height: 100px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;

}








































.relogio{
display: flex;
justify-content: center;
align-items: center;
/*background: linear-gradient(120deg, #ff623bd8, #094bc7da);*/
margin-right: 15px;
width: 200px;
height: 55px;
margin-top: 20px;
border-radius: 10px;
/* box-shadow: 1px 2px 9px gold;*/
justify-content: space-around;

                        
}


.relogio div{
display: flex;
flex-direction: column;
width: 60px;
height: 50px;
align-items: center;
justify-content: center;
background-color: black;
border-radius: 10px;
box-shadow: 1px 2px 8px white;
border: 1px solid black;
                                    
}

.relogio span{
font-weight: bolder;
font-size: 27px;
color: white;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.relogio span.tempo{
font-size: 12px;
color: red;
}