.body{      
        display:            flex;
        flex-direction:     column;
        justify-content:    center;
        width:              100%;
        color:              #292500;
        font-size:          1rem;
        font-weight:        normal;
    }
    .header{
        display:            flex;
        justify-content:    space-between;
        position:           sticky;
        top:                0;
        width:              100%;
        padding-top:        0.5rem;
        padding-left:       0.5rem;
        z-index:            1000;
    }
    .width--100{
        width:              100%;
    }
    .content{
        display:            flex;
        flex-direction:     column;
        overflow-y:         auto;
        font-size:          1rem;
        width:              100%;
        margin-top:         1rem;
    }
    .content--center{
        justify-content:    center;
    }
    .content-section{
        display:            flex;
        flex-wrap:          wrap;
        margin-left:        auto;
        margin-right:       auto;
        width:              100%;
    }
    .title-h2{
        border-top:         2px solid var(--hoof-on-color-1);
        border-bottom:      2px solid var(--hoof-on-color-1);
        padding-top:        1rem;
        padding-bottom:     1rem;
        text-align:         center;
    }
    .illustration{
        margin-bottom:      1rem;
    }
    .text-center{
        text-align:         center;
    }
    .text-justify{
        text-align:         text-justify
    }
    .align-v-bottom{
        display:            inline;
        vertical-align:     bottom;
    }
    .col-size-90{
        width:              90%;
    }
    .col-size-80{
        width:              80%;
    }
    .col-size-60{
        width:              60%;
    }
    .col-size-50{
        width:              50%;
    }
    .col-size-40{
        width:              30%;
    }
    .col-size-20{
        width:              20%;
    }
    .col-size-10{
        width:              10%;
    }
    .marg-left-1{
        margin-left:        1rem;
    }
    .marg-left-2{
        margin-left:        2rem;
    }
    .text-align-right{
        text-align:        right;
    }
    .menu-section{
        margin-top:         2rem;
    }
    .dish-title{
        display:            flex;
        justify-content:    space-between;
        flex-direction:     row;
        width:              100%;
        margin-bottom:      0;
    }
    .margin-y--0{
        margin-bottom:      0;
        margin-top:         0;
    }
    .margin-bottom--0{
        margin-bottom:      0;
    }
    .margin-top--0{
        margin-top:         0;
    }
    .span--emphasise{
        color:              var(--hoof-on-color-1);
        font-weight:        bold;
    }
    .format--grey-small{
        color:              var(--hoof-on-color-1);
        font-size:          0.8rem;
    }
    .dish-description{
        width:              calc(100% - 2rem);
    }
    @media (max-width: 450px){
        .header{
            height:             8rem;
            background-color:   rgba(255,255,255,0.95);
        }
        .content-section{
            margin-top:         2rem;
            width:              100%;
            padding-right:      0.5rem;
            padding-left:       0.5rem;
        }
        .content-section--100{
            width:              100% !important;
        }
        .column-width{
            width: 100%;
        }
        .illustration{
            display:            flex;
            flex-direction:     column;
        }
        .illustration-text{
            margin-left:        0rem;
            margin-top:         1rem;
            margin-bottom:      1rem;
            justify-text:       center;
        }
        .illustration-picture{
            max-width:          100%;
        }
    }
    @media (min-width: 451px) and (max-width: 1080px){
        .header{
            height:             8rem;
            background-color:   rgba(255,255,255,0.95);
        }
        .content-section{
            margin-top:         2rem;
            width:              100%;
            padding-right:      0.5rem;
            padding-left:       0.5rem;
        }
        .content-section--100{
            width:              100% !important;
        }
        .column-width{
            margin-left:        1rem;
            width: 45%;
        }
        
        .illustration-picture{
            max-width:          100%;
        }
    }
    @media (min-width: 1081px){
        .header{
            height:             10rem;
            background-color:   rgba(255,255,255,0.6);
        }
        .content-section{
            display:            flex;
            flex-direction:     row;
            align-items:        start;
            padding-left:       3rem;
            padding-right:      3rem;
            margin-bottom:      3rem;
        }
        .content-section:not(:first-child){
            margin-top:         3rem;
        }
        .content-section--100{
            max-width:          100% !important;
        }
        
        .column-width{
            width:              40%;
        }
        
        .illustration{
            display:        flex;
        }
        .illustration-text{
            margin-left:        1rem;
            justify-text:       center;
        }  
        .illustration-picture{
            max-width:          15%;
        }
    }
    .content-section-100{
        display:            flex;
        width:              100%;
        margin-top:         2rem;
    }