* {
    font-family: 'Nunito', sans-serif;
    color: rgba(202,157,126,1);
}

h1 {
    font-family: 'Shrikhand', cursive;
    color:rgb(255, 255, 255);
    font-size: 300%;
}

h2 {
    font-family: 'Shrikhand', cursive;
    color:rgba(123, 78, 47,1);
    margin-bottom: 5%;
    font-size: 250%;
}

/* hide hamburger menu */
.collapsed-nav {
    display: none;
}

hr {
    width: 80%;
    border-top: 2px dotted rgba( 96, 48, 15,1);
  }

.flavor-image {
    width: 120px;
}

.stars {
    width: 60%;
}

#logo {
    width: 5%;
    margin-left: 2%;
}
.header-content {
    background-color:rgba( 56, 26,  5,1);
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    text-align: center;
    justify-content: center;
    align-items: center;
}

body {
    width: 100%; /* 1440px */
    max-width: 69.44444444%; /* 1000px */
    border: 1px solid rgba( 56, 26,  5,1);
    margin: auto;
}

.main-nav {
    display: flex;
    justify-content: space-evenly;
    background-color: rgba( 96, 48, 15,1);
}

a {
    font-size: 93.75%;
    /* 15 / 16 */
    padding: 1%;
    color:rgb(230, 209, 195);
}

.most-popular-flavors {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    margin-top: 10%;
    margin-bottom: 12%;
}

.flavor-cards {
    display: flex;
    width: 98.75%;
    /* 790 / 800 */
    margin: auto;
    font-size: 87.5%;
    /* 14 / 16 */
}

.hazelino, .caramel, .ice, .bianco {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 19.93670886%;
    /* 157.5 / 790 */
    text-align: center;
    padding: 2.53164557%;
    /* 20 / 790 */
}

.button-explore {
    background-color: rgba( 96, 48, 15,1);
    color:rgb(255, 255, 255);
    border: none;
    padding: 2.5% 3%;
    text-align: center;
    display: flex;
    justify-content: center;
    font-size: 87.5%;
    width: 15%;
    /* 120 / 800 */
    margin: auto;
    margin-top: 2%
}

.most-popular-recipes {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    margin-top: 10%;
    margin-bottom: 22%;   
}


.recipe-cards {
    display: flex;
    width: 98.75%;
    /* 790 / 800 */
    margin: auto;
}

figure {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.recipe-image {
    max-width: 80%;
    height: auto;
    margin-bottom: 15%;
    /* to give space between image + caption */
    margin-left: auto;
    margin-right: auto;
}

.cortado, .brown, .espresso, .affogato {
    display: flex;
    flex-direction: column;
    width: 25%;
    /* 197.5 / 790 */
    text-align: center;
    font-size: 100%;
}

.button {
    background-color: rgba( 96, 48, 15,1);
    color:rgb(255, 255, 255);
    border: none;
    padding: 7% 23%;
    display: flex;
    font-size: 87.5%;
    /* 14 / 16 */
    text-align: center;
    width: 20%;
    margin: auto;
    justify-content: center;
    margin-top: 5%;
    align-items: center;
}

.button-explore:hover, .button:hover {
    background-color:rgba(145,110, 85,1);
    color: rgb(255, 255, 255);
    cursor: pointer;
}

a:hover {
    color:rgb(255, 255, 255);
}

footer {
    background-color:rgba( 56, 26,  5,1);
    text-align: center;
    font-size: 85%;
    padding: 3%;
    margin: auto;
}


@media screen and (max-width: 768px) {
    /* adjusting header */
    .header-content {
        font-size: 80%;
    }

    #logo {
        width: 7%;
    }

    /* adjusting font size */
    h2 {
        font-size: 200%;
    }
    /* adjusting content */

    .stars {
        width: 60%;
    }

    .most-popular-flavors, .flavor-cards {
        max-width: 768px;
        flex-wrap: wrap;
    }

    .hazelino, .caramel, .ice, .bianco {
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 39.87341772%;
        /* 315 / 790 */
        text-align: center;
        padding: 2.53164557%;
        /* 20 / 790 */  
    }

    .button-explore {
        width: 25%;
    }

    .most-popular-recipes, .recipe-cards {
        /* max-width: 768px; */
        width: 100%;
        flex-wrap: wrap;
    }
    
    figure {
        width: 100%;
    }

    .cortado, .brown, .espresso, .affogato {
        display: flex;
        flex-direction: column;
        width: 48.7%; 
        /* 250 / 513.11 */
        text-align: center;
        font-size: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 5%;
    }

    .recipe-image {
        margin-bottom: 6%;
    }

    .button {
        padding: 3% 25%;
        display: flex;
        font-size: 80.5%;
        text-align: center;
        width: 10%;
        margin-top: 2%;
    }
}

@media screen and (max-width: 576px) {
    /* adjusting the nav to hamburger menu */
    .main-nav {
        display: none;
    }
    
    .collapsed-nav {
        visibility: visible;
        display: flex;
        flex-direction: row-reverse;
        background-color: rgba( 96, 48, 15,1);
    }

    #menu {
        width: 7%;
    }

    /* adjusting header */
    .header-content {
        font-size: 60%;
    }

    #logo {
        width: 7%;
    }

    /* adjusting font size */
    h2 {
        font-size: 150%;
    }

    /* adjusting content */

    .stars {
        width: 30%;
    }
    
    .most-popular-flavors, .flavor-cards {
        flex-wrap: wrap;
        margin-top: 1%; 
        /* bring content closer to the top to reduce scrolling */
    }
    
    .flavor-image {
        width: 30%;
    }

    .hazelino, .caramel, .ice, .bianco {
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        text-align: center;
        padding: 2.53164557%;
        /* 20 / 790 */  
        margin-bottom: 5%;
    }

    .button-explore {
        width: 25%;
    }

    .most-popular-recipes, .recipe-cards {
        width: 100%;
        margin-top: 3%;
        
        flex-wrap: wrap;
    }
    figure {
        width: 100%;
    }

    .cortado, .brown, .espresso, .affogato {
        display: flex;
        flex-direction: column;
        width: 100%; 
        /* 250 / 513.11 */
        text-align: center;
        font-size: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 15%;
    }

    .recipe-image {
        margin-bottom: 6%;
    }

    .button {
        padding: 3% 25%;
        display: flex;
        font-size: 80.5%;
        text-align: center;
        width: 7%;
        margin-top: 2%;
    }

}