:root{
    --nav-search-background: #ffffff7c;
    --headerColor: #E6F3C2;

    --headerColorFillHeight: 0px;
    --backdropSpacing: -80px;

    --headerMealPosition: 13vw;
    --headerMealSize: 18vw;
    --headerTitle: 5rem;
}
#headerBackdrop{
    position: relative;
    bottom: calc(var(--navbar-height) - var(--backdropSpacing));
    margin-bottom: calc((var(--navbar-height) - var(--backdropSpacing)) - (var(--navbar-height) - var(--backdropSpacing)) - (var(--navbar-height) - var(--backdropSpacing)) - var(--headerMealPosition));
    z-index: -100;
    height: 100%;
}
#headerColorFill{
    background-color: var(--headerColor);
    height: var(--headerColorFillHeight);
    width: 100%;
    position: relative;
    bottom: var(--navbar-height);
    z-index: -100;
}
/* #headerBackdrop img{
    width: var(--headerMealSize);
    position: relative;
    bottom: var(--headerMealPosition);
    left: 50%;
    transform: translate(-50%);
    margin-bottom: calc(var(--headerMealPosition) - var(--headerMealPosition) - var(--headerMealPosition));
    filter: drop-shadow(13px 13px 10px rgba(0, 0, 0, 0.3));
    -webkit-filter: drop-shadow(13px 13px 10px rgba(0, 0, 0, 0.3));  
} */
.headerImage {
    width: var(--headerMealSize);
    height: var(--headerMealSize);
    position: relative;
    bottom: var(--headerMealPosition);
    left: 50%;
    transform: translate(-52%);
    /* margin-bottom: calc(var(--headerMealPosition) - var(--headerMealPosition) - var(--headerMealPosition) - 200px); */
    filter: drop-shadow(13px 13px 10px rgba(0, 0, 0, 0.3));
    -webkit-filter: drop-shadow(13px 13px 10px rgba(0, 0, 0, 0.3));  
    background-size: contain;
    background-repeat: no-repeat;
}
#headerTitle{
    position: relative;
    bottom: calc(var(--headerMealPosition) + 30px);
    width: max-content;
    margin: 0 auto;
    font-size: var(--headerTitle);
    color: var(--font-color);
    font-family: 'source-serif-pro-semibold';
}
#errorBox{
    display: flex;
    justify-content: center;
    margin-top: 80px;
    margin-bottom: var(--headerMealPosition);
}
#errorBox h1{
    font-size: 2.8rem;
    color: var(--font-color);
    position: relative;
    left: 15px;
}
@media (max-width: 1440px){
    :root{
        --backdropSpacing: 0px;
        --headerTitle: 4.1rem;
    }
}
@media (max-width: 1200px){
    :root{
        --headerMealSize: 22vw;
    }
}
@media (max-width: 1100px){
    :root{
        --headerColorFillHeight: 50px;
        --headerMealPosition: 16vw;
        --headerMealSize: 25vw;
        --headerTitle: 3.8rem;
    }
}
@media (max-width: 810px){
    :root{
        --headerColorFillHeight: 100px;
        --headerMealPosition: 18vw;
        --headerMealSize: 35vw;
    }
}
@media (max-width: 500px){
    :root{
        --headerColorFillHeight: 200px;
        --headerMealPosition: 30vw;
        --headerMealSize: 50vw;
    }
}