/* Add text columns */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    background-image: linear-gradient(rgb(109, 196, 255), rgb(0, 102, 255));
}

body {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 100%;
    color: white;
}


#all_main_content {
    display: flex;
    justify-content: center;
}

/* Header Styles */

header {
    display: flex;
    align-items: center;
    flex-direction: column;
    border-bottom: 3px solid blue;
}

header h2 {
    color: white;
    font-weight: bold;
    text-align: center;
}

header img {
    max-width: 200px;
    padding: 1vh;
}

header h2 {
    font-size: 200%;
    padding-bottom: 2vh;
}

/* Nav Bar Styles */
nav ul {
    display: flex;
    list-style-type: none;
    justify-content: center;
    border-bottom: 3px solid blue;
    background-color: rgb(0, 110, 255);
}

nav ul li a {
    padding: 2vh 6vh;
    display: block;
    text-decoration: none;
    text-align: center;
    color: white;
    transition: all 300ms;
}

nav ul li a:hover {
    background-color: darkblue;
    cursor: pointer;
}

#current {
    color: blue;
    font-weight: bold;
}

#current:hover {
    color: white;
}

#show_nav_menu_button {
    display: none;
}


/* Text and Images */

main h2 {
    padding: 3vh;
    text-align: center;
}

main #nutrition {
    padding: 0 3vh;
    color: rgb(0, 51, 255);
}

#nutrition_info {
    display: flex;
    padding-bottom: 5vh;
    border-bottom: 3px solid blue;
}

#nutrition_info #nutrition_text {
    width: 70%;
    text-align: left;
    padding: 0 3vh;
}

#nutrition_info img {
    width: 30%;
    padding-right: 3vh;
}

main #calories {
    padding: 5vh 3vh 0 0;
    text-align: right;
    color: rgb(0, 51, 255);
}

#calories_info {
    display: flex;
    flex-direction: row-reverse;
    padding-bottom: 5vh;
    border-bottom: 3px solid blue;
}

#calories_info #calories_text {
    width: 70%;
    text-align: right;
    padding: 0 3vh;
}

#calories_info img {
    width: 30%;
    padding-left: 3vh;
}

main #micronutrients {
    padding: 5vh 0 0 3vh;
    color: rgb(0, 51, 255);
}

#micronutrients_info {
    display: flex;
    padding-bottom: 5vh;
    border-bottom: 3px solid blue;
}

#micronutrients_info #micronutrients_text {
    width: 70%;
    text-align: left;
    padding: 0 3vh;
}

#micronutrients_info img {
    width: 30%;
    padding-right: 3vh;
}

/* Footer Styles */

footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2vh;
}

@media screen and (min-width: 280px) and (max-width: 767px) {
    html {
        overflow-x: hidden;
    }

    #show_nav_menu_button {
        z-index: 999;
        width: 25px;
        aspect-ratio: 1;
        background-color: transparent;
        position: absolute;
        border: none;
        background-image: url('../images/hamburger.png');
        background-position: center;
        background-size: cover;
        top: 2.5vh;
        right: 3vh;
    }

    main {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #navigation_menu ul {
        flex-direction: column;
        margin-top: 30vh;
        border-bottom: none;
        background-color: transparent;
    }

    #current {
        color: rgb(0, 221, 255);
    }

    #navigation_menu {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        width: 65vw;
        height: 100vh;
        background-color: rgba(0, 0, 255, 0.8);
        transform: translateX(100%);
        transition: all 300ms;
    }

    #navigation_menu[data-visible='true'] {
        transform: translateX(0%);
    }

    #show_nav_menu_button[data-visible='true']{
        background-image: url(../images/x-icon.png);
    }

    #show_nav_menu_button {
        display: block;
    }

    #nutrition_info, #calories_info, #micronutrients_info {
        flex-direction: column;
        align-items: center;
    }

    #nutrition_info #nutrition_text, #calories_info #calories_text, #micronutrients_info #micronutrients_text {
        text-align: center;
    }

    main #nutrition {
        text-align: center;
    }

    main #calories, main #micronutrients {
        padding: 5vh 0 0 0;
        text-align: center;
    }

    #nutrition_info img, #calories_info img, #micronutrients_info img {
        width: 100%;
        padding: 3vh 3vh 0 3vh;
    }
    
}