/*RESET CSS*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: white;
    display:flex;
    justify-content:center;
    align-items:center;
    animation:mudarCor 10s infinite;
} 
main{
    display: flex;
    flex-direction:column;
    gap:28px; 
}
h1{
    font-family:sans-serif;
    font-size: 128px;
    font-weight:500;
    text-align: center;
    margin-top: 50px;
}
h2{
    font-size: 50px;
    font-family: sans-serif;
    font-weight: 500;
    text-align: center;
}
.destaque{
    background-color: black;
    color: #fff;
    padding: 12px 32px;
    transition: 1s;
}
.destaque:hover{
    background-color:none;
    padding: 12px 60px ;
}
.social-conteiner{
    display:flex;
    justify-content:space-between;
}
.social-conteiner img{
    width:350px;
    height: 350px;
    margin:25px 25px;
    border: 2px solid black;
    border-radius: 10px;
}
figure img{
    width: 100%;
    height:auto;
    display: block;
}
figcaption{
  font-family:sans-serif;
  font-size: 30px;
  text-align: center;
  color:white;
  margin-top: 8px;
}
figure{
  margin: 30px;
  padding: 2px;
  border: 2px solid black;
  border-radius: 10px;
  background-color:black;
}
@keyframes mudarCor {
    0%{
        background-color:rgb(130, 0, 0);
    }
    25%{
        background-color:rgb(120, 0, 0);
    }
    50%{
        background-color:rgb(100, 0, 0);
    }
    75%{
        background-color:rgb(120, 0, 0);
    }
    100%{
        background-color: rgb(130, 1, 1);
    }
}