/* Header section for recipes page */
.recipe-bg-color {
    background-image: linear-gradient(to bottom left, #001b44, #1d70ec);
    width: 100%;
    height: 100%;
}

.recipe-home-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 3em;
    margin-right: 3em;
    padding-top: 3%;
    padding-bottom: 5%;
    color: #F4FF5C;
}

.recipe-home-section h1 {
    font-size: 7rem;
    font-weight: 900;
    display: flex;
    justify-content: right;
    align-items: right;
    text-align: right;
    width: 60%;
    margin-bottom: 15%;
    padding-left: 20%;
}

.recipe-home-section p {
    font-size: 1.5rem;
    display: flex;
    justify-content: right;
    align-items: center;
    width: 30%;
    padding-left: 50%;
}

.recipe-home-section img {
    display: flex;
    position: absolute;
    left: 10%;
    top: 5%;
    width: 45%;
}

/* Recipes section */

.ingredients-lists {
    display: none;
}


/* Adobo */
.recipes-adobo {
    background-color: #E33535;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10%;
    color: white;
    padding: 4em;
    position: relative;
}

.recipes-adobo img {
    width: 27%;
    cursor: pointer;
}

.recipes-adobo div h5 {
    font-size: 3.5rem;
    font-weight: 800;
    margin: 0;
}

.recipes-adobo div h6 {
    font-size: 1.5rem;
    margin: 1em 0em;
}

.recipes-adobo ol {
    padding-left: 1em;
}

.recipes-adobo .ingredients-lists {
    position: absolute;
    background-color: #E3BA05;
    color: #001b44;
    padding: 1em;
    border-radius: 0.8em;
    left: 40em;
    top: 15em;
}

.recipes-adobo .ingredients-lists p {
    font-weight: bold;
}

.recipes-adobo .ingredients-lists ul {
    list-style-type: none;
    padding-left: 0;
}

/* Sinigang */
.recipes-sinigang {
    background-color: #BDA127;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10%;
    color: white;
    padding: 4em;
    position: relative;
}

.recipes-sinigang img {
    width: 27%;
    cursor: pointer;
}

.recipes-sinigang div h5 {
    font-size: 3.5rem;
    font-weight: 800;
    margin: 0;
}

.recipes-sinigang div h6 {
    font-size: 1.5rem;
    margin: 1em 0em;
}

.recipes-sinigang ol {
    padding-left: 1em;
}

.recipes-sinigang .ingredients-lists {
    position: absolute;
    background-color: #A51E2D;
    color: white;
    padding: 1em;
    border-radius: 0.8em;
    right: 40em;
    top: 15em;
}

.recipes-sinigang .ingredients-lists p {
    font-weight: bold;
}

.recipes-sinigang .ingredients-lists ul {
    list-style-type: none;
    padding-left: 0;
}

/* Dinakdakan */
.recipes-dinakdakan {
    background-color: #0B326C;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10%;
    color: white;
    padding: 4em 4em 6em 4em;
    position: relative;
}

.recipes-dinakdakan img {
    width: 27%;
    cursor: pointer;
}

.recipes-dinakdakan div h5 {
    font-size: 3.5rem;
    font-weight: 800;
    margin: 0;
}

.recipes-dinakdakan div h6 {
    font-size: 1.5rem;
    margin: 1em 0em;
}

.recipes-dinakdakan ol {
    padding-left: 1em;
}

.recipes-dinakdakan .ingredients-lists {
    position: absolute;
    background-color: #BDA127;
    color: white;
    padding: 1em;
    border-radius: 0.8em;
    left: 40em;
    top: 15em;
}

.recipes-dinakdakan .ingredients-lists p {
    font-weight: bold;
}

.recipes-dinakdakan .ingredients-lists ul {
    list-style-type: none;
    padding-left: 0;
}

/* Lechon */
.recipes-lechon {
    background-color: #A51E2D;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10%;
    color: white;
    padding: 4em;
    position: relative;
}

.recipes-lechon img {
    width: 27%;
    cursor: pointer;
}

.recipes-lechon div h5 {
    font-size: 3.5rem;
    font-weight: 800;
    margin: 0;
}

.recipes-lechon div h6 {
    font-size: 1.5rem;
    margin: 1em 0em;
}

.recipes-lechon .ingredients-lists {
    position: absolute;
    background-color: #BDA127;
    color: white;
    padding: 1em;
    border-radius: 0.8em;
    right: 40em;
    top: 15em;
}

.recipes-lechon ol {
    padding-left: 1em;
}

.recipes-lechon .ingredients-lists p {
    font-weight: bold;
}

.recipes-lechon .ingredients-lists ul {
    list-style-type: none;
    padding-left: 0;
}


/* Sisig */
.recipes-sisig {
    background-color: #BDA127;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10%;
    color: white;
    padding: 4em 4em 6em 4em;
    position: relative;
}

.recipes-sisig img {
    width: 27%;
    cursor: pointer;
}

.recipes-sisig .sisig-container {
    width: 35%;
}

.recipes-sisig div h5 {
    font-size: 3.5rem;
    font-weight: 800;
    margin: 0;
}

.recipes-sisig div h6 {
    font-size: 1.5rem;
    margin: 1em 0em;
}

.recipes-sisig ol {
    padding-left: 1em;
}

.recipes-sisig .ingredients-lists {
    position: absolute;
    background-color: #A51E2D;
    color: white;
    padding: 1em;
    border-radius: 0.8em;
    left: 40em;
    top: 15em;
}

.recipes-sisig .ingredients-lists p {
    font-weight: bold;
}

.recipes-sisig .ingredients-lists ul {
    list-style-type: none;
    padding-left: 0;
}

/* Laing */
.recipes-laing {
    background-color: #0B326C;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8%;
    color: white;
    padding: 4em;
    position: relative;
}

.recipes-laing img {
    width: 27%;
    cursor: pointer;
}

.recipes-laing div h5 {
    font-size: 3.5rem;
    font-weight: 800;
    margin: 0;
}

.recipes-laing div h6 {
    font-size: 1.5rem;
    margin: 1em 0em;
}

.recipes-laing ol {
    padding-left: 1em;
}

.recipes-laing .ingredients-lists {
    position: absolute;
    background-color: #BDA127;
    color: white;
    padding: 1em;
    border-radius: 0.8em;
    right: 40em;
    top: 15em;
}

.recipes-laing .ingredients-lists p {
    font-weight: bold;
}

.recipes-laing .ingredients-lists ul {
    list-style-type: none;
    padding-left: 0;
}


@media only screen and (max-width: 1600px) {
    .recipe-home-section {
        margin-left: 5em;
        margin-right: 5em;
        padding-top: 3%;
        padding-bottom: 7%;
    }

    .recipe-home-section h1 {
        font-size: 5rem;
        padding-left: 35%;
        width: 70%;
        margin-bottom: 10%;
    }

    .recipe-home-section p {
        font-size: 1.3rem;
        width: 35%;
        padding-left: 60%;
    }

    .recipe-home-section img {
        left: 8%;
        top: 8%;
        width: 42%;
    }

    /* Recipes section */

    /* Adobo */
    .recipes-adobo .ingredients-lists {
        left: 30em;
        top: 12em;
    }

    /* Sinigang */
    .recipes-sinigang .ingredients-lists {
        right: 28em;
        top: 12em;
    }

    /* Dinakdakan */
    .recipes-dinakdakan .ingredients-lists {
        left: 30em;
        top: 10em;
    }

    /* Lechon */
    .recipes-lechon .ingredients-lists {
        right: 25em;
        top: 15em;
    }

    /* Sisig */
    .recipes-sisig .ingredients-lists {
        left: 30em;
        top: 15em;
    }

    /* Laing */
    .recipes-laing .ingredients-lists {
        padding: 1em;
        border-radius: 0.8em;
        right: 30em;
        top: 13em;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1200px) {
    /* Header section for recipes page */
    .recipe-home-section {
        margin-left: 5em;
        margin-right: 5em;
        padding-top: 5%;
        padding-bottom: 5%;
    }

    .recipe-home-section h1 {
        font-size: 3.5rem;
        width: 55%;
        padding-left: 38%;
    }

    .recipe-home-section p {
        font-size: 1.1rem;
        width: 35%;
        padding-left: 60%;
    }

    .recipe-home-section img {
        width: 40%;
    }

    /* Recipes section */

    /* Adobo */
    .recipes-adobo {
        gap: 5%;
    }

    .recipes-adobo img {
        width: 34%;
    }

    .recipes-adobo div h5 {
        font-size: 2.2rem;
    }

    .recipes-adobo div h6 {
        font-size: 1.2rem;
    }

    .recipes-adobo .ingredients-lists {
        left: 18em;
        top: 9em;
        opacity: 86%;
    }

    .recipes-adobo .ingredients-lists p {
        font-size: 1rem;
    }

    .ingredients-lists ul li {
        font-size: 0.8rem;
    }

    /* Sinigang */
    .recipes-sinigang {
        gap: 5%;
    }

    .recipes-sinigang img {
        width: 33%;
    }

    .recipes-sinigang div h5 {
        font-size: 2.2rem;
    }

    .recipes-sinigang div h6 {
        font-size: 1.2rem;
        margin: 1em 0em;
    }

    .recipes-sinigang ol {
        padding-left: 1em;
    }

    .recipes-sinigang .ingredients-lists {
        right: 15em;
        top: 6em;
        opacity: 86%;
    }

    .recipes-sinigang .ingredients-lists p {
        font-size: 1rem;
    }

    .ingredients-lists ul li {
        font-size: 0.8rem;
    }

    /* Dinakdakan */
    .recipes-dinakdakan {
        gap: 5%;
    }

    .recipes-dinakdakan img {
        width: 33%;
    }

    .recipes-dinakdakan div h5 {
        font-size: 2.2rem;
    }

    .recipes-dinakdakan div h6 {
        font-size: 1.2rem;
    }

    .recipes-dinakdakan .ingredients-lists {
        left: 18em;
        top: 4em;
        opacity: 86%;
    }

    .recipes-dinakdakan .ingredients-lists p {
        font-size: 1rem;
    }

    .ingredients-lists ul li {
        font-size: 0.8rem;
    }

    /* Lechon */
    .recipes-lechon {
        gap: 5%;
    }

    .recipes-lechon img {
        width: 33%;
    }

    .recipes-lechon div h5 {
        font-size: 2.2rem;
    }

    .recipes-lechon div h6 {
        font-size: 1.5rem;
        margin: 1em 0em;
    }

    .recipes-lechon .ingredients-lists {
        right: 15em;
        top: 10em;
    }

    /* Sisig */
    .recipes-sisig {
        gap: 5%;
    }

    .recipes-sisig img {
        width: 34%;
    }

    .recipes-sisig .sisig-container {
        width: 53%;
    }

    .recipes-sisig div h5 {
        font-size: 2.2rem;
    }

    .recipes-sisig div h6 {
        font-size: 1.2rem;
    }

    .recipes-sisig .ingredients-lists {
        left: 18em;
        top: 12em;
        opacity: 86%;
    }

    /* Laing */
    .recipes-laing {
        gap: 5%;
    }

    .recipes-laing img {
        width: 35%;
    }

    .recipes-laing div h5 {
        font-size: 2.2rem;
    }

    .recipes-laing div h6 {
        font-size: 1.2rem;
        margin: 1em 0em;
    }

    .recipes-laing ol {
        padding-left: 1em;
    }

    .recipes-laing .ingredients-lists {
        right: 18em;
        top: 6em;
        opacity: 86%;
    }

    .recipes-laing .ingredients-lists p {
        font-size: 1rem;
    }

    .ingredients-lists ul li {
        font-size: 0.8rem;
    }

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 992px) {
    /* Header section for recipes page */
    .recipe-home-section h1 {
        font-size: 3rem;
        width: 60%;
        padding-left: 25%;
    }

    .recipe-home-section p {
        font-size: 1.1rem;
        width: 40%;
        padding-left: 45%;
    }

    .recipe-home-section img {
        width: 40%;
        left: 12%;
        top: 8%;
    }

    /* Recipes section */
    /* Same with the style in 1200px screen size */
}


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {
    /* Header section for recipes page */
    .recipe-home-section {
        margin-left: 5em;
        margin-right: 5em;
        padding-top: 8%;
        padding-bottom: 5%;
        gap: 4em;
    }

    .recipe-home-section h1 {
        font-size: 3.5rem;
        width: 54%;
        padding-left: 40%;
    }

    .recipe-home-section p {
        font-size: 0.9rem;
        width: 45%;
        padding-left: 48%;
    }

    .recipe-home-section img {
        width: 50%;
        left: 7%;
        top: 20%;
    }


    /* Recipes section */
    /* Adobo */
    .recipes-adobo {
        gap: 5%;
        flex-direction: column;
        padding: 3em 3em 2em 3em;
    }

    .recipes-adobo img {
        width: 40%;
    }

    .recipes-adobo div h5 {
        font-size: 1.8rem;
    }

    .recipes-adobo div h6 {
        font-size: 1.1rem;
    }

    .recipes-adobo .ingredients-lists {
        left: 26em;
        top: 9em;
        opacity: 86%;
    }

    .recipes-adobo .ingredients-lists p {
        font-size: 1rem;
    }

    .ingredients-lists ul li {
        font-size: 0.8rem;
    }

    /* Sinigang */
    .recipes-sinigang {
        gap: 5%;
        flex-direction: column-reverse;
        padding: 3em 3em 2em 3em;
    }

    .recipes-sinigang img {
        width: 40%;
    }

    .recipes-sinigang div h5 {
        font-size: 1.8rem;    
    }

    .recipes-sinigang div h6 {
        font-size: 1.1rem;
    }

    .recipes-sinigang ol {
        padding-left: 1em;
    }

    .recipes-sinigang .ingredients-lists {
        right: 6em;
        top: 10em;
        opacity: 86%;
    }

    .recipes-sinigang .ingredients-lists p {
        font-size: 1rem;
    }

    .ingredients-lists ul li {
        font-size: 0.8rem;
    }

    /* Dinakdakan */
    .recipes-dinakdakan {
        gap: 5%;
        flex-direction: column;
        padding: 3em 3em 2em 3em;
    }

    .recipes-dinakdakan img {
        width: 40%;
    }

    .recipes-dinakdakan div h5 {
        font-size: 1.8rem;
    }

    .recipes-dinakdakan div h6 {
        font-size: 1.1rem;
    }

    .recipes-dinakdakan .ingredients-lists {
        left: 25em;
        top: 10em;
        opacity: 86%;
    }

    .recipes-dinakdakan .ingredients-lists p {
        font-size: 1rem;
    }

    .ingredients-lists ul li {
        font-size: 0.8rem;
    }

    /* Lechon */
    .recipes-lechon {
        gap: 5%;
        flex-direction: column-reverse;
        padding: 3em 3em 2em 3em;
    }

    .recipes-lechon img {
        width: 40%;
    }

    .recipes-lechon div h5 {
        font-size: 1.8rem;
    }

    .recipes-lechon div h6 {
        font-size: 1.1rem;
    }

    .recipes-lechon .ingredients-lists {
        right: 10em;
        top: 11em;
    }

    /* Sisig */
    .recipes-sisig {
        gap: 5%;
        flex-direction: column;
        padding: 3em 3em 2em 3em;
    }

    .recipes-sisig img {
        width: 41%;
    }

    .recipes-sisig .sisig-container {
        width: fit-content;
    }

    .recipes-sisig div h5 {
        font-size: 1.8rem;
    }

    .recipes-sisig div h6 {
        font-size: 1.1rem;
    }

    .recipes-sisig .ingredients-lists {
        left: 25em;
        top: 12em;
        opacity: 86%;
    }

    /* Laing */
    .recipes-laing {
        gap: 5%;
        flex-direction: column-reverse;
        padding: 3em 3em 2em 3em;
    }

    .recipes-laing img {
        width: 45%;
    }

    .recipes-laing div h5 {
        font-size: 1.8rem;
    }

    .recipes-laing div h6 {
        font-size: 1.1rem;
    }

    .recipes-laing ol {
        padding-left: 1em;
    }

    .recipes-laing .ingredients-lists {
        right: 10em;
        top: 10em;
        opacity: 86%;
    }

    .recipes-laing .ingredients-lists p {
        font-size: 1rem;
    }

    .ingredients-lists ul li {
        font-size: 0.8rem;
    }

}

/* NEEDS TO BE FIXED */
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 600px) {
    /* Header section for recipes page */
    .recipe-home-section {
        margin-left: 4em;
        margin-right: 4em;
        padding-top: 8%;
        padding-bottom: 5%;
        gap: 5em;
    }

    .recipe-home-section h1 {
        font-size: 3.2rem;
        width: 70%;
        padding-left: 40%;
    }

    .recipe-home-section p {
        font-size: 0.9rem;
        width: 60%;
        padding-left: 48%;
    }

    .recipe-home-section img {
        width: 52%;
        top: 20%;
    }

    /* Recipes section */
    /* Adobo */
    .recipes-adobo .ingredients-lists {
        position: absolute;
        left: 11em;
        top: 10em;
    }

    /* Sinigang */
    .recipes-sinigang .ingredients-lists {
        left: 10em;
        right: 11em;
        top: 10em;
    }

    /* Dinakdakan */
    .recipes-dinakdakan .ingredients-lists {
        position: absolute;
        left: 11.5em;
        top: 10em;
    }

    /* Lechon */
    .recipes-lechon .ingredients-lists {
        left: 12.5em;
        right: 12.5em;
        top: 10em;
    }

    /* Sisig */
    .recipes-sisig .ingredients-lists {
        position: absolute;
        left: 12.5em;
        top: 10em;
    }

    /* Laing */
    .recipes-laing .ingredients-lists {
        position: absolute;
        left: 13em;
        right: 13em;
        top: 10em;
    }
}

/* Smaller devices (Medium phones, 450px and below) */
@media only screen and (max-width: 450px) {
        /* Header section for recipes page */
    .recipe-home-section {
        margin-left: 2em;
        margin-right: 2em;
        padding-top: 8%;
        padding-bottom: 5%;
        gap: 16em;
    }

    .recipe-home-section h1 {
        font-size: 3rem;
        width: 100%;
        padding-left: 0%;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .recipe-home-section p {
        font-size: 0.9rem;
        width: 80%;
        padding-left: 0;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .recipe-home-section img {
        width: 80%;
        top: 28%;
        left: 10%;
    }

    /* Recipes section */
    /* Adobo */
    .recipes-adobo img {
        width: 54%;
    }

    .recipes-adobo .ingredients-lists {
        position: absolute;
        left: 6.5em;
        top: 10em;
    }

    /* Sinigang */
    .recipes-sinigang img {
        width: 54%;
    }

    /* Dinakdakan */
    .recipes-dinakdakan img {
        width: 54%;
    }

    .recipes-dinakdakan .ingredients-lists {
        position: absolute;
        left: 6.5em;
        top: 10em;
    }

    /* Lechon */
    .recipes-lechon img {
        width: 54%;
    }

    .recipes-lechon .ingredients-lists {
        left: 8em;
        right: 7.5em;
        top: 10em;
    }

    /* Sisig */
    .recipes-sisig img {
        width: 55%;
    }

    .recipes-sisig .ingredients-lists {
        position: absolute;
        left: 8em;
        top: 10em;
    }

    /* Laing */
    .recipes-laing img {
        width: 57%;
    }

    .recipes-laing .ingredients-lists {
        position: absolute;
        left: 8em;
        right: 8em;
        top: 10em;
    }
}

/* Smaller devices (Small phones, 350px and below) */
@media only screen and (max-width: 350px) {
    /* Header section for recipes page */
    .recipe-home-section {
        padding-top: 14%;
        gap: 12em;
    }

    .recipe-home-section h1 {
        font-size: 2.5rem;
    }

    .recipe-home-section img {
        width: 80%;
        top: 25%;
    }

    /* Recipes section */
    /* Adobo */
    .recipes-adobo {
        padding: 1.5em 1.5em 1em 1.5em;
    }

    .recipes-adobo img {
        width: 59%;
    }

    .recipes-adobo .ingredients-lists {
        left: 3em;
        top: 7em;
    }

    /* Sinigang */
    .recipes-sinigang {
        padding: 1.5em 1.5em 1em 1.5em;
    } 

    .recipes-sinigang img {
        width: 59%;
    }

    .recipes-sinigang .ingredients-lists {
        left: 4em;
        right: 4em;
        top: 7em;
    }

    /* Dinakdakan */
    .recipes-dinakdakan {
        padding: 1.5em 1.5em 1em 1.5em;
    } 

    .recipes-dinakdakan img {
        width: 59%;
    }

    .recipes-dinakdakan .ingredients-lists {
        left: 4em;
        right: 4em;
        top: 7em;
    }

    /* Lechon */
    .recipes-lechon {
        padding: 1.5em 1.5em 1em 1.5em;
    } 

    .recipes-lechon img {
        width: 59%;
    }

    .recipes-lechon .ingredients-lists {
        left: 4em;
        right: 4em;
        top: 7em;
    }

    /* Sisig */
    .recipes-sisig {
        padding: 1.5em 1.5em 1em 1.5em;
    } 

    .recipes-sisig img {
        width: 59%;
    }

    .recipes-sisig .ingredients-lists {
        left: 5em;
        right: 4em;
        top: 7em;
    }

    /* Laing */
    .recipes-laing {
        padding: 1.5em 1.5em 1em 1.5em;
    } 

    .recipes-laing img {
        width: 63%;
    }

    .recipes-laing .ingredients-lists {
        left: 4em;
        right: 4em;
        top: 7em;
    }

}