/* Body */
body {
    font-family: 'Caveat', cursive;
    background-repeat: no-repeat;
    background-image: url("images/background.png");
    /* https://pixabay.com/photos/abundance-baked-bakery-bread-1868573/ */
    background-position: top, calc(50% - 1251px);
    background-color: black;
    color: black;
    margin: 0;
}

.container {
    /*background-color: white;*/
    background-image: url("images/straws_@2X.png");
    background-repeat: repeat;
    width: 64em;
    margin: 0 auto 0;
    padding: 3em 1.6em 0 1.6em;
    border-width: 0 0.4em 0 0.4em;
    border-color: #4e9843;
    border-style: solid;
}

/* Headings, paragraphs, text styles */

/* main headings */
h1 {
    font-size: 3.4em;
    margin-bottom: 0.9em;
}

/* main info section headings */
h2 {
    font-size: 3.5em;
    margin-top: 0.6em;
    margin-bottom: 0.3em;
}

/* menu and specials headings */
h3 {
    font-size: 2.5em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* main info section content */
h4 {
    font-size: 1.8em;
    font-family: "Segoe Print", cursive;

}

/* main info section content small */
h5 {
    font-size: 1.5em;
    font-family: "Segoe Print", cursive;
    margin-top: 1.5em;
}

/* paragraph text */
p {
    font-family: "Segoe Print", cursive;
    font-size: 1.25em;
    font-weight: bolder;
    margin-top: 1em;
}

@media screen and (max-width: 600px) {
    #home-page-image {
        display: none;
    }

    p {
        font-size: 1.8em;
    }

    h1 {
        font-size: 5em;
    }

    h2 {
        font-size: 4em;
    }

    h3 {
        font-size: 4.7em;
    }

    h5 {
        margin-top: 0.5em;
    }
}

.green {
    color: #4e9843;
}

.orange {
    color: #ff9933;
}

.pink {
    color: #DE4097;
}

.double-strikethrough {
    text-decoration: line-through;
    text-decoration-style: double;
}

.opening-hours {
    text-align: left;
    margin-left: 1.25em;
}

a.text-link {
    text-decoration: none;
    color: #ff9933;
}

/* Images */
.logo {
    float: left;
    width: 11.25em;
    height: 11.25em;
}

/* Image in the Information Panel */
.info-image {
    float: right;
    margin-left: 2em;
    margin-bottom: 4.7em;
    height: 24em;
    width: 16em;
    border: 0.25em solid #4e9843;
}

.large-image {
    margin: 0 3.4em;
    width: 56.6em;
    border: 0.3em solid #DE4097;
}

@media screen and (max-width: 600px) {
    .info-image {
        display: none;
        /*height: 12em;*/
        /*width: 8em;*/
    }
}

.menu-image {
    width: 22.5em;
    height: 22.5em;
}

/* Float left, right */
.float-left {
    float: left;
}

.float-right {
    float: right;
}

/* NAVIGATION BAR */
.header {
    height: 11.25em;
    width: 58em;
    margin: auto;
    /*width: fit-content;*/
}

/* Nav Buttons */
.nav-button-container {
    float: right;
    left: 0;
    margin-top: 4em;
    width: fit-content;
    height: 3.4em;
}

ul.navbar {
    list-style-type: none;
    margin: 0;
    padding-left: 0;
}

.header li {
    float: left;
    margin-left: 1.25em;

}

#home-button {
    margin-left: 2.5em;
}

/* Nav Button Text */
li a.navbar-text {
    display: block;
    text-align: center;
    padding: 0.5em 0.3em;
    width: 5.3em;
    background-image: linear-gradient(#4e9843, #2e5927);
    color: white;
    font-weight: bolder;
    font-size: 1.31em;
    text-decoration: none;
}

li a:hover.navbar-text {
    background-image: linear-gradient(#4e9843, #7cc171);
}

#active {
    background-image: linear-gradient(#4e9843, #7cc171);
}

/* Footer */
.footer {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 6.25em;
    background-image: linear-gradient(#4e9843, #2e5927);
    border-radius: 3em 3em 0 0;
}

/* Footer Navigation Bar */
.footer-nav {
    float: left;
    margin-top: 2.3em;
    margin-left: 0.5em;
    height: 3em;
}

.footer li {
    float: left;
}

li a.footer-navbar-text {
    margin-left: 1.2em;
    font-size: 1.45em;
    color: white;
    font-weight: bolder;
    text-decoration: none;
}

li a:hover.footer-navbar-text {
    color: #ff9933;
}

/* Footer Info */
.footer-info {
    width: 30em;
    margin-top: 0.78em;
    margin-right: 1.8em;
    float: right;
}

.footer-info-column {
    text-align: center;
    width: 9.8em;
    float: right;
}

.footer-info-text {
    font-family: 'Caveat', cursive;
    font-size: 1.5em;
    color: white;
    line-height: 1.1em;
    letter-spacing: 0.06em;
    margin-top: 0;
    margin-bottom: 0;
}

/* Main Information Panels */
.info-top,
.info-bottom {
    margin: 4.7em auto 4.7em auto;
    width: 56.6em;
}

.info-bottom {
    height: 22.5em;
}

#info-bottom-larger {
    height: 27.1em;
}

/* Info Columns (dotted border) */
.left-column,
.right-column {
    text-align: center;
    border: 0.4em dotted #2c2e38;
    width: 23.4em;
    height: 20.5em;
    padding: 0 1.25em 1.25em 1.25em;
}

.left-column-longer,
.right-column-longer {
    text-align: center;
    border: 0.4em dotted #2c2e38;
    width: 23.4em;
    height: 25em;
    padding: 0 1.25em 1.25em 1.25em;
}

.left-column,
.left-column-longer {
    float: left;
}

.right-column,
.right-column-longer {
    float: right;
}

/* Customer Comments */
.comments {
    margin: 4.7em auto 4.7em auto;
    width: 56.6em;
}

/* "Click Here" text */
.click-here-message {
    margin-top: 2em;
    font-weight: normal;
    font-size: 1.5em;
    font-family: 'Caveat', cursive;
}

/* Food Menu */
.menu-container {
    margin: 4.7em auto 4.7em auto;
    width: 56.6em;
    height: 150em;
}

@media screen and (max-width: 600px) {
    .menu-container {
        height: 207em;
    }
}

/* Menu items */
.menu-item-left,
.menu-item-right {
    text-align: left;
    width: 22.5em;
    border-style: dotted;
    border-width: 0.3em;
    border-color: #2c2e38;
    padding: 1.25em 1.25em 0;
    margin-top: 4.7em;
    margin-bottom: 0;
}

.menu-item-left {
    float: left;
}

.menu-item-right {
    float: right;
}

/* Specials */
.specials-container {
    margin: 4.7em auto 4.7em auto;
    width: 56.6em;
}

.special-left,
.special-right {
    text-align: center;
    width: 10.6em;
    margin-top: 4.7em;
    margin-bottom: 4.7em;
    padding: 0.6em;
    border-style: dotted;
    border-width: 0.3em;
    border-color: #2c2e38;
}

.special-left {
    float: left;
    margin-left: 2.3em;
}

.special-right {
    float: right;
    margin-right: 2.3em;
}

.special-image {
    width: 10.625em;
    height: 10.625em;
}

#special-far-left {
    margin-left: 0;
}

#special-far-right {
    margin-right: 0;
}

.special-new-price {
    margin-top: 0;
    margin-bottom: 0.3em;
    color: #ff9933;
}

#signup-message {
    text-align: center;
}

/* Increases the size of menu items for small screens */
@media screen and (max-width: 600px) {

    .special-left,
    .special-right {
        width: 24.5em;
        border-width: 0.5em;
    }

    .special-image {
        width: 24.5em;
        height: 24.5em;
    }
}

/* Sign-up Form */
.form-container {
    width: 56.6em;
    margin: 4.7em auto;
}

/* Labels */
label {
    font-size: 1.25em;
    font-family: 'Segoe Print', cursive;
    font-weight: bolder;
}

/* Input Boxes */
.name-input {
    width: 7.5em;
    height: 1.5em;
    margin-right: 1em;
    margin-bottom: 1em;
    font-size: 1.25em;
}

.email-input {
    width: 15em;
    height: 1.5em;
    margin-right: 1em;
    margin-bottom: 1em;
    font-size: 1.25em;
}

.number-input {
    width: 3.5em;
    height: 1.5em;
    margin-right: 1em;
    margin-bottom: 1em;
    font-size: 1.25em;
}

.checkbox-input {
    height: 1em;
    width: 1em;
    margin-right: 0.5em;
    margin-bottom: 1em;
    font-size: 1.25em;
}

.form-button {
    text-align: center;
    padding: 0.27em 0.3em;
    width: 5.3em;
    background-image: linear-gradient(#4e9843, #2e5927);
    color: white;
    font-weight: bolder;
    font-size: 1.31em;
    text-decoration: none;
    border: 0;
    font-family: "Segoe Print", cursive;
}

#reset-button {
    margin-left: 0.8em;
}

.form-button:hover {
    background-image: linear-gradient(#4e9843, #7cc171);
}

.form-button:focus {
    outline: 0;
}

.error-message {
    color: red;
    font-size: 1em;
    font-weight: normal;
    display: none;
    margin: 0;
}