@import url('https://fonts.googleapis.com/css2?family=Happy+Monkey&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fugaz+One&family=Merienda:wght@300..900&family=Poetsen+One&display=swap');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*THE MAIN PAGE GENERAL LAYOUT*/
/*Navigation bar in at the top APPLIED THE SAME TO ALL PAGES*/
.nav-barsmall{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    font-family: "Happy Monkey";
    h3{
        font-family: "Fugaz One", sans-serif;
    }

    .small-links{
        display: flex;
        gap: 30px;
    }

    li{
        list-style: none;
        
    }

    a{
        color: black;
        text-decoration: none;

    }
}

/*2nd Navigation bar at the top */
.nav-barbig{
    display: flex;
    justify-content: space-around;
    padding-block: 10px;
    border-top: 2px solid black;
    font-family: "Happy Monkey";
    border-bottom: 2px solid black;

    li{
        list-style: none;
    }
    a{
        color: black;
        text-decoration: none;
    }
   
}

/*Grid formating plus the overlay of the text*/
.grid{
    margin-inline: 10%;
    margin-block: 20px;
    display: grid;
    font-family: "Happy Monkey";
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    img{
        width: 100%;
        height: 100%;
    }
}

.grid-item{
    position: relative;
}

.overlay{
    background-color: rgba(0, 0, 0, 0.549);
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: rgb(252, 231, 231);
    padding: 2vh;
}
/*Footer with all the nav-bar and everything APPLIED THE SAME TO ALL PAGES*/
footer{
    background-color: black;
}


.foot-navbar{
    padding: 10px;
}
.foot-link{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Happy Monkey";

    gap: 30px;

    li{
        list-style: none;
    }

    a{
        text-decoration: none;
        color: white;
    }

    p{
        color: white;
    }
}

.socials-link{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-block: 20px;
    li{
        list-style: none;
    }
}

.copyright{
    color: white;
    text-align: center;
    font-family: "Happy Monkey";

}

/*Adding the break points for tablet and mobile*/
@media (width <= 768px){
    .grid{
        grid-template-columns: repeat(2, 1fr);
    }
    }



@media screen and (width <= 480px){
    .grid{
        grid-template-columns: 1fr;
    }
    
}

/*RECIPE OF THE MONTH (rom) GENERAL LAYOUT*/

/*ROM general page*/
.container-rom{
    padding-inline: 20px;
    padding-top: 20px;
}
/*ROM Nav bar*/
.nav-bar-rom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Happy Monkey";

    padding-block: 5px;
    border-bottom: 2px solid black;
     
    h3{
        font-family: "Fugaz One", sans-serif;

    }

    li{
        list-style: none;
        
    }

    a{
        color: black;
        text-decoration: none;

    }
    ul{
        display: flex;
        gap: 30px;
    }
}

#titletextrom{
    font-family: "Happy Monkey";

}

/*ROM Hero section*/

.hero-rom{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-block: 10px;
    font-family: "Happy Monkey";


    text-align: center;
    img{
        width: 100%;
        height: 100%;
    }
    h3{
        grid-column: 1/3;
        border-bottom: 2px solid black;
    }
}

/*ROM main part*/

.explain-rom{
    text-align: center;
    font-family: "Happy Monkey";

    padding-bottom: 10px;
    margin-inline: 15%;
    border-bottom: 1px solid black;
}

.ingredient-rom{
    margin-inline: 15%;
    font-family: "Happy Monkey";

    h4{
        padding:10px 0px 5px 0px;
    }
}

.directions-rom{
    padding-top: 20px;
    font-family: "Happy Monkey";

    margin-inline: 15%;
    padding-bottom: 20px;
    h4{
        text-align: center;
        padding: 15px 0px 5px 0px;
    }
}

/*ABOUT PAGE (ap) GENERAL LAYOUT (FONTS AT THE END)*/

.aboutme-ap{
    display: flex;
    align-content: center;
    justify-content: flex-start;
    padding: 20px;
    font-family: "Happy Monkey";
    gap: 30px;
    border-bottom: 2px solid black;
    border-top: 2px solid black;
    img{
        max-width: 350px;
        max-height: 450px
    };
    p{
        max-width: 800px;
    }
}

.aboutme-colap p{
    padding: 5px 0px 20px 0px;
    
}

.aboutpage-ap{
    display: flex;
    align-content: center;
    justify-content: flex-end;
    font-family: "Happy Monkey";

    padding: 20px;
    gap: 30px;
    border-bottom: 2px solid black;
    border-top: 2px solid black;

    
}

.aboutpageimg-ap{
    max-width: 400px;
}


.aboutpageimg-ap img{
    width: 100%;
}

.aboutpagetext-ap{
    max-width: 800px;
    p{
        padding: 5px 0px 20px 0px;
    }
}

.navigationtitle{
    margin-inline: 18%;
    padding-top: 20px;
    font-family: "Happy Monkey";
    text-align: center;
    max-width: 800px;
}
.navigationexp-ap{
    display: flex;
    padding-block: 20px;
    font-family: "Happy Monkey";
    gap: 30px;
    margin-inline: 18%;
    max-width: 800px;

}