@font-face {
    font-family: 'Maax';
    src: url("../fonts/maax_regular.woff");
}

:root {
    --border-size: 8px;
    --background-color: #C6E0DC;
    --font-color: #001276;
    --side-margin: 20px;
    --top-margin: 20px;
    --bottom-margin: 60px;
    --heading-bottom-margin: 30px;
    --side-padding: 20px;
}

.monday { --background-color: #C6E0DC; }
.tuesday { --background-color: #B0D4EA; }
.wednesday { --background-color: #FFDF97; }
.thursday { --background-color: #FCC3D2; }
.friday { --background-color: #FCB48B; }
.saturday { --background-color: #C7DBB2; }
.sunday { --background-color: #E7D3EF; }

.mobile-header {
    display: none;
}

.wrapper{
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

body,
html {
    overflow-x: hidden;
    background-color: white;
    color: var(--font-color);
    font-family: 'Maax';
    margin: 0;
    width: 100%;
    height: auto;
}

.upper {
    background-color: var(--background-color);
    padding: var(--top-margin) var(--side-margin);
    padding-bottom: 0px;
    display: grid;
    grid-template-columns: 4fr 4fr;
}

.border {
    border: var(--border-size) solid var(--font-color);
    border-radius: 0 200px 0 0;
    border-bottom: none;
    padding: 0 var(--side-padding);
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.5%;
    justify-content: space-between;
    min-width: 89vw;
    margin-top: 20px;
    margin-left: 40px;
    padding-top: 50px;
    padding-left: 40px;
    padding-right: 40px;
}

.day {
    flex: 0 0 23%;
    margin-bottom: 20px;
}

.heading h1,
.heading p {
    font-size: 49px;
    margin: 0;
    font-weight: bold;
    line-height: 1.5;
}

.allergenes {
    font-size: 14px;
    font-weight: normal;
}

.upper .dishes,
.lower .dishes {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
}

.upper .dish,
.lower .dish {
    flex: 0 0 45%;
    margin-bottom: 10px;
    border-left: 5px solid var(--font-color);
    padding-left: 15px;
    font-size: 27px;
}

.qrcode {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-top: 20px;
}

.qrcode img {
    width: 150px;
    height: 150px;
}

.lower .bottom-border {
    border: var(--border-size) solid var(--background-color);
    border-top: none;
    padding: var(--side-padding);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-right: 20px;
    margin-left: 60px;
    padding-left: 40px;
    padding-right: 40px;
}
.bottom-border{
    min-width: 89vw;

}
.lower{
    display: grid;

    grid-template-columns: 3fr 3fr;
}
.disclaimer {
    text-align: center;
    font-size: 14px;
    font-style: italic;
    margin-top: 10px;
}

.allergene_icon{
    height: 40px;
}

h2{
    font-size: 32px;
}