@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
   background-color: #1F1517; /*cor do background */
   color: #FFFFFF; /* cor da fonte */
}
html {
    font-family: Inter, sans-serif; /* fica como fonte padrão */
    font-weight: 500; /* tam da fonte */
}
a {
    text-decoration: none; /* A tag ancora fica sem o estilo do html */
}
ul {
    list-style: none; /* A lista fica sem o estilo do html */
}
nav {
    max-width: 1120px; /* garante que o tam fica o mesmo */
    margin: auto;
    padding: 1.5rem 10rem;

    display: flex; /* abaixo algumas funcionalidades */
    flex-direction: row; /* direção em linha */
    justify-content: space-between; /*espeço entre o conteúdo */
    align-items: center; /*centraliza o cabeçalho em linha */
}
.logo { /* foi definica essa classe no span */
    font-family: Teko;
    font-size: 2rem;
    font-weight: 600; /* peso */
    text-transform: uppercase; /* maiúscula */
}
.menu {
    display: flex; /* Opções do menu na horizontal */
    flex-direction: row;
    gap: 1.5rem;
    color: #fff2e780;
}
.github {
    color: #fff2e7;
    font-weight: 600;
}
main {
    display: flex;
    flex-direction: column;
}
.principal {
    background: #181012;
}
.hero { /* Primeira seção */
    max-width: 1120px;
    height: 60vh; /* view hight*/

    display: flex; /*faz 1 elem em um contêiner flexível e os filhos diretos em itens flexíveis */
    flex-direction: row; /* coloca tudo da class hero na horizontal */
    justify-content: space-between;
    align-items: center;
    gap: 6rem; /* define espaçamento entre itens no layout */
    padding: 0rem 2rem; /*margem interna*/
    margin: auto;
    overflow: clip; /* Corta o conteúdo que ultrapassa as bordas */
}
.hero-conteudo { /* 1ª seção Esq */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.destaque { /* classe do span da seção 1 - será usado em outros span */
    font-family: Epilogue;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
}
.marrom { /* faz parte da classe do span de seção 1, podendo ser usado em separado */
    color: #A45A49;
}
.amarelo {
    color: #E7A80E;
}
h1 {
    font-family: Montserrar;
    font-size: 2.9rem;
    font-weight: 800;
}
hr {
    border-color: #A45A49;
}
.hero-subtitulo {
    color: #c7bab3;
    font-family: Inter;
    font-size: 1.25rem;
    font-weight: 400;
}
.hero-imagens-container { /* 1ª seção Dir */
    max-width: 45%;
    column-count: 4;
    column-gap: 3rem;
    margin: -1rem;
}
.hero-imagens-conteiner > figure > img {
    width: 100%;
    border-radius: 0.5rem;
}
.botao-container {
    width: 100%;
    max-width: 1120px;
    margin: auto;
    transform: translate("0, -50%");
}
button {
    border: none;
    padding: 1rem;
    border-radius: 0.5rem;
    background: #A45A49;
}
.receitas {
    display: flex;
    flex-direction: column;
    max-width: 1120px;
    padding: 3rem 2rem;
    margin: auto;
}
.receitas-cabecalho {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.receitas-titulo {
    font-family: Montserrar;
    font-size: 2rem;
    font-weight: 700;
    color: #FFF2E7;
}
.receitas-titulo-subtitulo {
    color: #C7BAB3;
    font-family: Inter;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
}
.receitas-card-container {
    padding: 0rem 10rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /*Quebrar*/
    gap: 2rem;
}
.receitas-card {
    background: #241A1C;
    padding: 2rem;
    border-radius: 0.5rem;
    display: flex; /*vai agrupar o header e a <p> descrição abaixo */
    flex-direction: column;
    gap: 2rem;
    flex-basis: 29rem;
    margin-top: 2rem;
}
.receitas-card-cabecalho {
    display: flex;
    flex-direction: row; /* coloca conteúdo em linha */
    justify-content: space-between; /* justifica entre espaços */
    align-items: end; /* fica no fim do container */
}
.receitas-card-cabecalho-detalhes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.receita-titulo {
    color: #FFF2E7;
    font-family: Montserrar;
    font-size: 1.5px;
    font-style: normal;
    font-weight: 700;
}
.receita-avaliacao {
    color: #756A67;
    font-family: Inter;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
}
.receita-descricao {
    color: #C7BAB3;
    font-family: Inter;
    font-size: 1rem;
    font-weight: 400;
}
.receita-autor {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
} 
.receita-autor > img {
    border-radius: 20rem;
    width: 1.5rem;
}
.receita-autor-nome {
    color: #C7BAB3;
    font-family: Inter;
    font-size: 1rem;
    font-weight: 600;
}
footer {
    padding: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5;
    background: #23181A;
}
.footer-copy {
    color: #FFF2E7;
    font-family: Inter;
    font-size: 1rem;
    font-weight: 500;
}
.footer-autor {
    color: rgba(255, 242, 231, 0.50);
    font-family: Inter;
    font-size: 1rem;
    font-weight: 500;
}