* {
    font-family: 'Noto Sans', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}

body {
    margin: 0;
    background-color: #603815;
}

a {
    color: #FFFFFF;
    text-decoration: none;
}

p {
    font-size: large;
}

img {
    max-width: 100%;
}

.container {
    display: grid;
    grid-template-areas:
            "header"
            "main"
            "footer";
    width: 100%;
    min-height: 100vh;
    grid-template-rows: auto 1fr auto;
    background-color: #EB9D9D;
}

header {
    padding-top: 0.5em;
    padding-bottom: 1em;
    grid-area: header;
    display: grid;
    grid-template-areas: "title"
                            "nav";
    grid-template-rows: 1fr 1fr;
    background: linear-gradient(to bottom, #EB9D9D 60%, #FFEBCD);
}

.title {
    grid-area: title;
    display: flex;
    justify-content: center;
    align-items: center;
}

.title h1 {
    align-self: center;
}

#logo {
    width: 100px;
    flex-shrink: 0;
}

.title>h1 {
    flex: 1;
    text-align: center;
}

nav {
    grid-area: nav;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75em;
}

.nav-link {
    text-decoration: none;
    color: #603815;
    transition: color 0.75s ease-in-out;
    font-size: small;
}

.nav-link:hover {
    color: #FFEBCD;
    transition: color 0.25s ease-in-out;
}

.nav-link:active {
    color: #FFFFFF;
}

#current {
    font-weight: bold;
}

.button-link {
    border: none;
    background-color: #603815;
    border-radius: 7px;
    padding: 7px;
    color: #FFEBCD;
    transition: background-color 0.75s ease-in-out;
}

.button-link:hover {
    background-color: #734319;
    transition: background-color 0.25s ease-in-out;
}

.button-link:active {
    color: #FFD08A;
    background-color: #864E1D;
}

main {
    grid-area: main;
    padding: 1em;
    background-color: #FFEBCD;
    overflow-x: hidden;
}

#menu-button>a {
    display: block;
    color: #FFEBCD;
}

#menu-button {
    text-align: center;
    background-color: #603815;
    border-radius: 7px;
    padding: 1em;
    transition: background-color 0.75s ease-in-out;
}

#menu-button:hover {
    background-color: #734319;
    transition: background-color 0.25s ease-in-out;
}

#menu-button:active {
    color: #FFD08A;
    background-color: #864E1D;
}

p a {
    color: #da7a8f;
}

iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

footer {
    padding-top: 1em;
    padding-bottom: 1em;
    grid-area: footer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;
    background-color: #603815;
    color: #BFBEBE;
}

footer p {
    margin-bottom: 0;
}

.social-logo {
    width: 20px;
    margin-right: 1em;
    margin-left: 1em;
}

.cake-gallery {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    gap: 1em;
}

.cake-gallery img {
    max-width: 90vw;
    object-fit: cover;
}

.red {
    color: #FF0000;
}

fieldset {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
    width: fit-content;
    margin-bottom: 1.5em;
}

legend {
    font-weight: bold;
}

.contact-info label, .contact-section label {
    display: block;
    margin-bottom: 1em;
}

.contact-info input {
    width: 15em;
}

fieldset h4 {
    margin-bottom: 0;
    margin-top: 0;
}

.select-section label {
    display: block;
    margin-bottom: 1em;
}

.hours-table {
    overflow-x: auto;
    width: 100%;
    scrollbar-color: #EB9D9D #FFEBCD;
}

table {
    margin-right: auto;
    margin-left: auto;
    border-collapse: collapse;
}

td, th {
    border: 1px solid #000000;
    text-align: left;
    padding: 0.5em;
    white-space: nowrap;
}

tbody tr:nth-child(odd) {
    background-color: #603815;
    color: #FFFFFF;
}

#day-column {
    width: 20%;
}

#hours-column {
    width: 60%;
}

#info-column {
    width: 20%;
}

.hours-table::-webkit-scrollbar-track {
    background-color: #EB9D9D;
}


textarea {
    width: 100%;
    height: 10em;
}

hr {
    margin: 2em 0;
}

#contact-right a {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.menu-section a {
    background-color: #ead7bc;
    display: inline-flex;
    flex: 1;
    margin-bottom: 2em;
}

.menu-section figure {
    margin: 0;
    width: 100%;
}

.menu-section figcaption {
    margin-left: 0.5em;
    margin-right: 0.5em;
    display: flex;
    justify-content: space-between;
    color: #000000;
}

.menu-section img {
    vertical-align: bottom;
    height: 20em;
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.menu-section figure:hover img {
    transform: scale(1.2);
}

.menu-image {
    overflow: hidden;
}

.back-arrow a {
    color: #000000;
}

.back-arrow img {
    vertical-align: center;
}

.menu-item-info div {
    flex: 1;
}

.item-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.item-details>p {
    margin-bottom: 0.15em;
}

@media only screen and (min-width: 576px) {
    html {
        overscroll-behavior: none;
    }

    img {
        max-width: 100%;
    }

    header {
        grid-template-areas: "title nav";
        grid-template-columns: 2fr 1fr;
        grid-template-rows: auto;
        padding-top: 1em;
        padding-bottom: 2em;
    }

    .title {
        grid-area: title;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 50px;
    }

    .nav-link {
        font-size: medium;
    }

    iframe {
        width: 75vw;
    }

    .cake-gallery {
        display: flex;
        flex-direction: row;
    }

    .cake-gallery img {
        max-width: 30vw;
    }

    .custom-form {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        column-gap: 5em;
    }

    fieldset {
        flex: 1;
    }

    .custom-form button {
        flex-basis: 100%;
        padding: 1em;
    }

    .select-section {
        display: flex;
        gap: 2em;
    }

    .contact-info {
        display: flex;
        gap: 4em;
    }

    .contact-info label, .contact-section label {
        display: flex;
        flex-direction: column;
        margin-bottom: auto;
    }

    table {
        width: 90vw;
    }

    hr {
        margin: 0 2em;
    }

    .contact-section {
        display: flex;
    }

    .contact-map {
        display: block;
        float: left;
        width: 50vw;
    }

    .menu-section {
        display: flex;
        gap: 1em;
    }

    .menu-item-info {
        display: flex;
        gap: 2em;
    }
}