html {
    height: 100%;
}
/* Background image styling */
.background {
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    margin: 0;
    height: 100%;
}
/* background images for content pages (currently all the same image, may change) */
.home-background {
    background-image: url('images/homepage-background.png');
}
.menu-background {
    background-image: url('menu/images/bamboo-mat-3.jpg');
}
.reservation-background {
    background-image: url('menu/images/bamboo-mat-3.jpg')
}
.catering-background {
    background-image: url('menu/images/bamboo-mat-3.jpg')
}
.offers-background {
    background-image: url('menu/images/bamboo-mat-3.jpg')
}
.about-background {
    background-image: url('menu/images/bamboo-mat-3.jpg')
}
/* Film Layer over background to dim the color */
.dimmer {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .4);
}
/* Block the logo will sit in */
.logo-banner {
    background-color: rgba(0, 0, 0, .8);
    width: 35%;
    position: absolute;
    top: 60%;
    right: 0;
    padding-right: 100px;
}
/* Style for the logo image to go in the logo-banner block */
.logo-banner > img {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
}
/* Panel behind/containing the navigation menu */
.navigation-panel {
    background-color: rgba(0, 0, 0, .8);
    width: 15%;
    height: 100%;
    position: absolute;
    left: 0;
    overflow: auto;
}
/* Class to use when an image is to be centered */
.center-align-image {
    display: flex;
}
/* Applying the center alignment to the logo symbol */
.center-align-image > img {
    margin-left: auto;
    margin-right: auto;
}
/* Styling the logo symbol */
.logo-symbol {
    width: 110px;
    height: 110px;
    padding-top: 20px;
}
/* This and the next three classes style the nav links on the homepage*/
.navigation-page-links {
    list-style-type: none;
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto; 
    padding: 0;
}
.navigation-page-links > * {
    display: block;
    margin: 2%;
}
.sitemap-link {
    text-decoration: none;
    font-family: 'Alegreya SC';
    font-size: 15px;
    color: rgb(138, 140, 143);
}
.sitemap-link:hover{
    color: antiquewhite;
}

.sitemap {
    position: fixed;
    bottom: 1px;
    color: white;
    width:100%;
}

.navigation-page-links > * a {
    text-decoration: none;
    font-family: 'Alegreya SC';
    font-size: 20px;
    color: rgb(138, 140, 143);
}
.navigation-page-links > * a:hover {
    color: antiquewhite;
}
.list-container {
    display: flex;
}
/* Style for the links that lead to external sites */
.external-links {
    display: flex;
    list-style: none;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}
.external-links > li a img {
    width: 40px;
}
/* Generic classes to center-align elements */
.center-align {
    display: flex;
}
.center-align > * {
    margin-left: auto;
    margin-right: auto;
}
/* Style for the simple text in the nav panel on the homepage */
.nav-menu-center-text {
    list-style-type: none;
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 0;
    text-decoration: none;
    font-family: 'Alegreya SC';
    font-size: 20px;
    color: rgb(138, 140, 143);
}
/* Style for copyright info */
.copyright {
    position: absolute;
    width: 100%;
    bottom: 0;
    text-align: center;
    text-decoration: none;
    font-family: 'Alegreya SC';
    font-size: 15px;
    color: rgb(138, 140, 143);
}
/* Styling for the lines breaking up elements */
hr {
    margin-left: 35%;
    margin-right: 35%;
    border-color: rgb(138, 140, 143);
}
/* Stlye for the backdrop to the content pages */
.content-block {
    background-color: rgba(0, 0, 0, .9);
    width: 60%;
    height: calc(100% - 70px);
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
}
/* Style for the horizontal nav menu on content pages */
.nav-menu-container {
    background-color: black;
    width: 60%;
    margin-left: 20%;
}
/* Style for the horizontal nav menu on content pages */
.content-nav-menu {
    display: flex;
    height: 70px;
    background-color: black;
}
/* Style for the horizontal nav menu on content pages */
.content-nav-menu > a {
    text-decoration: none;
    font-family: 'Alegreya SC';
    font-size: 20px;
    color: rgb(138, 140, 143);
    margin: 20px;
}
/* Style for the horizontal nav menu on content pages */
.content-nav-menu > a:hover {
   color: antiquewhite;
}
/* Style for the horizontal nav menu on content pages */
.content-nav-menu > a:first-child {
   margin-left: auto;
}
/* Style for the horizontal nav menu on content pages */
.content-nav-menu > a:last-child {
   margin-right: auto;
}
/* Style for image on the about us page */
.restaurant-image {
    height: 282px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
    margin-bottom: 50px;
}
/* General us class that adds padding to space around text */
.text-wrapper {
    padding-left: 150px;
    padding-right: 150px;
}
/* Specifications for h1 font */
h1 {
    font-family: 'Alegreya SC';
    color: rgb(138, 140, 143);
}
/* Specifications for h2 font */
h2 {
    font-family: 'Alegreya SC';
    color: rgb(138, 140, 143);
}
/* Specifications for h3 font */
h3 {
    font-family: 'Alegreya SC';
    color: rgb(138, 140, 143);
    font-size: 20px;
}
/* Specifications for h4 font */
h4 {
    font-family: 'Alegreya SC';
    color: rgb(138, 140, 143);
    font-size: 20px;
}
/* Specifications for p element font */
p {
    font-family: 'Alegreya';
    color: rgb(138, 140, 143);
    font-size: 18px;
    margin-bottom: 25px;
}
/* Style for the image on the catering page */
.catering-image {
    width: 630px;
    height: 340px;
    margin: 25px;
}
/* Style for the image on the offers page */
.happy-hour-image {
    width: 390 px;
    height: 200px;
    margin-top: 30px;
    margin-left: 80px;
    margin-bottom: 30px;
}
/* General use class for centering text and spacing it from other elements */
.text-padding {
    padding-left: 150px;
    padding-right: 150px;
    text-align: center;
}
/* Style for the button on the catering page */
.button {
    text-decoration: none;
    font-family: 'Alegreya SC';
    font-size: 20px;
    color: black;
    background-color: rgb(138, 140, 143);
    padding: 10px;
    border-radius: 2px;
}
.button:hover {
    background-color: rgb(255, 255, 255)
}
/* General use class for centering non-text elements */
.align {
    display: flex;
}
/* General use class for aligning elements horizontally */
.vertical-align {
    padding-top: 7%;
}
/* Style for the labels used on the reservations page */
label {
    font-family: 'Alegreya SC';
    font-size: 20px;
    color: rgb(138, 140, 143);
    float: left;
    margin-bottom: 15px;
    margin-top: 15px;
}
/* Style for the label element of the accordion menu */
.accordion-label {
    float: none;
    font-size: 25px;
}
/* Style for the header element of the accordion menu */
.accordion-header {
    width: 100%;
    background-color: rgba(255, 255, 255, .1);
}
.accordion-header:hover {
    background-color: rgba(255, 255, 255, .3)
}
.accordion-header:hover > * {
    color: black;
}
/* Set the input fields on the reservations page to the right */
input {
    float: right;
}
/* Set the width of the form containing the input fields */
form {
    width: 20%;
}
/* Set the button on the reservations page */
button {
    margin: 30px;
    border: none;
}
/* set the size of the picture in the entree section of the menu */
.entree-image {
    height: 250px;
}
/* set the size of the picture in the lunch section of the menu */
.lunch-image {
    width: 200px;
}
/* set the size of the picture in the dessert section of the menu */
.dessert-image {
    height: 250px;
}
/* set the size of the picture in the catering section of the menu */
.menu-catering-image {
    width: 350px;
    height: 250px;
}
/* Hide the checkbox element for the accordion menu */
input[type=checkbox] {
    display: none;
}
/* Show the accordion tab content when clicked */
input:checked ~ .tab-content {
    max-height: 900px;
}
/* Hide the tab content when not checked */
.tab-content {
    overflow: hidden;
    max-height: 0;
    text-align: center;
}
/* General use class to give set the full width of an element */
.full-width {
    width: 100%;
}
.adjust-font {
    font-size: 30px !important;
}
/* edits the text size when teh screen resolution is smaller */
@media(max-width: 1400px) {
    .navigation-page-links > * a {
    text-decoration: none;
    font-family: 'Alegreya SC';
    font-size: 15px;
    color: rgb(138, 140, 143);
    }
    .nav-menu-center-text {
    list-style-type: none;
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 0;
    text-decoration: none;
    font-family: 'Alegreya SC';
    font-size: 15px;
    color: rgb(138, 140, 143);
    }
    .copyright {
    position: unset;
    width: 100%;
    bottom: 0;
    text-align: center;
    text-decoration: none;
    font-family: 'Alegreya SC';
    font-size: 10px;
    color: rgb(138, 140, 143);
    }
    .logo-symbol {
    width: 100px;
    height: 100px;
    padding-top: 20px;
    }
    .content-nav-menu > a {
    text-decoration: none;
    font-family: 'Alegreya SC';
    font-size: 15px;
    color: rgb(138, 140, 143);
    margin: 20px;
    }
    h3 {
    font-family: 'Alegreya SC';
    color: rgb(138, 140, 143);
    font-size: 15px;
    }
    .catering-image {
    width: 430px;
    height: 140px;
    margin: 25px;
    }
.happy-hour-image {
    width: 310 px;
    height: 120px;
    margin-top: 30px;
    margin-left: 80px;
    margin-bottom: 30px;
    }
}