h1 {
    background-color: var(--secondary);
    color: var(--primary);
    margin: 0;
    padding-top: 2.5em;
    text-align: center;
}
.header-whisk {
    background-color: var(--secondary);
    height: 37.5px;
    margin-bottom: 37.5px;
    position: relative;
}
.header-whisk img {
    display: block;
    left: 50%;
    margin: 0 auto;
    position: absolute;
    transform: translateX(-50%);
}

.striped-background {
    background: linear-gradient(
            to right,
            var(--background) 0% calc(100% / 19 * 1),
            var(--secondary) calc(100% / 19 * 1) calc(100% / 19 * 2),
            var(--background) calc(100% / 19 * 2) calc(100% / 19 * 3),
            var(--secondary) calc(100% / 19 * 3) calc(100% / 19 * 4),
            var(--background) calc(100% / 19 * 4) calc(100% / 19 * 5),
            var(--secondary) calc(100% / 19 * 5) calc(100% / 19 * 6),
            var(--background) calc(100% / 19 * 6) calc(100% / 19 * 7),
            var(--secondary) calc(100% / 19 * 7) calc(100% / 19 * 8),
            var(--background) calc(100% / 19 * 8) calc(100% / 19 * 9),
            var(--secondary) calc(100% / 19 * 9) calc(100% / 19 * 10),
            var(--background) calc(100% / 19 * 10) calc(100% / 19 * 11),
            var(--secondary) calc(100% / 19 * 11) calc(100% / 19 * 12),
            var(--background) calc(100% / 19 * 12) calc(100% / 19 * 13),
            var(--secondary) calc(100% / 19 * 13) calc(100% / 19 * 14),
            var(--background) calc(100% / 19 * 14) calc(100% / 19 * 15),
            var(--secondary) calc(100% / 19 * 15) calc(100% / 19 * 16),
            var(--background) calc(100% / 19 * 16) calc(100% / 19 * 17),
            var(--secondary) calc(100% / 19 * 17) calc(100% / 19 * 18),
            var(--background) calc(100% / 19 * 18) 100%
        );
    margin-top: 10vh;
    width: 100%;
}

.menu-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: auto;
    max-height: 95vh;
    width: fit-content;
}

.menu-column {

}

.menu-panel, .menu-note {
    background-color: var(--background);
    border-left: 2px solid var(--primary);
    border-radius: 14px;
    box-shadow: 2px 2px 8px var(--text);
    margin: 1em 0.5em;
    max-width: 90vw;
    padding: 0.5em;
    text-align: center;
    width: 18em;
}

.menu-panel h3 {
    margin-bottom: 0.25em;
    margin-top: 0;
}
.menu-panel h4 {
    margin-bottom: 0;
    margin-top: 0.25em;
}

.menu-subsection {
    
}

.menu-items {
    text-align: left;
}

.menu-item {
    display: flex;
    justify-content: space-between;
}

.item-name, .item-price {

}

.menu-line {
    border-bottom: 2px dotted gray;
    flex-grow: 1;
    margin: 0.5em;
}

@media screen and (max-width: 960px){
    h1 {
        padding-top: 4em;
    }

    .striped-background {
        background: linear-gradient(
            to right,
            var(--background) 0% 11.111%,
            var(--secondary) 11.111% 22.222%,
            var(--background) 22.222% 33.333%,
            var(--secondary) 33.333% 44.444%,
            var(--background) 44.444% 55.556%,
            var(--secondary) 55.556% 66.667%,
            var(--background) 66.667% 77.778%,
            var(--secondary) 77.778% 88.889%,
            var(--background) 88.889% 100%
        );
    }

    .menu-wrapper {
        flex-wrap: nowrap;
        max-height: unset;
    }

    .menu-panel, .menu-note {
        width: 80vw;
    }
}