/* CSS do Card (Professor) */
/* 1. Reset CSS */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    line-height: 1;
    font-family: sans-serif;
}

ol,
ul {
    list-style-type: none;
}

img,
video {
    max-width: 100%;
    height: auto;
}

/* 2. Espaço utilizado para criar nosso card */
body {
    font-family: "Georgia", serif; /* Uma fonte mais elegante para receitas */
    background-color: #f5f5f5; /* Um tom suave de cinza para o fundo */
    color: #333; /* Cor de texto escura para boa legibilidade */

    display: flex; /* Usando Flexbox para centralizar o card */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    min-height: 100vh; /* Garante que o corpo ocupe toda a altura total da viewport */
    margin: 0;
}

/* 3. Estilizar o card da receita */
.recipe-card {
    width: 350px; /* Largura fixa para o card */
    background-color: #fff; /* Fundo branco para o card */
    border-radius: 15px; /* Bordas arredondadas em 15px */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para dar profundidade */

    /* 
    Esta propriedade "corta" qualquer conteúdo filho (no caso, nossa imagem), 
    que tente "vazar" para fora dos cantos arredondados 
    [Nessa situação, não possue efeito pois img { max-width: 100%; }]
    */
    overflow: hidden; /* Garante que o conteúdo não ultrapasse as bordas arredondadas */
}

/* 4. Estilizar a imagem da receita  - Nosso foco principal */
.recipe-image {
    /* 
    Possue efeito apenas em imagens menores do que o card (w: 350px). 
    Elas serão redimensionadas para ocupar toda a largura do card. 
    */
    width: 100%; /* A imagem ocupa toda largura do card */
    display: block; /* Remove o espaço embaixo da imagem */
}

/* 5. Estilizar o conteúdo da receita (titulo, ingredientes e intruções) */
.recipe-content {
    padding: 25px; /*Espaçamento interno para o conteúdo*/
}

/* 6. Estilizar o titulo da receita */
.recipe-title {
    font-size: 1.5rem; /* Tamanho maior para o titulo (1rem = 16px) */
    margin: 0 0 15px; /* Espaçamento abaixo do título */
    color: #27ae60; /* Um verde vibrante para o titulo */
}

/* 7. Estilizar a seção de descrição */
.recipe-description {
    font-size: 1rem; /* Tamanho padrão para o texto */
    line-height: 1.6; /* Espaçamento entre linhas para melhor legibilidade */
    color: #666; /* Cinza médio para o texto */
    margin: 0 0 20px; /* Espaçamento abaixo da descrição */
}

/* CSS do Card (Próprio) */

/* .recipe-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 500px;
    height: 200px;

    display: flex;
    gap: 20px;

    font-family: arial, sans-serif;

    border-radius: 10px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 4px 2px;
}

.recipe-image {
    width: 40%;
    object-fit: cover;
    object-position: right;
}

.recipe-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.recipe-title {
    margin: 0;
}

.recipe-description {
    margin: 0;
} */