/* Font Families */

@font-face {
    font-family: 'Lobster_Two';
    src: url(fonts/lobster_two/lobstertwo-bolditalic-webfont.woff2) format('woff2'),
        url(fonts/lobster_two/lobstertwo-bolditalic-webfont.woff) format('woff');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url(fonts/roboto/roboto-regular-webfont.woff2) format('woff2'),
        url(fonts/roboto/roboto-regular-webfont.woff) format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Trade Winds';
    src: url(fonts/tradewinds/tradewinds-regular-webfont.woff2) format('woff2'),
        url(fonts/tradewinds/tradewinds-regular-webfont.woff) format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Lemon';
    src: url(fonts/lemon/lemon-regular-webfont.woff2) format('woff2'),
        url(fonts/lemon/lemon-regular-webfont.woff) format('woff');
    font-weight: 400;
    font-style: normal;
}

/* RESET */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

input,
button,
textarea {
    font: inherit;
}

/* VARIABLES */

:root {

    /* BORDERS */
    --BORDER-RADIUS__MEDIUM: 1.5em;
    --BORDER-RADIUS__SMALL: 1em;

    /* COLORS */
    --BG-TRANSPARENT__DARK: rgba(0, 0, 0, .7);
    --BG-TRANSPARENT__LIGHT: rgba(0, 0, 0, .2);
    --BG-TRANSPARENT__MEDIUM: rgba(0, 0, 0, .5);
    --BUTTON-BG: darkblue;
    --BUTTON-COLOR: plum;
    --FONT-COLOR: papayawhip;
    --INPUT-BG: powderblue;
    --INPUT-COLOR: purple;

    /* FONTS */
    --FF: 'Roboto', serif;
    --FF-HEADINGS: 'Trade Winds', serif;
    --FF-HYPERLINKS: 'Lemon', serif;
    --FF-LEMON: 'Lemon', serif;
    --FF-LOB: 'Lobster_Two', serif;
    --FS: clamp(1rem, 3vh, 2rem);
    --FS-LARGE: 2em;
    --FS__LARGER: 2.5em;
    --FS-LARGER: 3em;
    --FS-MEDIUM: 1.5em;
    --FS-SMALL: 1.2em;
    --FS__X-LARGE: 4em;

    /* SHADOWS */
    --SHADOW-BOTTOM: 0 .25em .125em;
    --SHADOW-SMALL__TL: -.125em -.125em .075em;

    /* SPACINGS */
    --SPACING-LARGE: 2em;
    --SPACING-LARGEST: 4em;
    --SPACING-MEDIUM: 1em;
    --SPACING-SMALL: .5em;

    /* TRANSITIONS */
    --TRANSITION: .5s;
}

/* UTILITY CLASSES */

.offscreen {
    position: absolute;
    left: -10000px;
}

.nowrap {
    white-space: nowrap;
}

.center {
    text-align: center;
}

.none {
    display: none;
}

/* GENERAL STYLES */

html {
    max-width: 100vw;
    min-height: 100vh;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    height: 100%;
    min-width: 100px;
    font-family: var(--FF);
    background-color: goldenrod;
    color: var(--FONT-COLOR);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--FF-HEADINGS);
}

a,
label,
input,
button {
    text-decoration: none;
    cursor: pointer;
}

a {
    font-family: var(--FF-HYPERLINKS);
}

img {
    image-rendering: auto;
}

p {
    font-size: var(--FS);
}


/* ========== HEADER ========== */

header {
    display: block;
    width: 100%;
    height: 20vh;
    position: fixed;
    top: 0;
    left: 0;
    padding: var(--SPACING-SMALL);
    z-index: 1000;
    background: linear-gradient(crimson, red, darkred);
    box-shadow: var(--SHADOW-BOTTOM) goldenrod;
}

.back-arrow {
    position: relative;
    display: block;
    color: yellow;
}

.back-arrow i {
    position: absolute;
    top: 0;
    left: 0;
}

.header-content {
    display: flex;
    height: 100%;
}

.header-logo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 50%;
    height: 100%;
    top: 0;
    margin-left: var(--SPACING-MEDIUM);
}

.header-logo__img {
    height: 100%;
}

header img {
    height: 100%;
    width: auto;
}

.header-logo__img:is(:hover, :focus) img {
    -webkit-filter: brightness(1.1);
    filter: brightness(1.1);
}

.header-logo__img:active img {
    -webkit-filter: brightness(1.2);
    filter: brightness(1.2);
}

header h1 {
    font-family: var(--FF-LOB);
    font-style: italic;
    font-size: var(--FS-MEDIUM);
    color: gold;
    margin-left: var(--SPACING-SMALL);
}

.header-tabs {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 50%;
    -moz-column-gap: var(--SPACING-MEDIUM);
    column-gap: var(--SPACING-MEDIUM);
    height: 100%;
}

.header-tabs a {
    color: gold;
    font-size: .8rem;
}

.header-tabs p {
    display: none;
}

.header-list {
    position: absolute;
    top: var(--SPACING-SMALL);
    right: var(--SPACING-MEDIUM);
    color: black;
}


/* ===== Header Menu Section  */

header section {
    display: block;
    height: 100vh;
    width: 90%;
    padding: var(--SPACING-SMALL);
    overflow: auto;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2000;
    visibility: hidden;
    transition: all .3s;
    opacity: 0;
    padding: 0 0 var(--SPACING-LARGE) var(--SPACING-SMALL);
    background: radial-gradient(gold, goldenrod, darkgoldenrod);
}

#header-list:checked~section {
    visibility: visible;
    opacity: 1;
}

#header-list-close:checked~.header__section-content {
    display: none;
}

.close__header_menu {
    position: fixed;
    top: var(--SPACING-SMALL);
    right: var(--SPACING-MEDIUM);
    float: right;
    z-index: 1000;
    color: black;
}

header i {
    cursor: pointer;
}

.header__section-content {
    display: flex;
    flex-direction: column;
    row-gap: var(--SPACING-LARGE);
    margin-top: var(--FS__X-LARGE);
}

.header__section-content i {
    font-size: var(--FS-SMALL);
    color: black;
}

.header__section-content i:hover {
    color: grey;
}

.header__section-content i:active {
    color: lightgrey;
}

.header__menu-items a.primary {
    color: #551a8b;
}

.header__menu-items a.secondary {
    color: #830383;
}

.header__menu-items>a:not(.primary):not(.secondary) {
    color: #bb07bb;
}

.main-menu,
.header__menu-items--options,
.meals {
    flex-direction: column;
    row-gap: var(--SPACING-MEDIUM);
    margin: var(--SPACING-MEDIUM) 0 0 var(--SPACING-MEDIUM);
}

.header__menu-items--options {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.header__menu-items--options-items {
    position: relative;
    transition: all 2s;
}

.header__menu-items--options-items a {
    color: darkviolet;
}

.header__menu-items--options-items img {
    visibility: hidden;
    display: block;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    width: 8em;
    height: auto;
    transition: all .3s ease;
    border-radius: var(--BORDER-RADIUS__MEDIUM);
}

.header__menu-items--options-items a:is(:hover, :focus)+img {
    visibility: visible;
    opacity: 1;
}

.header__section-content a:is(:hover, :focus),
.header__section-content a:not(.primary):not(.secondary):is(:hover, :focus) {
    color: darkcyan;
}

.header__section-content a:active,
.header__section-content a:not(.primary):not(.secondary):active {
    color: var(--FONT-COLOR);
}

#main-menu:checked~.main-menu,
#starters:checked~.starters,
#meals:checked~.meals,
#beef:checked~.beef,
#biryanis:checked~.biryanis,
#burgers:checked~.burgers,
#chicken:checked~.chicken,
#curries:checked~.curries,
#lamb:checked~.lamb,
#pasta:checked~.pasta,
#pizzas:checked~.pizzas,
#salads:checked~.salads,
#seafood:checked~.seafood,
#specialty-dishes:checked~.specialty-dishes,
#vegetarian:checked~.vegetarian,
#desserts:checked~.desserts,
#sides:checked~.sides,
#drinks:checked~.drinks,
#specials:checked~.specials,
#kids-menu:checked~.kids-menu,
#breakfast-menu:checked~.breakfast-menu {
    display: flex;
}

.open:checked+label {
    display: none;
}

.open:checked+label+label {
    display: inline-block;
}


/* ========== HOME PAGE ========== */

#body-home {
    background: url('images/home-bg.jpg') center / cover no-repeat fixed;
}

/* ===== Home Main ===== */

#home-hero {
    width: 100%;
    min-height: 100vh;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: var(--SPACING-LARGE);
    background: var(--BG-TRANSPARENT__LIGHT);
    padding: var(--SPACING-MEDIUM);
}

#home-hero__logo {
    display: block;
    width: 100%;
    padding: var(--SPACING-MEDIUM);
    background-image: url('images/sparkle.gif');
    text-align: center;
}

@-webkit-keyframes logo {
    0% {
        transform: scale(1) rotateY(0deg);
    }

    100% {
        transform: scale(1.2) rotateY(360deg);
    }
}

@keyframes logo {
    0% {
        transform: scale(1) rotateY(0deg);
    }

    100% {
        transform: scale(1.2) rotateY(360deg);
    }
}

#home-hero img {
    width: 8em;
    height: auto;
    -webkit-animation: logo 2s linear 2s forwards;
    animation: logo 2s linear 2s forwards;
}

#home-hero h1 {
    color: white;
    letter-spacing: .2em;
    font-size: var(--FS-LARGE);
}

@-webkit-keyframes hover {

    from,
    to {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

@keyframes hover {

    from,
    to {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}


#home-hero a {
    font-size: var(--FS-MEDIUM);
    color: cyan;
}

#home-hero a:is(:hover, :focus) {
    text-decoration: underline;
    -webkit-animation: hover 1s linear infinite;
    animation: hover 1s linear infinite;
}

#home-hero a:active {
    color: yellow;
}


/* ========== Menu  ========== */

.main__options {
    margin-top: 20vh;
    background: url('images/options-bg.jpg') 15% / cover no-repeat fixed;
    min-height: 80vh;
    padding: var(--SPACING-LARGE);
}

.main__options--content {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: var(--SPACING-MEDIUM);
}

.title {
    text-decoration: underline;
    color: cyan;
    font-size: var(--FS-LARGE);
    margin-bottom: var(--SPACING-MEDIUM);
}

.main__options--content a {
    color: yellow;
    font-size: var(--FS);
    transition: all var(--TRANSITION);
}

.main__options--content a:is(:hover, :focus) {
    text-decoration: underline;
    -webkit-animation: hover 1s linear infinite;
    animation: hover 1s linear infinite;
    color: lightgreen;
}

.main__options--content a:active {
    -webkit-filter: brightness(1.5);
    filter: brightness(1.5);
}


/* ========== Categories ========== */

.main__category {
    position: relative;
    z-index: 1;
    margin-top: 20vh;
    min-height: 80vh;
    background: url('images/bg__category.jpg') center / cover no-repeat fixed;
}

.main__category-container {
    background: var(--BG-TRANSPARENT__MEDIUM);
    padding: var(--SPACING-MEDIUM);

}

.main__category-container>h1 {
    font-size: var(--FS-LARGE);
    margin-top: var(--SPACING-MEDIUM);
}

.main__category-container>h2 {
    font-size: var(--FS-MEDIUM);
    margin-top: var(--SPACING-MEDIUM);
}

.main__category-container>h3 {
    font-size: var(--FS-SMALL);
    margin-top: var(--SPACING-MEDIUM);
}


/* ========== INDIVIDUAL FOOD CATEGORIES ========== */

.individual-food-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: var(--SPACING-LARGE);
}

.individual-food-item-card {
    width: 90%;
}

.individual-food-item-card a {
    display: flex;
    flex-direction: column;
    border-radius: var(--BORDER-RADIUS__MEDIUM);
    background: darkblue;
    transition: all var(--TRANSITION);
}

.individual-food-item-card img {
    width: 100%;
    height: 50%;
    border-top-left-radius: var(--BORDER-RADIUS__MEDIUM);
    border-top-right-radius: var(--BORDER-RADIUS__MEDIUM);
}

.individual-food-item-card__text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: var(--SPACING-MEDIUM);
    align-items: center;
    height: 50%;
    padding: var(--SPACING-MEDIUM);
}

.individual-food-item-card h2 {
    font-family: var(--FF-HYPERLINKS);
    color: orange;
    font-size: var(--FS-MEDIUM);
    text-align: center;
}

.individual-food-item-card p:nth-child(2) {
    font-size: var(--FS-SMALL);
    color: yellow;
    font-family: monospace;
}

.individual-food-item-card p:nth-child(3) {
    font-family: cursive;
    color: orange;
}

.individual-food-item-card a:is(:hover, :focus) {
    -webkit-filter: brightness(1.2);
    filter: brightness(1.2);
    transform: scale(1.05);
}

/* back-to-top */

.top {
    display: block;
    width: 100%;
    position: fixed;
    bottom: 10vh;
    left: 0;
    margin: 0;
    z-index: 900;
    pointer-events: none;
}

.top a {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    opacity: .2;
    pointer-events: all;
    transition: var(--TRANSITION);
    background-color: lightgrey;
    color: black;
}

.top a:is(:hover, :focus) {
    opacity: 1;
}

/* ========== INDIVIDUAL FOOD ITEM PAGES ========== */

.food-item {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 80vh;
    margin-top: 20vh;
    background: url('images/bg__food-item.jpg') center / cover no-repeat fixed;
}

.food-item__content {
    background: var(--BG-TRANSPARENT__DARK);
    width: 100%;
    min-height: 80vh;
    margin: auto;
    padding-bottom: var(--SPACING-LARGEST);
}

.food-item img {
    width: 100%;
    height: auto;
    box-shadow: var(--SHADOW-BOTTOM) darkgoldenrod;
}

.food-item__info {
    padding: var(--SPACING-MEDIUM);
}

.food-item h1 {
    color: red;
}

.inline {
    display: inline-block;
}

.food-item h2 {
    color: orangered;
    font-family: var(--FF-LOB);
    margin: var(--SPACING-SMALL) 0;
}

h2.inline {
    margin-bottom: var(--SPACING-SMALL);
}

.food-item p {
    color: var(--FONT-COLOR);
}

.food-item p:not(.inline) {
    color: var(--FONT-COLOR);
    text-indent: var(--SPACING-LARGE);
    margin: var(--SPACING-MEDIUM) 0;
}

.options__input-container {
    display: flex;
    align-items: center;
    margin-bottom: var(--SPACING-SMALL);
    font-size: var(--FS-SMALL);
    font-family: cursive;
}

.food-item form input[type="radio"]+label {
    color: lightgreen;
}

.food-item form input {
    width: var(--SPACING-MEDIUM);
    height: var(--SPACING-MEDIUM);
    margin-right: var(--SPACING-SMALL);
    accent-color: green;
    border: none;
}


.food-item form input[type="checkbox"]+label {
    color: gold;
}


.food-item__content form label[for="notes"] {
    color: orangered;
    font-size: var(--FS-MEDIUM);
    font-family: var(--FF-LOB);
}

.food-item textarea {
    width: 100%;
    height: 30vh;
    margin-top: var(--SPACING-SMALL);
    height: 15em;
    padding: var(--SPACING-MEDIUM);
    resize: none;
    border-radius: var(--BORDER-RADIUS__SMALL);
    background-color: var(--INPUT-BG);
    color: var(--INPUT-COLOR);
}

.food-item button {
    width: 50%;
    height: 2em;
    float: right;
    border: none;
    margin: var(--SPACING-SMALL) 0;
    border-radius: var(--BORDER-RADIUS__SMALL);
    transition: all var(--TRANSITION);
    font-size: var(--FS);
    background-color: var(--BUTTON-BG);
    color: var(--BUTTON-COLOR);
    box-shadow: var(--SHADOW-SMALL__TL) purple;
}

.food-item button:is(:hover, :focus) {
    -webkit-filter: brightness(1.3);
    filter: brightness(1.3);
}

.food-item button:active {
    -webkit-filter: brightness(1.5);
    filter: brightness(1.5);
}

/* ========== THANK YOU PAGE ========== */

#main-thanks {
    margin-top: 20vh;
    min-height: 80vh;
    background: url('images/bg__thanks.jpg') center / cover no-repeat fixed;
    display: flex;
}

#thanks-content {
    background: var(--BG-TRANSPARENT__DARK);
    width: 100%;
    min-height: 80vh;
    padding: var(--SPACING-MEDIUM);
    margin: auto;
}

#thanks-content img {
    width: 100%;
    height: auto;
}


#thanks-content h1 {
    font-size: var(--FS-MEDIUM);
    color: orange;
}

#thanks-content p {
    color: var(--FONT-COLOR);
    font-size: var(--FS-SMALL);
    margin: var(--SPACING-MEDIUM) 0 var(--SPACING-LARGE);
    font-family: var(--FF-LEMON);
    line-height: var(--SPACING-LARGE);
}


#thanks-content__buttons {
    display: flex;
    flex-direction: column;
    row-gap: var(--SPACING-MEDIUM);
    justify-content: center;
    align-items: center;
}

#thanks-content__buttons a {
    width: 90%;
    height: 3em;
}

#thanks-content__buttons button {
    width: 100%;
    height: 100%;
    border-radius: var(--BORDER-RADIUS__SMALL);
    transition: all var(--TRANSITION);
    font-family: var(--FF);
    font-size: var(--FS);
    border: none;
    background-color: var(--BUTTON-BG);
    color: var(--BUTTON-COLOR);
    box-shadow: var(--SHADOW-SMALL__TL) purple;
}

#thanks-content__buttons button:is(:hover, :focus) {
    -webkit-filter: brightness(1.3);
    filter: brightness(1.3);
}

#thanks-content__buttons button:active {
    -webkit-filter: brightness(1.5);
    filter: brightness(1.5);
}


/* ========== ABOUT PAGE ========== */

#about-main {
    margin-top: 20vh;
    min-height: 80vh;
    background: url('images/bg__about.jpg') center / cover no-repeat fixed;
    padding-bottom: 80vh;
}

#about-main__content {
    background-color: var(--BG-TRANSPARENT__DARK);
    min-height: 80vh;
    padding: var(--SPACING-MEDIUM);
}

#about-main__content h1,
#contact-main__content h1 {
    font-size: var(--FS-LARGE);
}

#about-main__content p {
    color: var(--FONT-COLOR);
    margin: var(--SPACING-MEDIUM) 0;
    text-indent: var(--SPACING-LARGE);
    font-family: var(--FF-LEMON);
    font-size: clamp(var(--FS-MEDIUM), var(--FS), var(--FS-LARGE));
}

#about-main__content h2,
#contact-main__content h2 {
    font-size: var(--FS-MEDIUM);
}

#about-main__content li {
    color: plum;
    margin: var(--SPACING-LARGE) var(--SPACING-MEDIUM);
    font-family: var(--FF-LEMON);
    font-size: clamp(var(--FS-MEDIUM), var(--FS), var(--FS-LARGE));
}

#about-main__content p.center {
    color: gold;
    font-size: var(--FS-LARGE);
    text-indent: 0;
}


/* =========== CONTACT PAGE ========== */

#contact-main {
    margin-top: 20vh;
    min-height: 80vh;
    background: url('images/bg__contact.jpg') center / cover no-repeat fixed;
}

#contact-main__content {
    min-height: 80vh;
    background: var(--BG-TRANSPARENT__DARK);
    color: plum;
    padding: var(--SPACING-MEDIUM);
}

#contact-main__content p {
    font-size: clamp(var(--FS-MEDIUM), var(--FS), var(--FS-LARGE));
    font-family: var(--FF-LEMON);
    line-height: var(--SPACING-LARGE);
}

#contact-main__content p.center {
    font-size: var(--FS-LARGE);
    color: gold;
}

#contact-main__content h2 {
    margin: var(--SPACING-LARGE) 0 var(--SPACING-SMALL);
}

.info {
    margin-top: var(--SPACING-SMALL);
    color: var(--FONT-COLOR);
}

#contact-main__content p.info {
    font-family: var(--FF);
}

.space {
    margin-bottom: var(--SPACING-LARGE);
}

.break {
    word-break: break-all;
}

#contact-main__content li {
    list-style-type: none;
}

#contact-main__content label,
#contact-main__content input {
    margin: var(--SPACING-SMALL) 0;
    font-size: clamp(var(--FS-MEDIUM), var(--FS), var(--FS-LARGE));
}

#contact-main__content label {
    color: orangered;
}

#contact-main__content input {
    width: 100%;
    height: 2em;
    padding: var(--SPACING-SMALL);
    margin-bottom: var(--SPACING-LARGE);
    background-color: var(--INPUT-BG);
    color: var(--INPUT-COLOR);
}

#contact-main__content textarea {
    border-radius: var(--BORDER-RADIUS__SMALL);
    resize: none;
    padding: var(--SPACING-MEDIUM);
    width: 100%;
    height: 15em;
    margin: var(--SPACING-MEDIUM) 0;
    font-size: clamp(var(--FS-MEDIUM), var(--FS), var(--FS-LARGE));
    background-color: var(--INPUT-BG);
    color: var(--INPUT-COLOR);
}

#contact-main__content button {
    border-radius: var(--BORDER-RADIUS__SMALL);
    padding: var(--SPACING-SMALL);
    width: 100%;
    transition: all var(--TRANSITION);
    border: none;
    background-color: var(--BUTTON-BG);
    color: var(--BUTTON-COLOR);
    box-shadow: var(--SHADOW-SMALL__TL) purple;
}

#contact-main__content button:is(:hover, :focus) {
    -webkit-filter: brightness(1.3);
    filter: brightness(1.3);
}

#contact-main__content button:active {
    -webkit-filter: brightness(1.5);
    filter: brightness(1.5);
}


/* ========== MESSAGE PAGE ========== */

#message-main {
    margin-top: 20vh;
    min-height: 80vh;
    background: url('images/bg__thanks.jpg') center / cover no-repeat fixed;
}

#message-main__content {
    min-height: 80vh;
    background: var(--BG-TRANSPARENT__DARK);
    padding: var(--SPACING-MEDIUM);
    width: 100%;
    margin: auto;
}

#message-main__content h1 {
    color: orange;
    font-size: var(--FS-MEDIUM);
}

#message-main__content p {
    color: var(--FONT-COLOR);
    font-size: var(--FS-SMALL);
    font-family: var(--FF-LEMON);
    line-height: var(--SPACING-LARGE);
    margin: var(--SPACING-LARGE) 0;
}

#message-main__content a {
    display: block;
    width: 100%;
    margin: auto;
}

#message-main__content button {
    width: 100%;
    height: 100%;
    padding: var(--SPACING-SMALL);
    border-radius: var(--BORDER-RADIUS__SMALL);
    border: none;
    font-family: var(--FF);
    font-size: var(--FS);
    background-color: var(--BUTTON-BG);
    color: var(--BUTTON-COLOR);
    box-shadow: var(--SHADOW-SMALL__TL) purple;
}

#message-main__content button:is(:hover, :focus) {
    -webkit-filter: brightness(1.3);
    filter: brightness(1.3);
}

#message-main__content button:active {
    -webkit-filter: brightness(1.5);
    filter: brightness(1.5);
}


/* ========== RESPONSIVE LAYOUT ========== */

@media only screen and (max-height: 550px) {
    header {
        height: 30vh;
    }

    .main__options,
    .main__category,
    .food-item,
    #main-thanks,
    #about-main,
    #contact-main,
    #message-main {
        margin-top: 30vh;
        min-height: 70vh;
    }
}

@media only screen and (min-width: 576px) {

    /* ========== HEADER ========== */

    .header-logo {
        -moz-column-gap: var(--SPACING-SMALL);
        column-gap: var(--SPACING-SMALL);
    }

    .header-logo__img {
        margin-left: var(--SPACING-MEDIUM);
    }

    header h1 {
        font-size: var(--FS-LARGE);
    }

    .header-tabs {
        padding: var(--SPACING-SMALL);
        -moz-column-gap: var(--SPACING-LARGE);
        column-gap: var(--SPACING-LARGE);
    }

    .header-tabs a {
        font-size: var(--FS);
    }

    .header-list {
        font-size: var(--FS-MEDIUM);
        top: var(--SPACING-MEDIUM);
    }

    header section {
        width: 70%;
    }

    .close__header_menu {
        font-size: var(--FS-MEDIUM);
        top: var(--SPACING-MEDIUM);
    }

    .header__section-content {
        padding: var(--SPACING-SMALL);
    }

    .header__menu-items--options-items img {
        width: 15em;
    }


    /* ========== HOME PAGE ========== */

    #home-hero h1 {
        font-size: var(--FS-LARGER);
    }

    #home-hero a {
        font-size: var(--FS-LARGE);
    }

    .title {
        font-size: var(--FS-LARGER);
    }

    .main__options--content a {
        font-size: var(--FS-MEDIUM);
    }

    .main__category-container>h1 {
        font-size: var(--FS__LARGER);
    }

    .main__category-container>h2 {
        font-size: var(--FS-LARGE);
    }

    .main__category-container>h3 {
        font-size: var(--FS-MEDIUM);
    }

    .individual-food-item-card {
        width: 60%;
    }

    .individual-food-item-card h2 {
        font-size: var(--FS-LARGE);
    }

    .individual-food-item-card p:nth-child(2) {
        font-size: var(--FS-MEDIUM);
    }

    .individual-food-item-card p:nth-child(3) {
        font-size: var(--FS-SMALL);
    }

    #thanks-content h1,
    #message-main__content h1 {
        font-size: var(--FS__X-LARGE);
    }

    #thanks-content p,
    #message-main__content p {
        font-size: clamp(var(--FS-MEDIUM), var(--FS), var(--FS-LARGE));
    }

    #about-main__content h1,
    #contact-main__content h1 {
        font-size: var(--FS__LARGER);
    }

    #about-main__content h2,
    #contact-main__content h2 {
        font-size: var(--FS-LARGE);
    }

    #contact-main__content li {
        font-size: clamp(var(--FS-MEDIUM), var(--FS), var(--FS-LARGE));
    }
}

@media only screen and (min-width: 768px) {

    /* ========== HEADER ========== */

    .back-arrow i {
        font-size: var(--FS-MEDIUM);
    }

    .header-logo {
        width: 60%;
    }

    header h1 {
        font-size: var(--FS__LARGER);
    }

    .header-tabs {
        width: 40%;
    }

    header section {
        width: 60%;
    }

    .header__section-content a {
        font-size: var(--FS-MEDIUM);
    }

    #home-hero h1 {
        font-size: var(--FS__X-LARGE);
    }

    /* ========== CATEGORIES ========== */

    .main__category-container>h1 {
        font-size: var(--FS-LARGER);
    }

    .main__category-container>h2 {
        font-size: var(--FS__LARGER);
    }

    .main__category-container>h3 {
        font-size: var(--FS-LARGE);
    }

    .individual-food-items {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        -moz-column-gap: 10%;
        column-gap: 10%;
    }

    .individual-food-item-card {
        width: 45%;
    }

    .individual-food-item-card__text {
        row-gap: var(--SPACING-SMALL);
    }

    .individual-food-item-card a {
        height: 29em;
    }


    /* Individual food Pages??? */

    .food-item__content,
    #thanks-content,
    #message-main__content {
        width: 80%;
    }

    #about-main__content h1,
    #contact-main__content h1 {
        font-size: var(--FS-LARGER);
    }

    #about-main__content h2,
    #contact-main__content h2 {
        font-size: var(--FS__LARGER);
    }

    #contact-main__content input {
        width: 80%;
    }

    #contact-main__content button {
        width: 80%;
        margin-left: 20%;
    }

    #message-main__content a {
        width: 80%;
    }
}

@media only screen and (min-width: 992px) {

    /* ========== HEADER ========== */

    header h1 {
        font-size: var(--FS-LARGER);
        letter-spacing: .1em;
    }

    header section {
        width: 50%;
    }


    /* ========== MENU ========== */

    .main-menu,
    .header__menu-items--options,
    .meals {
        margin-left: var(--SPACING-LARGE);
    }

    .main__options {
        padding-left: 5em;
    }

    /* ========== CATEGORIES ========== */

    .main__category-container {
        padding: var(--SPACING-MEDIUM) 2em;
    }

    .main__category-container>h1 {
        font-size: var(--FS__X-LARGE);
    }

    .main__category-container>h2 {
        font-size: var(--FS-LARGER);
    }

    .main__category-container>h3 {
        font-size: var(--FS__LARGER);
    }

    .individual-food-items {
        -moz-column-gap: 5%;
        column-gap: 5%;
    }

    .individual-food-item-card {
        width: 30%;
    }


    /* =========== THANK YOU PAGE ========== */

    #thanks-content__buttons {
        flex-direction: row;
        justify-content: space-evenly;
    }

    #thanks-content__buttons a {
        width: 40%;
    }


    /* ========== ABOUT AND CONTACT ========== */

    #about-main__content h1,
    #contact-main__content h1 {
        font-size: var(--FS__X-LARGE);
    }

    #about-main__content h2,
    #contact-main__content h2 {
        font-size: var(--FS-LARGER);
    }

    #contact-main__content input {
        width: 60%;
    }

    #contact-main__content textarea {
        width: 80%;
    }

    #contact-main__content button {
        width: 60%;
        margin-left: 40%;
    }

    #message-main__content a {
        width: 60%;
    }
}

@media only screen and (min-width: 1200px) {

    /* ========== HEADER ========== */

    header h1 {
        font-size: var(--FS__X-LARGE);
    }

    .header-tabs a {
        font-size: var(--FS-MEDIUM);
    }

    .header-tabs p {
        display: inline;
    }

    header section {
        width: 40%;
    }

    /* ========== MENU ========== */

    .main-menu,
    .header__menu-items--options,
    .meals {
        margin-left: 2.5em;
    }


    /* ========== CATEGORIES ========== */
    .main__category-container {
        padding: var(--SPACING-MEDIUM) var(--SPACING-LARGEST);
    }

    .individual-food-items {
        -moz-column-gap: 4%;
        column-gap: 4%;
    }

    .individual-food-item-card {
        width: 22%;
    }

    .food-item__content,
    #thanks-content,
    #message-main__content {
        width: 60%;
    }


    /* ========== CONTACT PAGE ========== */

    #contact-main__content input {
        width: 40%;
    }

    #contact-main__content textarea {
        width: 100%;
    }

    #contact-main__content button {
        width: 40%;
        margin-left: 60%;
    }


    /* ========== MESSAGE PAGE ========== */

    #message-main__content a {
        width: 40%;
    }
}

@media only screen and (min-width: 1400px) {

    /* ========== HEADER ========== */

    header section {
        width: 30%;
    }


    /* ========== CATEGORIES ========== */

    .individual-food-items {
        -moz-column-gap: 2.5%;
        column-gap: 2.5%;
    }

    .individual-food-item-card {
        width: 18%;
    }

    .food-item__content,
    #thanks-content,
    #message-main__content {
        width: 50%;
    }
}