body{
    background: linear-gradient(120deg, black, grey, grey);
    height: 1600px;
   /* background-image: url(..//anexo-21/img/futu2.jpg);*/
   /* background-image: url(..//VS-CODE/img/artificial.webp);*/
   /* background: linear-gradient(120deg, black, grey);*/
    background-repeat: no-repeat;
    background-size: 220vw;
    
}

.maior{
    background:transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 98%;
    height: 56px;
    position: fixed;
    z-index: 1;

 
}

.maior:hover{
    animation: maiorrgb;
    animation-timing-function: ease-in-out;
    animation-duration: 1.5s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    border-radius: 10px;
    width: 98%;
    height: 56px;
}

.menor{
    display: flex;
    align-items: center;
    justify-content: space-between;
   /*background: linear-gradient(120deg, rgb(56, 56, 56), black);*/
    width: 99.8%;
    height: 54px;
    border-radius: 10px;
    /*box-shadow: 1px 1px 7px  grey;*/
    background-color: black;
}

@keyframes maiorrgb{
    0%{background: linear-gradient(45deg, blue, green, red, purple);}
     50%{background: linear-gradient(45deg, green, purple, red, blue);}
      100%{background: linear-gradient(45deg, red, blue, green, purple);}

      0%{box-shadow: 1px 1px 7px red;}
      33%{box-shadow: 1px 1px 7px blue;}
      66%{box-shadow: 1px 1px 7px purple;}
      100%{box-shadow: 1px 1px 7px green;}
  
}

.menorlogo{
    /*background-color: red;*/
    width: 100px;
    height: 30px;
    margin-left: 20px;
}

.menorlogo img{

    width: 100%;
    height: 30px;
    border-radius: 3px;
}

.menormenu{
    display: flex;
    justify-content: center;
    align-items: center;
   /* background-color: white;*/
    justify-content: space-between;
    width: 420px;
    gap: 5px;
}

.menormenu ul{
    list-style: none;
    /*background-color: white;*/
}

.menormenu a{
    text-decoration: none;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
    color: rgb(172, 171, 171);
}

.menormenu a:hover{
    color: white;
    transition: 0.1s;
}

.menormenu li{
    display: flex;
    align-items: center;
    justify-content: center; 
    /*background-color: red;*/
}

.menorbotao{
    margin-right: 20px;
    width: 120px;
    height: 40px;
    background-color: transparent;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 5px;
     
}

.menorbotao:hover{
     animation: botao;
    animation-timing-function: ease-in-out;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

@keyframes botao{
    0%{ background:linear-gradient(120deg, blue, red, purple, green);}
     50%{ background:linear-gradient(120deg, green, blue, purple, red);}
      100%{ background:linear-gradient(120deg, blue, green, red, purple);}

      0%{box-shadow:1px 1px 7px green;}
      33%{box-shadow:1px 1px 7px red;}
      66%{box-shadow:1px 1px 7px blue;}
      100%{box-shadow:1px 1px 7px purple;}
      
}

.menorbotao a{
    width: 99.8%;
}

.menorbotao button{
    width: 99.8%;
    height: 38px;
    font-size: 26px;
    border-radius: 5px;
    background-color: grey;
    border: none;
}


.menorbotao button:hover{
    background-color: black;
    color: white;
    cursor: pointer;
   
}

.divconteudo{
    width: 100%;
    height: 400px;
   /* backdrop-filter: blur(12px);*/
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: transparent;
    margin-top: 120px;
    position: relative;
    position: absolute;
    flex-wrap: wrap;
    
    

}

.divconteudo section{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 30%;
    height: 500px;
    background: linear-gradient(120deg, blue, white, blue);
    border-radius: 15px;
    box-shadow: 1px 1px 5px black;
    margin: 10px;
}


.divconteudo section:hover{
    animation: sectionanimation;
    animation-timing-function: ease-in-out;
    /*animation-iteration-count: infinite;*/
    animation-duration: 1s;
    /*animation-direction: alternate;*/
    /*cursor: pointer;*/
 

}

@keyframes sectionanimation{
    50%{transform: rotate(2deg);}
}

.divconteudo img{
    width: 110%;
    border-radius: 50%;
    box-shadow: 1px 1px 7px blue;
    height: 300px;

}




















/*TUTORIAS*/

.tutorial{
    background: linear-gradient(120deg, black, grey, grey);
    height: 1500px;
   /* background-image: url(..//anexo-21/img/futu2.jpg);*/
   /* background-image: url(..//VS-CODE/img/artificial.webp);*/
   /* background: linear-gradient(120deg, black, grey);*/
    background-repeat: no-repeat;
    background-size: 220vw;
    
}


.divtutorial{
    width: 100%;
    height: 400px;
   /* backdrop-filter: blur(12px);*/
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: transparent;
    margin-top: 150px;
    position: relative;
    position: absolute;
    flex-wrap: wrap;
    

}

.divtutorial section{
    display: flex;
    align-items: center;
    justify-content: center;
    /*flex-direction: column;*/
    width: 80%;
    height: 300px;
    background: linear-gradient(120deg, white, white, blue, aqua);
    border-radius: 15px;
    box-shadow: 1px 1px 5px black;
    margin: 25px;
}


.divtutorial section:hover{
    animation: tutorialanimation;
    animation-timing-function: ease-in-out;
    /*animation-iteration-count: infinite;*/
    animation-duration: 0.5s;
    /*animation-direction: alternate;*/
    /*cursor: pointer;*/
}

@keyframes tutorialanimation{
    50%{transform: translateY(-15px);}
}

.divtutorial img{
    width: 20%;
    border-radius: 15px;
    box-shadow: 1px 1px 7px blue;
    height: 250px;
    margin: 10px;

}

.tuto{
    width: 18%;
    height: 0px;
    background-color: green;
    margin-top: 25px;
    position: relative;
    position: absolute;
    z-index: 1;
    margin-left: 40%;
    /*position: fixed;*/
}
.tuto h1{
    font-size: 40px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color:gold;
    animation: tutoh1 linear;
    animation-timing-function: ease-in-out;
    animation-duration: 5s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    margin-top: 40px;
       
}

@keyframes tutoh1{
    0%{color: gold;}
    25%{color: red;}
    50%{color: aqua;}
    75%{color: white;}
    100%{color: blue;}

    0%,100%{scale: 100%;}
    50%{scale: 103%;}    
}






















/*ANOTAÇÕES*/

.bobyanotacoes{
    background: linear-gradient(120deg, black, grey, grey);
    height: 5200px;
   /* background-image: url(..//anexo-21/img/futu2.jpg);*/
   /* background-image: url(..//VS-CODE/img/artificial.webp);*/
   /* background: linear-gradient(120deg, black, grey);*/
    background-repeat: no-repeat;
    background-size: 220vw;
    
}

.divanotacoes{
    width: 100%;
    height: 400px;
   /* backdrop-filter: blur(12px);*/
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: transparent;
    margin-top: 150px;
    position: relative;
    position: absolute;
    flex-wrap: wrap;


}

.divanotacoes section{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 45%;
    height: 300px;
    background: linear-gradient(120deg, white, white, greenyellow, greenyellow);
    border-radius: 15px;
    box-shadow: 1px 1px 5px black;
    margin: 10px;
   
}


.divanotacoes section:hover{
    animation: sectionanotacoes;
    animation-timing-function: ease-in-out;
    /*animation-iteration-count: infinite;*/
    animation-duration: 1s;
    /*animation-direction: alternate;*/
    /*cursor: pointer;*/
 

}

@keyframes sectionanotacoes{
    50%{transform: rotate(-2deg);}
}

/*.divanotacoes img{
    width: 110%;
    border-radius: 50%;
    box-shadow: 1px 1px 7px blue;
    height: 300px;

}*/

.anot{
    width: 18%;
    height: 0px;
    /*background-color: green;*/
    margin-top: 20px;
    position: relative;
    position: absolute;
    z-index: 1;
    margin-left: 40%;
    /*position: fixed;*/
}
.anot h1{
    font-size: 40px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color:gold;
    animation: tutoh1 linear;
    animation-timing-function: ease-in-out;
    animation-duration: 5s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    margin-top: 40px;
       
}

.vermelho{
    color: red;
}

@keyframes tutoh1{
    0%{color: gold;}
    25%{color: red;}
    50%{color: aqua;}
    75%{color: white;}
    100%{color: blue;}

    0%,100%{scale: 100%;}
    50%{scale: 103%;}    
}















/* CONTROLE */



.divcontrole span{
color: black;
}


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

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

.divcontrole{
background:linear-gradient(120deg, aqua, aqua, red, red);
width: 90%;
height: 380px;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
flex-wrap: wrap;
border: 2px solid grey;
border-radius: 30px;
/* box-shadow: 1px 2px 7px white;  */
margin-top: 0px;  
position: relative;
cursor: pointer;

}

.divcontrole:hover{
    box-shadow: 1px 1px 12px palegoldenrod ;
}


.materialsaida{
display: flex;
justify-content: space-around;
align-items: center;
/*background-color: green;*/
width: 100%;
height: 5000px;
flex-direction: column;
margin-top: 60px;
position: relative;
position: absolute;

}

.nomesaida{
    width: 95%;
    height: 30px;
    /* background-color: red; */
    align-items: center;
    display: flex;
    justify-content: center;
}

.nomecontrole{
    color: black;
    width: 100%;
     margin-left: 40%;
    font-size: 25px;

}
























/* FERRAMENTAS */


.totalsection{
    width: 100%;
    height: 3000px;
    position: relative;
    position: absolute;
    display: flex;
    flex-direction: column;
    /*background-color: pink;*/ 
    margin-top: 120px;
    align-items: center;
   
}

.nomeferramenta{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: white;
    margin-left: 40%;
   
}


.divferramenta{
    width: 95%;
    height: 350px;
    margin-top: 10px;
    justify-content: space-around;
    display: flex;
    flex-wrap: wrap;
    background: linear-gradient(120deg, aqua, aqua, blue, blue);
    box-shadow: 1px 5px 7px black;
    border-radius: 15px; 
    
}

.ferramenta{
    width: 202px;
    height: 250px;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px; 
    border-radius: 15px;
    border: 2px solid black;  
   
}

.ferramenta:hover{
    animation: ferra;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-direction: alternate;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}


@keyframes ferra{
    0%{background: linear-gradient(120deg, purple, red, blue, yellow);}
    33%{background: linear-gradient(120deg, red, blue, yellow, purple);}
    66%{background: linear-gradient(120deg, blue, yeelow, purple, red);}
    100%{background: linear-gradient(120deg, yellow,purple, red, blue);}

    0%{box-shadow:1px 1px 5px blue;}
    33%{box-shadow:1px 1px 5px black;}
    66%{box-shadow:1px 1px 5px yellow;}
    100%{box-shadow:1px 1px 5px red;}
}

.fersec{
    width: 200px;
    height: 200px;
    /* background: linear-gradient(120deg, white, blue); */
    background: transparent;
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 15px;
}

.fersec img{
    width: 96%;
    height: 160px;
    border-radius: 50%;
    border: 2px solid black;
}