/* General styles */
:root {
    --white: hsl(0, 0%, 100%);
    --Stone100: hsl(30, 54%, 90%);
    --Stone150: hsl(30, 18%, 87%);
    --Stone600: hsl(30, 10%, 34%);
    --Stone900: hsl(24, 5%, 18%);
    --Brown800: hsl(14, 45%, 36%);
    --Rose800: hsl(332, 51%, 32%);
    --Rose50: hsl(330, 100%, 98%);
    --fontYoungSerif: "Young Serif", serif;
    --fontOutfit: "Outfit", serif;
    --fontSize: 16px;
}

body {
    background-color: var(--Stone100);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: var(--fontSize);
    width: 100%;
    margin: 0;
    font-family: var(--fontOutfit);
}

.externalContainer {
    border-radius: 2vh;
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    width: 90vh;
    margin-bottom: 5vh;
}

.internalContainer {
    border-radius: 2vh;
    width: 80vh;
    margin: 5vh 0;
}

.recipeImage {
    background-image: url(../images/image-omelette.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 2vh;
    width: 100%;
    height: 40vh;
}

.recipeInformation h1 {
    font-family: var(--fontYoungSerif);
    font-size: 42px;
    font-weight: 400;
    color: black;
}

.recipeInformation {
    font-family: var(--fontOutfit);
    font-weight: 400;
    color: var(--Stone600);
}

.recipePreparationTime {
    width: 100%;
    background-color: var(--Rose50);
    border-radius: 1vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4vh 0;
}

.recipePreparationTimeContent {
    width: 90%;
    padding: 2vh;
    font-weight: 800;
    font-size: 16px;
    color: var(--Stone600);
}

.recipePreparationTimeContent h4 {
    color: var(--Rose800);
    font-size: 18px;
    font-family: var(--fontOutfit);
    margin-bottom: 1vh;
}

.recipePreparationTimeContent li::marker {
    color: var(--Rose800);
}

.recipePreparationTime p {
    padding-left: 3vh;
}

.recipePreparationTimeContent span {
    font-weight: 400;
}

.recipeIngredients, .recipeInstructions {
    padding-bottom: 4vh;
    border-bottom: 1px solid var(--Stone150);
    margin-bottom: 4vh;
}

.recipeIngredients li::marker, .recipeInstructions li::marker, .recipeNutrition h4 {
    color: var(--Brown800);
}

.recipeIngredients h4, .recipeInstructions h4, .recipeNutrition h4 {
    color: var(--Brown800);
    font-family: var(--fontYoungSerif);
    font-size: 25px;
    font-weight: 400;
    margin-bottom: 2vh;
}

.recipeIngredients {
    font-weight: 400;
    font-family: var(--fontOutfit);
    color: var(--Stone600);
}

.recipeIngredients p, .recipeInstructions p {
    padding-left: 2vh;
}

.recipeInstructions {
    font-weight: 800;
    font-family: var(--fontOutfit);
    color: var(--Stone600);
}

.recipeInstructions span {
    font-weight: 400;
}

.recipeInstructions li {
    margin-bottom: 1vh;
}

.recipeInstructions li:last-of-type {
    margin-bottom: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 2vh 0;
    font-family: var(--fontOutfit);
}

td {
    padding: 1vh 2vh;
    text-align: left;
    border-bottom: 1px solid var(--Stone150);
    color: var(--Stone600);
    font-weight: 400;
}

.recipeNutrition tr:last-of-type td {
    border-bottom: none;
}

.recipeNutrition p {
    margin: 2vh 0;
    color: var(--Stone600);
}

.recipeNutrition span {
    color: var(--Brown800);
    font-weight: 600;
}

.attribution {
    font-size: 11px;
    text-align: center;
    color: #1D1616;
    text-align: left;
}

.attribution a {
    color: #8E1616;
}

/* Media Query for mobile screens */
@media (max-width: 375px) {
    .externalContainer {
        width: 100%;
        margin: 0;
        padding: 0;
        border-radius: 0px;
    }
    .internalContainer {
        width: 100%;
        margin: 0;
        padding: 0;
        border-radius: 0px;
    }
    .recipeImage {
        height: 30vh;
        width: 100%;
        border-radius: 0px;
    }
    .recipeInformation h1 {
        font-size: 32px;
    }
    .recipePreparationTimeContent h4 {
        font-size: 16px;
    }
    .recipeIngredients h4, .recipeInstructions h4, .recipeNutrition h4 {
        font-size: 20px;
    }
}

/* Media Query for small tablets */
@media (min-width: 376px) and (max-width: 768px) {
    .externalContainer {
        width: 100%;
        margin: 0;
        padding: 0;
        border-radius: 0px;
    }
    .internalContainer {
        width: 100%;
        margin: 0;
        padding: 1vh;
        border-radius: 0px;
    }
    .recipeImage {
        height: 30vh;
        border-radius: 0px;
    }
    .recipeInformation h1 {
        font-size: 34px;
    }
    .recipePreparationTimeContent h4 {
        font-size: 18px;
    }
    .recipeIngredients h4, .recipeInstructions h4, .recipeNutrition h4 {
        font-size: 22px;
    }
}

/* Media Query for large tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .externalContainer {
        width: 90%;
    }
    .internalContainer {
        width: 90%;
    }
    .recipeImage {
        height: 30vh;
    }
    .recipeInformation h1 {
        font-size: 36px;
    }
    .recipePreparationTimeContent h4 {
        font-size: 20px;
    }
    .recipeIngredients h4, .recipeInstructions h4, .recipeNutrition h4 {
        font-size: 24px;
    }
}

/* Media Query for desktop screens */
@media (min-width: 1025px) and (max-width: 1439px) {
    .externalContainer {
        width: 80%;
    }
    .internalContainer {
        width: 80%;
    }
    .recipeImage {
        height: 30vh;
    }
    .recipeInformation h1 {
        font-size: 40px;
    }
    .recipePreparationTimeContent h4 {
        font-size: 22px;
    }
    .recipeIngredients h4, .recipeInstructions h4, .recipeNutrition h4 {
        font-size: 26px;
    }
}

/* Media Query for large desktop screens */
@media (min-width: 1440px) {
    .externalContainer {
        width: 60%;
    }
    .internalContainer {
        width: 90%;
    }
    .recipeImage {
        height: 30vh;
    }
    .recipeInformation h1 {
        font-size: 48px;
    }
    .recipePreparationTimeContent h4 {
        font-size: 20px;
    }
    .recipeIngredients h4, .recipeInstructions h4, .recipeNutrition h4 {
        font-size: 28px;
    }
}