body{
margin: 0;
padding: 0;
background-image: url(./img/futu2.jpg);
/*background: linear-gradient(120deg, grey, black);*/
background-position: center;
background-repeat: no-repeat;
background-size:100%;
height: 610px;
flex-direction: column;
display: flex;  
align-items: center;                              
}



header{
/*background-color: red;*/
width: 100%;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
position: fixed;
}


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


.cabecalho img{
width: 100%;
border-radius: 10px;
height: 40px;
animation: imagem;
animation-timing-function: ease-in-out;
animation-duration: 20s;
animation-direction: alternate;
animation-iteration-count: infinite;
}



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



@keyframes imagem{
    from{ transform: translateY(0%);}
    to{ transform: translateY(1330%);}
}


.relogio{
display: flex;
justify-content: center;
align-items: center;
background: transparent;
margin-right: 15px;
width: 215px;
height: 62px;
margin-top: 20px;
/*border-radius: 50%;*/
/* box-shadow: 1px 3px 9px gold;*/
justify-content: space-around;
animation: relogio;
animation-direction: alternate;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;                                                          
}




@keyframes relogio{
    0%{background: linear-gradient(15deg, white, blue, white, blue, white, blue);}
    50%{background: linear-gradient(15deg, blue, white, blue, white, blue);}
    100%{ background: linear-gradient(15deg, white, blue, white, blue, white); }

   /* from{
        transform: translateY(0%);
        animation-duration: 20s;
    }

    to{
        transform: translateY(10%);
        animation-duration: 20s;
    }*/
}



.relogio div{
display: flex;
flex-direction: column;
width: 70px;
height: 60px;
align-items: center;
justify-content: center;
background-color: black;
/* border-radius: 50%;*/
/*box-shadow: 1px 1px 2px gold;*/
/*border: 1px solid red;*/
justify-content: space-around;                                    
}



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



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



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


.menu{
display: flex;
justify-content: center;
align-items: center;
}



.menu ul{
    list-style: none;
}

/*.menu a{
font-size: 18px;
color: gold;
text-decoration: none;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}*/



/*.menu a:hover{
color: greenyellow;
transition: 1s;
font-size: 19px;
}*/


.nomes{
display: flex;
align-items: center;
justify-content: space-around;
background-color: transparent;
width: 30%;
height: 580px;
flex-direction: column;
margin-left: 38%;
margin-top: 10px;
border-radius: 30px;
backdrop-filter: blur(15px);
box-shadow: 1px 5px 7px black;   
margin-right: 600px;
                                                                       
}





/*.nome{
    display: flex;
        align-items: center;
            justify-content: space-around;
                background-color: transparent;
                    width: 100%;
                        height: 600px;
                            flex-direction: column;
                                margin-left: 38%;
                                    margin-top: 10px;
                                        /*border-radius: 30px;
                                            background: transparent;
                                               box-shadow: 1px 5px 7px black;  
                                                    animation: nome;
                                                        animation-duration: 1s;
                                                            animation-direction: alternate;
                                                                animation-iteration-count: infinite;  
                                                                    left: -19%;   
                                                                        top: -1%;  
                                                                            z-index: -1;   
                                                                                position: relative;  
                                                                                    animation-timing-function: ease-in-out;                        
}*/


/*@keyframes nome{
    0%{background: linear-gradient(45deg, red, blue, purple, green);}
    50%{background:linear-gradient(45deg, pink, purple, orange, red, green, blue);}
    100%{background: linear-gradient(45deg, pink, red, blue, green, purple);}
}*/

.nomes button{
width: 85%;
height: 40px;
box-shadow: 1px 1px 1px gray;
border-radius: 30px;
background-color: black;
border: none;                         
}


.nomes button:hover{
background-color:transparent;
box-shadow: 1px 3px 5px white;
backdrop-filter: blur(30px);                   
}


.nomes a{
color: white;
text-decoration: none;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
}