*{
    margin: 0;
    padding: 0;  
 }

 body {
    margin: auto;
    overflow: auto;
    background: linear-gradient(315deg, rgb(0, 101, 74) 3%, rgb(60, 206, 152) 38%, rgb(48, 238, 168) 68%, rgb(25, 255, 194) 98%);
    animation: gradient 15s ease infinite;
    background-size: 400% 400%;
    background-attachment: fixed;
}


@keyframes gradient {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}
h1{
    text-align: left;
    font-size: 20px;
    color: rgb(0, 95, 76);
    text-shadow:  7px 5px 5px rgba(0, 0, 0, 0.464);
    font-family: Castellar;
}

h2{
    font-family: Castellar;
    font-size: 20px;
    margin-top:20px;
    margin-left: 40px;
    color:rgb(104, 232, 255);
}

h3{
    font-family: Castellar;
    font-size: 20px;
    margin-top:20px;
    margin-left: 40px;
    color:rgb(255, 138, 194);
}

h4{
    font-family: Castellar;
    font-size: 20px;
    margin-top:35px;
    margin-left: 40px;
    color:rgb(75, 251, 107);
}

h5{
    font-family: Castellar;
    font-size: 20px;
    margin-top:35px;
    margin-left: 40px;
    color:rgb(19, 74, 94);
}

h6{
    font-family: Castellar;
    font-size: 20px;
    margin-top:35px;
    margin-left: 40px;
    color:rgb(255, 226, 94);
}

.h7{
    font-family: Castellar;
    font-size: 20px;
    margin-top:20px;
    margin-left: 40px;
    color:rgb(88, 2, 110);
}

.h8{
    font-family: Castellar;
    font-size: 20px;
    margin-top:20px;
    margin-left: 40px;
    color:rgb(69, 69, 69);
}

.h9{
    font-family: Castellar;
    font-size: 20px;
    margin-top:20px;
    margin-left: 40px;
    color:rgb(1, 59, 6);
}

.h10{
    font-family: Castellar;
    font-size: 20px;
    margin-top:20px;
    margin-left: 40px;
    color:rgb(255, 128, 162);
}

p{
    text-align: left;
    color: white;
}

.text1{
    margin-left: 230px;
    margin-top: -160px;
    font-size: 17px;
    color: rgb(255, 255, 255);
    text-shadow:  7px 5px 5px rgba(0, 0, 0, 0.464);
    font-family: arial;
}

.text2{
    margin-left: 230px;
    margin-top: 7px;
    font-size: 17px;
    color: rgb(255, 255, 255);
    text-shadow:  7px 5px 5px rgba(0, 0, 0, 0.464);
    font-family: arial;
}

.text3{
    margin-left: 330px;
    margin-top: -18px;
    font-size: 17px;
    color: rgb(255, 255, 255);
    text-shadow:  7px 5px 5px rgba(0, 0, 0, 0.464);
    font-family: arial;
}

.text4{
    margin-left: 230px;
    margin-top: 10px;
    font-size: 17px;
    color: rgb(255, 255, 255);
    text-shadow:  7px 5px 5px rgba(0, 0, 0, 0.464);
    font-family: arial;
}

.text5{
    margin-left: 230px;
    margin-top: 10px;
    font-size: 17px;
    color: rgb(255, 255, 255);
    text-shadow:  7px 5px 5px rgba(0, 0, 0, 0.464);
    font-family: arial;
}

.text6{
    margin-left: 230px;
    margin-top: 10px;
    font-size: 17px;
    color: rgb(255, 255, 255);
    text-shadow:  7px 5px 5px rgba(0, 0, 0, 0.464);
    font-family: arial;
}

.text7{
    margin-left: 40px;
    margin-top: -50px;
    font-size: 20px;
    color:rgb(104, 232, 255);
    font-family: arial;
}

.text8{
    margin-bottom: 20px;
    text-align: center ;
    margin-top: 10px;
    font-size: 18px;
    font-family: arial;
}

.text9{
    margin-left: 40px;
    margin-top: -30px;
    font-size: 20px;
    color:rgb(255, 138, 194);
    font-family: arial;
}

.text10{
    margin-left: 40px;
    margin-top: -10px;
    font-size: 20px;
    color:rgb(75, 251, 107);
    font-family: arial;
}

.text11{
    margin-left: 40px;
    margin-top: -10px;
    font-size: 20px;
    color:rgb(19, 74, 94);
    font-family: arial;
}

.text12{
    margin-left: 40px;
    margin-top: 50px;
    font-size: 20px;
    color:rgb(255, 226, 94);
    font-family: arial;
}

.text13{
    margin-left: 40px;
    margin-top: -10px;
    font-size: 20px;
    color:rgb(88, 2, 110);
    font-family: arial;
}

.text14{
    margin-left: 40px;
    margin-top: 9px;
    font-size: 20px;
    color:rgb(69, 69, 69);
    font-family: arial;
}

.text15{
    margin-left: 40px;
    margin-top: -25px;
    font-size: 20px;
    color:rgb(1, 59, 6);
    font-family: arial;
}

.text16{
    margin-left: 40px;
    margin-top: -25px;
    font-size: 20px;
    color:rgb(255, 128, 162);
    font-family: arial;
}

.logo{
    margin-left: 30px;
    margin-right: 290px;
    position: relative;
    width: 120px;
    height: 125px;
    float: left;
}

.logo2{
    margin-top: 5px;
    position: relative;
    width: 174px;
    height: 170px;
    float: left; 
}

.logo3{
    margin-top: 10px;
    margin-left: 27px;
    position: relative;
    width: 114px;
    height: 114px;
    float: left; 
}

.usuario{
    margin-right: 30px;
    position: relative;
    width: 120px;
    height: 125px;
    float: right;
    transition: all 1s;
    cursor: pointer;
}

.usuario:hover{
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}

.menu ul{
    z-index: 3;
    list-style: none;/* tirar os pontinhos */
    position: relative;/* para usar z-index fixed ou absolute*/
    /*A propriedade especifica a ordem da pilha de um elemento.
    se usar z-index: -1 em uma imagem ela fica atraz do texto*/
}

.menu{
    width: 100%;
    height:150px;
    font-size: 25px;
    background-color:rgb(7, 200, 155);
    font-family: Castellar ;
    
} 

.menu a:hover{
    height: 58px;
    margin-right: 10px;
    text-shadow:  7px 5px 4px rgba(1, 52, 40, 0.435);
    background-color: rgb(255, 255, 255);
    color: rgb(57, 200, 167);
    box-shadow: 7px 5px 5px rgba(1, 52, 40, 0.797);
}

.menu ul li a{
    padding: 25px;
    padding-top: 65px;
    display: block;
    text-decoration: none;/* tira  a linha do link*/
    text-align: center;/* alinha no centro do bloco*/
    background-color:rgb(7, 200, 155);
    color:black;
    height: 60px;
} 
    
.menu ul ul {
    position: absolute;
    visibility: hidden;
    height: 30px; 
}

.menu ul li{ 
    width: 350px;
    height: 130px;
    float: left;
}

.retangulo1{
    margin-top: 80px;
    margin-left: 100px;
    background-color: rgb(63, 168, 166);
    height: 570px;
    width: 470px;
    border-radius: 20px;
    transition: all 0.5s;
    cursor: pointer;    
    }

    .retangulo1:hover{
        -webkit-filter: drop-shadow(15px 10px 5px rgba(0,0,0,.5));
        filter: drop-shadow(15px 10px 5px rgba(0,0,0,.5));
    }

.retangulo2{
    margin-top: -570px;
    margin-left: 700px;
    background-color: rgb(168, 63, 100);
    height: 570px;
    width: 470px;
    border-radius: 20px;
    transition: all 0.5s;
    cursor: pointer;       
    }

    .retangulo2:hover{
        -webkit-filter: drop-shadow(15px 10px 5px rgba(0,0,0,.5));
        filter: drop-shadow(15px 10px 5px rgba(0,0,0,.5));
    }
    

.retangulo3{
    margin-top: -570px;
    margin-left: 1300px;
    background-color: rgb(63, 168, 88);
    height: 570px;
    width: 470px;
    border-radius: 20px;
    transition: all 0.5s;
    cursor: pointer;       
    }

    .retangulo3:hover{
        -webkit-filter: drop-shadow(15px 10px 5px rgba(0,0,0,.5));
        filter: drop-shadow(15px 10px 5px rgba(0,0,0,.5));
    }

.retangulo4{
    margin-top: 70px;
    margin-left: 100px;
    background-color: rgb(76, 176, 206);
    height: 570px;
    width: 470px;
    border-radius: 20px;
    transition: all 0.5s;
    cursor: pointer;   
    }

    .retangulo4:hover{
        -webkit-filter: drop-shadow(15px 10px 5px rgba(0,0,0,.5));
        filter: drop-shadow(15px 10px 5px rgba(0,0,0,.5));
    }


.retangulo5{
    margin-top: -570px;
    margin-left: 700px;
    background-color: rgb(235, 185, 78);
    height: 570px;
    width: 470px;
    border-radius: 20px;
    transition: all 0.5s;
    cursor: pointer;   
    }

    .retangulo5:hover{
        -webkit-filter: drop-shadow(15px 10px 5px rgba(0,0,0,.5));
        filter: drop-shadow(15px 10px 5px rgba(0,0,0,.5));
    }


.retangulo6{
    margin-top: 70px;
    margin-left: 100px;
    background-color: rgb(155, 102, 195);
    height: 570px;
    width: 470px;
    border-radius: 20px;
    transition: all 0.5s;
    cursor: pointer;   
    }

    .retangulo6:hover{
        -webkit-filter: drop-shadow(15px 10px 5px rgba(0,0,0,.5));
        filter: drop-shadow(15px 10px 5px rgba(0,0,0,.5));
    }


.retangulo7{
    margin-top: -1210px;
    margin-left: 1300px;
    background-color: rgb(131, 161, 172);
    height: 570px;
    width: 470px;
    border-radius: 20px;
    transition: all 0.5s;
    cursor: pointer;   
    }

    .retangulo7:hover{
        -webkit-filter: drop-shadow(15px 10px 5px rgba(0,0,0,.5));
        filter: drop-shadow(15px 10px 5px rgba(0,0,0,.5));
    }


.retangulo8{
    margin-top: 70px;
    margin-left: 700px;
    background-color: rgb(120, 175, 76);
    height: 570px;
    width: 470px;
    border-radius: 20px;
    transition: all 0.5s;
    cursor: pointer;   
    }

    .retangulo8:hover{
        -webkit-filter: drop-shadow(15px 10px 5px rgba(0,0,0,.5));
        filter: drop-shadow(15px 10px 5px rgba(0,0,0,.5));
    }


.retangulo9{
    margin-top: -570px;
    margin-left: 1300px;
    background-color: rgb(198, 31, 53);
    height: 570px;
    width: 470px;
    border-radius: 20px;
    transition: all 0.5s;
    cursor: pointer;       
    }

    .retangulo9:hover{
        -webkit-filter: drop-shadow(15px 10px 5px rgba(0,0,0,.5));
        filter: drop-shadow(15px 10px 5px rgba(0,0,0,.5));
    }
    

.sobre1{
    margin-top: 15px;
    margin-left: 30px;
    background-color: rgb(255, 255, 255);
    height: 200px;
    width: 413px;
    border-radius: 20px; 
    box-shadow: 7px 5px 5px rgba(1, 52, 40, 0.797);   
    }


.usuario1{
    height: 182px;
    width: 202px;
    margin-left: 20px;
    margin-top: 10px;
    
}

.menuzito{
    margin-top: 110px;
    color: rgb(1, 68, 54);
    text-shadow:  7px 5px 4px rgba(0, 0, 0, 0.464);
    font-family: Castellar;
}

footer{
     width: 100%;
     height: 310px;
     font-family: Bahnschrift;
     display: flex;
     justify-content: space-around;
     position: relative;
     bottom: -300px;
     padding: 5px;
     font-size: 20px;
     color:rgb(0, 0, 0);
     background-color: rgb(7, 200, 155);
     text-align: left;
}

@media screen and (min-width:1150px) and (max-width:1500px){

   .logo{
        display: none;
         }
         .usuario{
           display: none
         };
       .footer{
           width:99%;
           height: 50%;
           }
           .menuzito{
            margin-top: 10%;
               flex-direction: column;
               display: flex;
               text-align: center;
               text-wrap: wrap;
             }
             .logo3{
               display: none;
             }
             .logo2{
               display: none;
             }
       .menu{
           display: none;
       }
       .retangulo{
           text-wrap: wrap;
           flex-direction: column;
       }
   
       .retangulo1{
           width:72%;
           height: 70%;
       }
       .text1{
           margin-top:1%;

       }
       .text7{
           margin-top: -25%;
       }
       .text3{
           margin-top: 3%;
           margin-left:35%;
       }
       .text8{
           margin-top: 30%;
           margin-left:3%;
           font-size: 1rem;
       }
       .sobre1{
           width: 35%;
           margin-left: 3%;
       }
       .retangulo2{
           margin-top:10%;
           margin-left: 11%;
           width:72%;
           height: 70%;
           
       }
       .text9{
           margin-top: -25%;
       }
       .retangulo3{
           width:72%;
           height: 70%;
           margin-left: 11%;
           margin-top: 15%;
       }
       .text10{
        margin-top: -25%;
       }
       .retangulo4{
           width:72%;
           height: 70%;
       }
       .text11{
        margin-top: -25%;
       }
       .retangulo5{
           margin-top:10%;
           margin-left: 11%;
           width:72%;
           height: 70%;
       }
       .text12{
           margin-left: 1%;
           margin-top: -20%;
       }
       .retangulo6{
           width:72%;
           height: 70%;
           margin-left: 11%;
           margin-top: 15%;
       }
       .text13{
        margin-top: -20%;
       }
       .retangulo7{
           margin-top:10%;
           margin-left: 11%;
           width:72%;
           height: 70%;
       }
       .text14{
        margin-top: -25%;
           margin-left: 1%;
       }
       .retangulo8{
           margin-top:10%;
           margin-left: 11%;
           width:72%;
           height: 70%;
       }
       .text15{
        margin-top: -28%;
           margin-left: 1%;
       }
       .retangulo9{
           margin-top:10%;
           margin-left: 14%;
           width:72%;
           height: 70%;
       }
       .text16{
        margin-top: -28%;
           margin-left: 1%;
       }

}



@media screen and (max-width:1100px) {

    .logo{
        display: none;
         }
         .usuario{
           display: none
         };
       .footer{
           width:99%;
           height: 50%;
           }
           .menuzito{
            margin-top: 10%;
               flex-direction: column;
               display: flex;
               text-align: center;
               text-wrap: wrap;
             }
             .logo3{
               display: none;
             }
             .logo2{
               display: none;
             }
       .menu{
           display: none;
       }
       .retangulo{
           text-wrap: wrap;
           flex-direction: column;
       }
   
       .retangulo1{
           width:72%;
           height: 70%;
       }
       .text1{
           margin-top:1%;

       }
       .text7{
           margin-top: -25%;
       }
       .text3{
           margin-top: 3%;
           margin-left:35%;
       }
       .text8{
           margin-top: 30%;
           margin-left:3%;
           font-size: 1rem;
       }
       .sobre1{
           width: 35%;
           margin-left: 3%;
       }
       .retangulo2{
           margin-top:10%;
           margin-left: 11%;
           width:72%;
           height: 70%;
           
       }
       .text9{
           margin-top: -25%;
       }
       .retangulo3{
           width:72%;
           height: 70%;
           margin-left: 11%;
           margin-top: 15%;
       }
       .text10{
        margin-top: -25%;
       }
       .retangulo4{
           width:72%;
           height: 70%;
       }
       .text11{
        margin-top: -25%;
       }
       .retangulo5{
           margin-top:10%;
           margin-left: 11%;
           width:72%;
           height: 70%;
       }
       .text12{
           margin-left: 1%;
           margin-top: -20%;
       }
       .retangulo6{
           width:72%;
           height: 70%;
           margin-left: 11%;
           margin-top: 15%;
       }
       .text13{
        margin-top: -20%;
       }
       .retangulo7{
           margin-top:10%;
           margin-left: 11%;
           width:72%;
           height: 70%;
       }
       .text14{
        margin-top: -25%;
           margin-left: 1%;
       }
       .retangulo8{
           margin-top:10%;
           margin-left: 11%;
           width:72%;
           height: 70%;
       }
       .text15{
        margin-top: -28%;
           margin-left: 1%;
       }
       .retangulo9{
           margin-top:10%;
           margin-left: 14%;
           width:72%;
           height: 70%;
       }
       .text16{
        margin-top: -28%;
           margin-left: 1%;
       }

}

@media screen and (max-width:850px) and (max-width:950px) and (max-width:1050px){


    .logo{
        display: none;
         }
         .usuario{
           display: none
         };
       .footer{
        display: none;
           width:99%;
           height: 50%;
           }
           .menuzito{
            margin-top: 10%;
               flex-direction: column;
               display: flex;
               text-align: center;
               text-wrap: wrap;
             }
             .logo3{
               display: none;
             }
             .logo2{
               display: none;
             }
       .menu{
           display: none;
       }
       .retangulo{
           text-wrap: wrap;
           flex-direction: column;
       }
   
       .retangulo1{
           width:72%;
           height: 70%;
       }
       .text1{
           margin-top:1%;

       }
       .text7{
           margin-top: -25%;
       }
       .text3{
           margin-top: 3%;
           margin-left:35%;
       }
       .text8{
           margin-top: 30%;
           margin-left:3%;
           font-size: 1rem;
       }
       .sobre1{
           width: 35%;
           margin-left: 3%;
       }
       .retangulo2{
           margin-top:10%;
           margin-left: 11%;
           width:72%;
           height: 70%;
           
       }
       .text9{
           margin-top: -25%;
       }
       .retangulo3{
           width:72%;
           height: 70%;
           margin-left: 11%;
           margin-top: 15%;
       }
       .text10{
        margin-top: -25%;
       }
       .retangulo4{
           width:72%;
           height: 70%;
       }
       .text11{
        margin-top: -25%;
       }
       .retangulo5{
           margin-top:10%;
           margin-left: 11%;
           width:72%;
           height: 70%;
       }
       .text12{
           margin-left: 1%;
           margin-top: -20%;
       }
       .retangulo6{
           width:72%;
           height: 70%;
           margin-left: 11%;
           margin-top: 15%;
       }
       .text13{
        margin-top: -20%;
       }
       .retangulo7{
           margin-top:10%;
           margin-left: 11%;
           width:72%;
           height: 70%;
       }
       .text14{
        margin-top: -25%;
           margin-left: 1%;
       }
       .retangulo8{
           margin-top:10%;
           margin-left: 11%;
           width:72%;
           height: 70%;
       }
       .text15{
        margin-top: -28%;
           margin-left: 1%;
       }
       .retangulo9{
           margin-top:10%;
           margin-left: 14%;
           width:72%;
           height: 70%;
       }
       .text16{
        margin-top: -28%;
           margin-left: 1%;
       }




}




@media screen and (min-width:450px) and (max-width:550px) and (max-width:650px) and (max-width:750px){
    .logo{
     display: none;
      }
      .usuario{
        display: none
      };
    .footer{
        width:99%;
        height: 50%;
        }
        .menuzito{
            display: none;
            text-align: center;
            text-wrap: wrap;
          }
          .logo3{
            display: none;
          }
          .logo2{
            display: none;
          }
    .menu{
        display: none;
    }
    .retangulo{
        text-wrap: wrap;
        flex-direction: column;
    }

    .retangulo1{
        width:72%;
        height: 70%;
    }
    .text1{
        margin-top: -45%;
    }
    .text7{
        margin-top: -45%;
    }
    .text3{
        margin-top: 3%;
        margin-left:62%;
    }
    .text8{
        margin-top: -7%;
        margin-left:5%;
        font-size: 1rem;
    }
    .sobre1{
        width: 45%;
        margin-left: 5%;
    }
    .retangulo2{
        margin-top:10%;
        margin-left: 20%;
        width:72%;
        height: 70%;
        
    }
    .text9{
        margin-top: -45%;
    }
    .retangulo3{
        width:72%;
        height: 70%;
        margin-left: 20%;
        margin-top: 15%;
    }
    .text10{
        margin-top: -45%;
    }
    .retangulo4{
        width:72%;
        height: 70%;
    }
    .text11{
        margin-top: -45%;
    }
    .retangulo5{
        margin-top:10%;
        margin-left: 20%;
        width:72%;
        height: 70%;
    }
    .text12{
        margin-left: 1%;
        margin-top: -20%;
    }
    .retangulo6{
        width:72%;
        height: 70%;
        margin-left: 20%;
        margin-top: 15%;
    }
    .text13{
        margin-top: -45%;
    }
    .retangulo7{
        margin-top:10%;
        margin-left: 20%;
        width:72%;
        height: 70%;
    }
    .text14{
        margin-top: -20%;
        margin-left: 1%;
    }
    .retangulo8{
        margin-top:10%;
        margin-left: 20%;
        width:72%;
        height: 70%;
    }
    .text15{
        margin-top: -30%;
        margin-left: 1%;
    }
    .retangulo9{
        margin-top:10%;
        margin-left: 20%;
        width:72%;
        height: 70%;
    }
    .text16{
        margin-top: -30%;
        margin-left: 1%;
    }
}