.hero{
    background-image: url("./background.png");
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
}
.text{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 85vh;
}
.title{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap:30px;
}
.title h1{
    font-family: "MedievalSharp", serif;
    font-size: 60px;
    color: #FDE3BE;
}
.hero a{
    text-decoration:none;
    color:white;
    font-size:50px;
}
.p:hover{
    opacity: 0.8;
}
.button-brown{
    border-radius: 50%;
    background-color: #DBAF7C;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 60px;
    height: 60px;
}
.button-brown:hover{
    background-color:#af8b62;
}
.resumo{
    display:none;
}
.container{
    padding: 100px 100px;
}
.resumo{
    display: none;
    background-color: #DBAF7C;
    transition: opacity 0.4s ease, max-height 0.4s ease;
}
.resumo-container{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.bottom-div{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    gap: 15vw;
    transition: transform 0.4s ease;
}
.resumo h1{
    align-self: center;
    font-size: 60px;
    font-family:"MedievalSharp", serif ;
    margin-bottom: 50px;
}
.resumo p{
    font-size: 21px;
    width: 50vw;
}
.resumo .right{
    border-radius: 40px;
    width: 20vw;
    border: 2px solid transparent;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
footer{
    font-size: 10px;
    text-align: end;
    padding: 5px;
    color: rgb(156, 156, 156);
    background-color: rgb(0, 0, 0);
}