html{
    font-size: 62.5%;
}

/* Estilos gerais */
body {
    background-color: #f5e7dc;
    font-family: 'Outfit', sans-serif;
}

/* Estilos do container de receita */
.receita {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #FFFFFF;
    max-width: 40%; 
    margin: 2% auto;
    border-radius: 15px;
    padding: 15px;
    
}

/* Estilos da imagem da receita */
.receita img {
    max-width: 100%;
    width: 62rem;
    height: auto;
    border-radius: 1.5rem;
    margin-bottom: 2rem; 
}

/* Estilos do card */
.card {
    display: flex;
    flex-direction: column;
    margin: 0 1.5rem; 
}

/* Estilos de texto */
h1, span {
    font-weight: 400;
}

h1 {
    font-family: 'Young Serif', serif;
    color: #302d2c;
    font-size: 3.8rem; 
}

span{
    color: #4d4947;
    font-weight: bold;
}

/* Estilos de parágrafos */
.introducao p{
    color: #4d4947;
    font-size: 1.5rem; 
    font-weight: 500;
    margin-top: 10px;
}

.nutricao p{
    color: #4d4947;
    font-size: 1.6rem; 
    font-weight: 500;
    margin-top: 10px;
}

.informacao-do-card p{
    font-weight: 500;
}

/*Estilos da informação do card */
.informacao-do-card {
    background-color: rgba(253, 128, 187, 0.13); 
    border-radius: 10px;
    height: 180px;
    margin-top: 25px;
}

/*Estilos do tempo de preparo */
.tempo-de-preparo h2{
    font-family: 'Outfit', sans-serif;
    color: hsl(332, 51%, 32%);
    font-size: 1.7rem;
    font-weight: 600;
    margin-left: 3rem;
}

/* Estilos de listas */
ul {
    padding-left: 0;
}

/* Estilos de marcadores de lista */
li::marker {
    font-size: 1.2rem;
    font-weight: 600;
    color: #854632;
}

/* Estilos de itens de lista */
.tempo-de-preparo li {
    color: #4d4947;
    font-size: 1.4rem;
    font-weight: 500;
    padding: 0.5rem; 
    margin: 1.5rem 5rem;
}

/* Estilos de títulos de seção */
h2 {
    font-family: 'Young Serif', serif;
    color: #854632;
    font-size: 2.6rem; 
    font-weight: 400;
    margin-top: 20px;
}

/* Estilos de itens de lista */
.ingredientes li, .instrucoes li {
    color: #4d4947;
    font-size: 1.4rem;
    font-weight: 500;
    padding: 0.4rem 1.5rem; 
    margin: 0.5rem 2rem;
}

hr{
    margin-top: 1rem;
}

/* Estilos de informações nutricionais */
.informacao-nutricional {
    display: flex;
}

.componentes {
    flex: 5;
}

.componentes hr {
    width: 100%;
}

.valores {
    flex: 4.6;
}

.informacao-nutricional li{
    margin-bottom: 2rem;
    list-style: none;
}

.valores li {
    color: #854632;
}

.componentes li{
    color: #4d4947;
    margin-left: 3.2rem;
    margin-top: 2rem;
    font-size: 1.4rem; 
    font-weight: 500;
}

.valores li {
    margin-top: 2rem;
    font-size: 1.4rem;
    font-weight: 700;
}