body{
    background-color: rgb(0, 0, 0);
    color: darkred;
    font-size: 18px;
    text-align: justify;
    margin-left: 5%;
    margin-right: 5%;
}
p{
    font-size: 20px;
    text-align: center;
    color: rgb(167, 3, 3);
}
h1{
   text-align: center;
   background-color: rgb(0, 0, 0);
   color: red;
   padding: 1%;
}
h2{
   text-decoration: underline;
   text-transform: uppercase;
}
li{
   font-style: italic;
   font-size: 18px;
}
ol{
   list-style:upper-alpha;
}
ul{
   list-style:square;
}
.nome{
   font-size: 14px;
   text-align: right;
   text-transform: capitalize;
   color: rgb(143, 4, 4);
}
summary{
    font-size: 25px;
    font-weight: bold;
    color: rgb(167, 3, 3);
    cursor: pointer;
}
details{
    font-size: 25px;
    padding-top: 1%;
    padding-bottom: 0.5%;
}
img{
    width: 200px;
    display: block;
    margin: 0 auto;
}
.conteudo1{
   display: flex;
   flex-direction: row;
   gap: 5%;
}
.conteudo2{
   display: flex;
   flex-direction: row-reverse;
   gap: 2%;
}
.conteudo2 img{
   width: 250px;
   border-radius: 25%;
}
.conteudo3{
   display: flex;
   flex-direction: row;
   gap: 6%;
}
.conteudo3 p{
   width: 40%;
}
.conteudo4{
   display: flex;
   flex-direction: row-reverse;
   gap: 5%;
}
.conteudo4 img{
   width: 250px;
}
table{
width: 80%;
display: block;
margin: 0% auto;
border-color: rgb(103, 0, 0);
border-style: double;
border-width: 5px;
}
th{
   text-align: center;
   font-size: 20px;
   background-color: rgb(0, 0, 0);
   border-color: rgb(255, 255, 255);
   border-width: 1px;
   border-style: solid;
}
td{
padding: 0,5%;
border-width: 1%;
border-color: rgb(96, 14, 14);
border-style: solid;
}
.destaque{
   width: 20%;
   text-align: center;
   font-weight: bold;
   font-size: 20px;
   background-color: rgb(0, 0, 0);
}
section{
   height: 98vh;
}
section.parte1{
   background-color: rgb(53, 0, 0);
   background-image: url(../imagens/desenho17.jpg);
   color: aliceblue;
   background-repeat: no-repeat;
   background-size: 150%;
   text-align: center;
   padding-top: 15%;
}
section.parte2{
   background-color: rgb(53, 0, 0);
   background-image: url(../imagens/desenho18.webp);
   color: aliceblue;
   background-repeat: no-repeat;
   background-size: 100%;
   text-align: center;
   padding-top: 15%;
}
section.parte3{
   background-color: rgb(53, 0, 0);
   background-image: url(../imagens/desenho20.webp);
   color: aliceblue;
   background-repeat: no-repeat;
   background-size: 100%;
   text-align: center;
   padding-top: 15%;
}
a{
   font-size: 18px;
   text-decoration: none;
   cursor: help;
   color: rgb(54, 8, 8);
}
a:hover{
font-size: 22px;
color: rgb(57, 2, 2);
cursor: pointer;
}
a:visited{
color: rgb(255, 255, 255);
}
.padrao{
padding: 0%;
margin-left: 0%;
margin-right: 0%;
margin: 0%;
}
header{
   background-color: rgb(41, 0, 0);
   width: 100%;
   height: 10vh;
   position: fixed;
}
nav ul{
list-style: none;
width: 100%;
padding: 0%;
margin: 0%;
}
nav ul li{
   float: inline-start;
   width: 22%;
   text-align: center;
   padding-top: 10px;
   padding-left: 1%;
}
nav ul li a{
   color: rgb(255, 255, 255);
   text-decoration: none;
   display: block;
   text-transform: capitalize;
   font-size: 18px;
   font-family: Arial, Helvetica, sans-serif;
   font-style: normal;
   padding: 8px;
}
nav ul li a:hover{
   background-color: rgb(122, 18, 18);
   color: black;
}
.conteudo5{
   display: block;
   margin: 0 auto;
   padding-top: 5%;
   width: 60%;
}
.conteudo5 h2{
   text-align: center;
}
.cards{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   gap: 15px;
   width: 80%;
   margin: 0 auto;
}.card{
   background-color: rgb(25, 3, 46);
   width: 300px;
   min-height: 210px;
   text-align: center;
   border-radius: 15%;
   border-color: rgb(57, 2, 2);
   border-style: solid;
   border-width: 2px;
   transition: 1.5s;
}
.card:hover{
   background-color: rgb(46, 0, 0);
   color: rgb(32, 4, 62);
}
.aula8 h1:hover{
font-size: 48px;
color: rgb(33, 1, 1);
}
.aula8 h1{
   transition: 1s;
}
.aula8{
animation: aparecer 5s;
}
@keyframes aparecer{
   from{
      opacity: 0;
   }
   to{
      opacity: 1;
   }
}
.galeria{
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-auto-rows: 300px;
   gap: 10px;
}
.galeria img{
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: 1s;
}
.img1{
   grid-column: span 2;
   grid-row: span 2;
}
.img5{
   grid-column: span 3;
   grid-row: span 2;
}
.img8{
   grid-column: span 3;
}
.img9{
   grid-column: span 2;
}
.img1:hover{
   filter: contrast(0.5);
   transform: rotate(180deg);
}
.img2:hover{
   filter: grayscale(1);
}
.img3:hover{
   filter: brightness(30%);
}
.img4:hover{
   transform: translateY(-10px);
   box-shadow: 0 15px 25px rgb(255, 255, 255);
}
.img5:hover{
   filter: saturate(0.5);
   transform: rotate(360deg);
}
.img6:hover{
   transform: scale(1.1);
   filter: blur(1px);
}
.img7:hover{
   transform: scale(-1.1);
}
.img8:hover{
   filter: sepia (1);
}
.img9:hover{
   filter: invert(1);
}
.site{
   margin: 0%;
   padding: 0%;
}
.site header{
   background-color: rgb(56, 0, 76);
   position: fixed;
   width: 100%;
   height: 15vh;
   display: flex;
   flex-direction: row;
   gap: 10%;
   justify-content: space-around;
}
.site header img{
   width: 200px;
   height: 90px;
}
.site header nav{
   width: 70%;
}
.site header nav ul ul{
   display: none;
}
.site header nav ul {
   list-style: none;
   justify-content: center;
   display: flex;
}
.site header nav ul li{
   width: 40%;
}
.site header nav ul li a{
   display: block;
   color: rgb(255, 255, 255);
   padding: 15px 20px;
   text-transform: capitalize;
   font-size: 20px;
   transition: 2s;
}
.site header nav ul li a:hover {
   background-color: rgb(106, 1, 1);
   color: rgb(37, 1, 71);
}
.site header nav ul li:hover ul{
   display: block;
}
.site header nav ul ul li{
   background-color: black;
   color: rgb(103, 0, 0);
   width: 49%;
}
.site header nav ul ul li a:hover{
   background-color: blueviolet;
   color: aliceblue;
}
.site{
   background-color: rgb(0, 0, 0);
   color: aliceblue;
}
.site main{
   height: 90vh;
}
.site footer{
   text-align: center;
   background-color: rgb(72, 2, 2);
   color: rgb(0, 0, 0);
}
.site h1{
   padding-top: 9%;
   padding-bottom: 2%;
   background-color: black;
   color: rgb(106, 1, 1);
}
.site img{
   width: 350px;
   height: 300px;
   display: block;
   margin: 0 auto;
}
.site *{
   margin: 0%;
   padding: 0%;
}
.menu-celular{
   display: none;
}
@media only screen and (max-width:800px){
   nav{
      display: none;
   }
   .menu-celular{
      display: block;
   }
   .menu-mobile{
      background-color: rgb(65, 1, 89);
      min-height: 100vh;
      position: fixed;
      top: 0;
      right: 0;
      z-index: 9999;
      width: 0%;
      overflow: hidden;
      transition: 1s;
   }
   .menu-mobile.abrir-menu{
      width: 100%;
   }
   .btn-abrir-menu{
      font-size: 60px;
      color: black;
   }
   .site-main{
   padding-top: 30%;
   height: 84vh;
   }
   .site h1{
      font-size: 70px;
      text-align: center;
   }
.site img{
   width: 350px;
}
.menu-moile h2{
   color: rgb(103, 0, 0);
   text-align: center;
}
.menu-mobile .atividades{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 5%;
   padding-left: 2%;
   padding-right: 2%;
}
.menu-mobile .atividades p{
    font-size: 22px;
    padding-top: 1%;
    margin: 0%;
}
.menu-mobile .atividades a{
   text-decoration: none;
   color: black;
}
.menu-mobile .atividades p:hover{
   background-color: rgb(106, 1, 1);
}
.menu-mobile.atividades a:hover{
   color: black;
}
/*aula 4*/
    .conteudo1, .conteudo2, .conteudo3, .conteudo4{
        display:block;
    }
    .conteudo1 img, .conteudo2 img, .conteudo3 img, .conteudo4 img{
        width:80%;
    }
    .conteudo3 p{
        width:90%;
    }
    /*aula6 */
    section{
        min-height: 115vh;
    }
    section.parte1,section.parte2,section.parte3 {
       background-image:none;
    }
    .principal p{
        font-size:16px;
    }
    /*aula 7*/
    .conteudo5{
        width:90%;
    }
    .conteudo5 h1{
        margin-top:25%;
    }
    /*aula 8*/
    .aula8 img{
        width:80%;
    }
    .padrao header nav{
        display:block
    }
    /*aula 1*/
    body{
        font-size:20px;
    }
    p{
        font-size: 25px;
    }
    /*aula 3*/
    img{
        width:80%;
    }
}