@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Roboto:wght@300;400;500;700&display=swap');

body{
    margin: 0px;
    background-color: #f7f7f7;
    display: grid;
}
body::before{
    content: '';
    width: 100wh;
    background-color: #621611;
    height: 4px;
}
ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
}
p,
h1,
h2,
h3{
    margin: 0px;
}
ul{
    display: flex;
    justify-content: center;
    background-color: #D9D9D9;
    height: 60px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}
a{
    text-decoration: none;
    padding: 10px 20px;
    display: block;
    color: #621611;
    font-size: 1.2rem;
    font-weight: 600;
      
}
.logo{
    width: 15%;
    margin-top: -1.8rem;
    margin-left: 50px;
    
  }
.central{
    display: grid;
    justify-content: center;
    margin-top: 3rem;
}
.central h1{
    font-family: 'Comic Neue', cursive;
    font-weight:700;
    font-size: 1.7rem;
    color: #621611;
}
.central h1::before{
    content: '';
    width: 100px;
    height: 10px;
    background-color: aqua;
}
.central p {
    font-family: 'Roboto', sans-serif;
} 
    
.container{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 900px
   
}
.texto, p {
    text-align: left;
    margin-top: 10px;
}
.texto::before{
    display: block;
    width: 50;
    height: 10px;
    background-color: #c20dc2;
}
.banner{
    max-width: 100%;
}

.botao{
    font-family: 'Comic Neue', cursive;
    border-radius: 4px;
    font-weight: 600;
    padding: 8px; 
    transition: 0.3s;
    place-items: end;
}
.botao-cinza{
    background-color: #D9D9D9;
    border: #d9d9d9;
    color: #621611;
    
  
   
}
.botao-cinza:hover{
    background-color: #E9E9E9;
   
}
.botao-vermelho{
    background-color: #621611;
    border: #d9d9d9;
    color: #ffffff;
 
}
.botao-vermelho:hover{
    background-color: #771c16;
}