.get-cooking-activity {
    --theme-bg-light: #c0d5ee;

    & header {
        background-color: var(--blue-light);
        color: var(--blue-dark);

        & .activity-title {
            text-shadow:
                0 0 0 var(--blue-dark),
                -3px 2px 0 var(--blue-dark);
        }

        & .module-banner-group {
            box-shadow: 4px 0 4px rgba(0, 0, 20, 0.375);
        }

        & .module-icon {
            & img {
                filter: drop-shadow(2px 2px 1px rgba(0, 0, 20, 0.375));
            }
        }

        & .activity-icon {
            transform: rotate(-5deg);
            & img {
                filter: drop-shadow(2px 2px 1px rgba(0, 0, 20, 0.375));
            }
        }
    }

    & .tab-bar {
        border-color: var(--blue);
    }
}
.food-detectives-activity {
    --theme-bg-light: #cceabc;
    header {
        background-color: var(--green);
        color: var(--green-dark);

        & .activity-title {
            text-shadow:
                0 0 0 var(--green-dark),
                -3px 2px 0 var(--green-dark);
        }
        & .module-banner-group {
            box-shadow: 4px 0 4px rgba(0, 30, 30, 0.375);
        }

        & .module-icon {
            & img {
                filter: drop-shadow(2px 2px 1px rgba(0, 30, 30, 0.5));
            }
        }

        & .activity-icon {
            transform: rotate(-5deg);
            & img {
                filter: drop-shadow(2px 2px 1px rgba(0, 30, 30, 0.5));
            }
        }
    }
    & .tab-bar {
        border-color: var(--green);
    }
}
.taste-testers-activity {
    --theme-bg-light: #ffd5c5;
    header {
        background-color: var(--red-light);
        color: var(--red-dark);

        & .activity-title {
            text-shadow:
                0 0 0 var(--red-dark),
                -3px 2px 0 var(--red-dark);
        }
        & .module-banner-group {
            box-shadow: 4px 0px 1px rgba(30, 0, 0, 0.375);
            background-color: rgba(255, 255, 255, 1);
        }

        & .module-icon {
            & img {
                filter: drop-shadow(2px 2px 0px rgba(50, 0, 0, 0.5));
            }
        }

        & .activity-icon {
            left: -25px;
            transform: rotate(-5deg);
            & img {
                filter: drop-shadow(2px 2px 2px rgba(50, 0, 0, 0.5));
            }
        }
    }

    & .tab-bar {
        border-color: var(--red);
    }
}
article {
    position: relative;
}

.activity-menu,
.food-menu {
    display: flex;
    flex-direction: column;
    margin: auto;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 320px;
    padding: 0;
    padding-bottom: 40px;
    & .nav-item {
        margin: 1rem auto;
        width: 100%;
        display: flex;
        justify-content: stretch;
        & a.btn.nav-link {
            display: flex;
            flex-grow: 1;
            font-weight: normal;
            font-size: 1.2rem;

            box-shadow: 0 0 5px rgba(0, 0, 20, 0.2);
            color: var(--gray-dark);
            border-color: transparent;
        }
    }
}

.food-menu {
    & .nav-item {
        margin: 0.375rem auto;
        & a.btn.nav-link {
            background-color: white;
            padding-top: calc(1 * var(--gutter-y));
            padding-bottom: calc(1 * var(--gutter-y));
        }
    }
}

.btn-bell-pepper:before {
    background-image: url(../images/nutrition-images/bell-pepper-icon.png);
    background-size: 100%;
}
.btn-melon:before {
    background-image: url(../images/nutrition-images/melon-icon.png);
    background-size: 100%;
}
.btn-broccoli:before {
    background-image: url(../images/nutrition-images/broccoli-icon.png);
    background-size: 100%;
}
.btn-pear:before {
    background-image: url(../images/nutrition-images/pear-icon.png);
    background-size: 100%;
}
.btn-tomato:before {
    background-image: url(../images/nutrition-images/tomato-icon.png);
    background-size: 100%;
}
.btn-pineapple:before {
    background-image: url(../images/nutrition-images/pineapple-icon.png);
    background-size: 100%;
}
.btn-spinach:before {
    background-image: url(../images/nutrition-images/spinach-icon.png);
    background-size: 100%;
}
.btn-apple:before {
    background-image: url(../images/nutrition-images/apple-icon.png);
    background-size: 100%;
}
.btn-squash:before {
    background-image: url(../images/nutrition-images/squash-icon.png);
    background-size: 100%;
}
.btn-peach:before {
    background-image: url(../images/nutrition-images/peach-icon.png);
    background-size: 100%;
}
.btn-sweet-potato:before {
    background-image: url(../images/nutrition-images/sweet-potato-icon.png);
    background-size: 100%;
}
.btn-orange:before {
    background-image: url(../images/nutrition-images/orange-icon.png);
    background-size: 100%;
}
.btn-cucumber:before {
    background-image: url(../images/nutrition-images/cucumber-icon.png);
    background-size: 100%;
}
.btn-strawberry:before {
    background-image: url(../images/nutrition-images/strawberry-icon.png);
    background-size: 100%;
}
.btn-asparagus:before {
    background-image: url(../images/nutrition-images/asparagus-icon.png);
    background-size: 100%;
}
.btn-kiwi:before {
    background-image: url(../images/nutrition-images/kiwi-icon.png);
    background-size: 100%;
}
.btn-carrot:before {
    background-image: url(../images/nutrition-images/carrot-icon.png);
    background-size: 100%;
}
.btn-apricot:before {
    background-image: url(../images/nutrition-images/apricot-icon.png);
    background-size: 100%;
}
.btn-celery:before {
    background-image: url(../images/nutrition-images/celery-icon.png);
    background-size: 100%;
}
.btn-banana:before {
    background-image: url(../images/nutrition-images/banana-icon.png);
    background-size: 100%;
}
.btn-beans:before {
    background-image: url(../images/nutrition-images/beans-icon.png);
    background-size: 100%;
}
.btn-raspberry:before {
    background-image: url(../images/nutrition-images/raspberry-icon.png);
    background-size: 100%;
}
.btn-cabbage:before {
    background-image: url(../images/nutrition-images/cabbage-icon.png);
    background-size: 100%;
}
.btn-blueberry:before {
    background-image: url(../images/nutrition-images/blueberry-icon.png);
    background-size: 100%;
}

.activity-menu .nav-item {
    margin: 0.5rem auto;

    & a.btn.nav-link {
        display: flex;
        align-items: center;
        position: relative;
        background: white;
        font-size: 1.2rem;
        font-weight: 600;
        padding-left: 1rem;
        & .icon-container {
            position: relative;
            left: 0px;
            height: 46px;
            width: 46px;
            /*aspect-ratio: 1 / 1;*/
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            align-self: flex-start;
            margin-left: 0;
            margin-right: 1rem;
            margin-top: auto;
            margin-bottom: auto;
            clip-path: circle(50%);

            & img {
                width: 46px;
                height: auto;
                margin-top: -10px;
                margin-left: -5px;
            }
        }
    }
}
.btn-cooking {
    & .icon-container {
        background: var(--blue-light);
        & img {
            filter: drop-shadow(2px 2px 1px rgba(0, 30, 30, 0.5));
        }
    }
}

.btn-taste-testers {
    & .icon-container {
        background: var(--red-light);
        & img {
            filter: drop-shadow(2px 2px 1px rgba(0, 30, 30, 0.5));
        }
    }
}

.btn-food-detectives {
    & .icon-container {
        background: var(--green);
        & img {
            filter: drop-shadow(2px 2px 1px rgba(0, 30, 30, 0.5));
        }
    }
}
.downloadables-header {
    & .illustration-container {
        max-width: 480px;
        margin: auto;
        margin-bottom: 0;
        width: 80%;
    }
    & h2.module-nav-heading {
        font-size: 2.7rem;
        font-weight: normal;
        margin-top: 0;
    }
}
.downloadables {
    margin: auto;

    max-width: 800px;
    & h3 {
        font-size: 1.3rem;
        text-transform: uppercase;
        margin: 2rem 0 0.5rem 0;
        border-bottom: 1px solid var(--gray-dark);
        width: 100%;
        flex-grow: 1;
    }
}
.downloadables-menu {
    display: flex;
    flex-direction: column;
    margin: auto;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0;
    padding-bottom: 1.5rem;
    /*border-bottom:1px dotted white;*/

    & .nav-category {
        display: flex;
        flex-flow: column;
        width: 100%;
        flex-wrap: wrap;
        /*align-items:center;*/
        justify-content: flex-start;
        margin: 0 auto 0 0;
        & h4 {
            margin: 0.25rem 1rem 0.5rem 0;
            font-size: 1.4rem;
            font-weight: normal;
        }
        & > ul {
            margin: 0rem auto 1rem 0;
            & li:first-child {
                margin-right: 1rem;
            }
        }

        & .nav-item {
            margin: 0.5rem auto;
            width: 100%;
            display: flex;
            justify-content: center;
            flex-grow: 1;

            & a.btn.nav-link {
                display: flex;
                flex-grow: 1;
                font-weight: normal;
                font-size: 1.2rem;
                flex-direction: row;
                align-items: center;
                background: white;
                box-shadow: 0 0 5px rgba(0, 0, 20, 0.2);
                color: var(--gray-dark);
                border-color: transparent;

                &:after {
                    display: block;
                    margin-right: 0;
                    margin-left: 0.5rem;
                    height: 24px;
                    width: 24px;
                    content: "";
                    background-image: url("../images/si-glyph-document-pdf.svg");
                    background-size: 100% auto;
                    background-repeat: no-repeat;
                }
            }
        }
    }

    & #download-all.nav-item {
        width: 90%;
        max-width: 320px;
        .btn.nav-link {
            background: white;
            font-weight: normal;
            font-size: 1.2rem;
            font-weight: normal;
            font-size: 1.2rem;
            width: 100%;
            justify-content: center;
            align-items: center;
            margin: auto;
            box-shadow: 0 0 5px rgba(0, 0, 20, 0.2);
            &:after {
                display: block;
                margin-right: 0;
                margin-left: 0.5rem;
                height: 24px;
                width: 24px;
                content: "";
                background-image: url("../images/file-download.svg");
                background-size: auto;
                background-repeat: no-repeat;
            }
        }
    }
}

@media (min-width: 720px) {
    .downloadables-menu .nav-category {
        flex-flow: row;
        & > ul {
            margin: 0;
            margin-right: 0;
            margin-left: auto;
            & li:first-child {
                margin-right: 1rem;
            }
        }
    }
}

/*
.downloadables-menu .nav-item {
    margin: 0.5rem auto;

    & a.btn.nav-link {
        display: flex;
        align-items: center;
        position: relative;
        background: white;
        font-size: 1.2rem;
        font-weight: 600;
        padding-left: 1rem;
        & .icon-container {
            position: relative;
            left: 0px;
            height: 46px;
            width: 46px;
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            align-self: flex-start;
            margin-left: 0;
            margin-right: 1rem;
            margin-top: auto;
            margin-bottom: auto;
            clip-path: circle(50%);

            & img {
                width: 46px;
                height: auto;
                margin-top: -10px;
                margin-left: -5px;
            }
        }
    }
}
*/