.module-banner-group {
    background: transparent !important;
    box-shadow: 0 0 0 transparent !important;
    & .activity-icon {
        height: 123%;
        left: -30px !important;
        top: -15px;
    }
    & .module-icon {
        height: 95%;
        right: -20px !important;
        top: -10px;
    }
    & .introduction-icon {
        position: absolute;
        height: 140%;
        width: auto;
        top: 5px;
        left: -100px;
        aspect-ratio: 16 / 9;
        z-index: 1;

        & img {
            filter: drop-shadow(2px 2px 4px rgba(0, 20, 20, 0.5));
        }
    }
}
.exercise-breaks-introduction,
.game-time-introduction {
    /*background-image: linear-gradient(var(--teal) 0%, white 110%);*/
    & header {
        background-color: var(--teal);
        color: var(--teal-dark);

        & .activity-title {
            text-shadow:
                0 0 1px var(--teal-dark),
                -2px 1px 0 var(--teal-dark);
        }
    }
}
.exercise-breaks-activity {
    --theme-bg-light: #cceabc;

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

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

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

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

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

    & .tab-bar {
        border-color: var(--green);
    }
}
.move-n-groove-activity {
    --theme-bg-light: #ffd5c5;
    --theme-bg-dark: rgb(190, 50, 50);
    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);
    }
}
.game-time-activity {
    --theme-bg-light: #dfd5ff;
    --theme-bg-dark: var(--blue);
    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 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(--blue);
    }
}

article {
    position: relative;
}

article#about-activity {
}

.physical-activity-menu {
    display: flex;
    flex-flow: column;
    width: 90%;
    margin: auto;
    padding-bottom:1rem;
    & .nav-item {
        display: flex;
        flex-flow: column;
        flex-grow: 1;
        justify-content: center;
        align-items: center;
        margin: .5rem auto;
        width: 100%;
        & p {
            color: var(--gray-dark);
            max-width: 300px;
            margin: auto;
            padding: 1.5rem 0.75rem 0.75rem;
            margin-top: -1rem;
            font-size: 0.95rem;
            line-height: 1.5;
            border-radius: 0rem 0rem 9px 9px;
            /*background: rgba(255, 255, 255, 0.8);*/
            /*border: 1px solid var(--gray);*/
        }
        & a.btn {
            display: flex;
            flex-grow: 1;
            flex-shrink: 0;
            align-items: center;
            position: relative;
            background: white;
            font-size: 1.2rem;
            font-weight: normal;
            width: calc(100% - 2rem);
            max-width: 300px;
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
            padding-left: 1rem;
            margin: auto;
            background-color: white;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

            & .icon-container {
                position: relative;
                left: 0px;
                height: 50px;
                width: 50px;
                /*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: 50px;
                    height: auto;
                    margin-top: -5px;
                    margin-left: -1px;
                }
            }
        }
    }
}
.nav-item-exercise-breaks {
    & p {
    }
    & .btn {
        & .icon-container {
            background: var(--green);
            & img {
                filter: drop-shadow(2px 2px 2px rgba(50, 0, 0, 0.5));
            }
        }
    }
}

.nav-item-game-time {
    & p {
    }
    & .btn {
        & .icon-container {
            background: var(--blue);
            & img {
                filter: drop-shadow(2px 2px 2px rgba(50, 0, 0, 0.5));
            }
        }
    }
}
.nav-item-move-n-groove {
    & p {
    }
    & .btn {
        & .icon-container {
            background: var(--red-light);
            & img {
                filter: drop-shadow(2px 2px 2px rgba(50, 0, 0, 0.5));
            }
        }
    }
}

.exercise-breaks-menu,
.game-time-menu,
.move-n-groove-menu {
    display: flex;
    flex-direction: column;
    margin: auto;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 360px;
    padding: 0 0 2rem;
    & .nav-item {
        margin: 1rem auto;
        width: 100%;
        display: flex;
        justify-content: stretch;
        & a.btn.nav-link {
            display: flex;
            flex-grow: 1;
            font-family: var(--header-font);
            font-weight: normal;
            font-size: 1.3rem;
            border-color: rgba(0, 0, 0, 0.2);
        }
    }
}

.exercise-breaks-menu,
.move-n-groove-menu {
    & .nav-item {
        margin: 0.25rem auto;

        & a.btn.nav-link {
            font-family: var(--body-font);
            padding: 0.75rem 1rem;
            border-radius: 10px;
            background-color: white;
            /*background-image: linear-gradient(to right, var(--green) 1%, white 1%);*/

            &.btn-introduction {
                /*margin-bottom: 1rem;*/
                background: transparent;
            }
        }
    }
}

.game-time-menu {
    & .nav-item {
        margin: 0.75rem auto;
        position: relative;
        background: transparent;
        display: flex;
        width: 100%;
        justify-content: center;
        /*align-items: center;*/
        flex-direction: column;

        & .list-group {
            width: 100%;
        }
        & a.list-group-item {
            transition: all 0.2s ease-in-out;
            background: rgba(255, 255, 255, 0.5);
            font-size: 1.2rem;
            &:hover {
                background: rgba(255, 255, 255, 1);
            }
        }
        & .game-time-activity-number {
            font-size: 1rem;
            font-weight: bold;
            letter-spacing: 0.06rem;
            display: block;
            height: 30px;
            padding: 0.25rem 1rem 0;
            border-radius: 10px 10px 0 0;
            /*background: var(--blue-gray);*/

            text-transform: uppercase;
            /*text-align: center;*/
            line-height: 30px;
        }

        .game-time-activity-type {
            font-weight: bold;
            color: var(--blue-dark);
        }

        & a.btn.nav-link.btn-introduction {
            font-family: var(--body-font);
            padding: 0.5rem 2rem;
            border-radius: 10px;
            background-color: white;
            position: relative;
            width: calc(100% - 4rem - 4px);
            background: transparent;
        }
    }
}