body{
background-color: rgb(35, 0, 0);
margin-top: 3%;
margin-bottom: 3%;
margin-left: 5%;
margin-right: 5%;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5em;
border-color: rgb(0, 0, 0);
border-width: 8px;
border-style: groove;
padding: 1%;
height: 80vh;
}
.capa{
display: flex;
flex-direction: row;
gap: 5%;
padding-left: 5%;
align-items: center;
width: 80%;
}
h1{
text-align: center;
color: rgb(249, 249, 249);
font-family: Georgia, 'Times New Roman', Times, serif;
padding-bottom: 5%;
text-decoration: underline;
animation: cores 1s infinite;
}
@keyframes cores{
   0%{
      color: rgb(194, 3, 3);
   }
   20%{
      color: rgb(35, 2, 2);
   }
   40%{
      color: brown;
   }
   60%{
      color: crimson;
   }
}
img{
width: 400px;
display: block;
margin: 0 auto;
transition: 1s;
}
img:hover{
transform: scale(1.1);
border-radius: 25%;
}
.botoes{
display: flex;
flex-direction: column;
}
.botao{
width: 400px;
height: 30px;
background-color: black;
padding: 2%;
margin: 1%;
transition: 1s;
}
.botao:hover{
background-color: rgb(40, 0, 79);
}
a{
text-decoration: none;
color: aqua;
}
.nome{
color: rgb(131, 2, 2);
text-align: center;
font-style: italic;
font-family: 'Times New Roman', Times, serif;
}

.efeito{
   animation: aparecer 5s;
}
@keyframes aparecer{
   0%{
      opacity: 0;
   }
   100%{
      opacity: 1;
   }
}
@media only screen and (max-width:800px){
   img{
      width: 80%;
   }
   .capa{
      flex-direction: column;
   }
   .botao{
      width: 100%;
   }
}