@charset "utf-8";

/* Common page formatting */

html {
   background-color: rgb(37, 38, 34);
}

html,
header,
footer {
   background-image: url("images/restaurant-background.png");
   background-repeat: repeat;
}

body {
   font-family: Verdana, Geneva, sans-serif;
   color: rgb(37, 38, 34);
   background-color: ivory;
   width: 90%;
   margin-left: auto;
   margin-right: auto;
   line-height: 1.6em;
}

header {
   background-color: rgb(37, 38, 34);
   color: ivory;
   text-align: center;
   padding: 20px;
}

header img {
   width: 120px;
}

h2 {
   color: maroon;
   font-size: 1.4em;
}

/* Navigation */

nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

nav li {
   display: block;
   width: 33.333%;
   float: left;
}

nav a {
   display: block;
   background-color: maroon;
   color: ivory;
   line-height: 2.8em;
   text-align: center;
   text-decoration: none;
}

nav a:hover {
   background-color: rgb(37, 38, 34);
   color: white;
}

/* Main content and home page image */

main {
   padding: 20px;
   clear: both;
}

main > img {
   width: 40%;
   float: right;
   padding: 10px;
}

main a {
   color: maroon;
}

/* Menu table */

table {
   width: 100%;
   border-collapse: collapse;
   margin-top: 20px;
   margin-bottom: 20px;
}

caption {
   font-size: 1.3em;
   font-weight: bold;
   margin-bottom: 10px;
}

th,
td {
   border: 1px solid gray;
   padding: 10px;
   text-align: left;
}

th {
   background-color: maroon;
   color: ivory;
}

/* Contact form */

fieldset {
   padding: 15px;
   border: 1px solid gray;
}

label {
   display: block;
   margin-top: 10px;
}

input,
select,
textarea {
   display: block;
   box-sizing: border-box;
   width: 100%;
   padding: 8px;
   margin-bottom: 10px;
   font-family: Verdana, Geneva, sans-serif;
   font-size: 1em;
}

textarea {
   height: 100px;
}

input[type="submit"],
input[type="reset"] {
   display: inline;
   width: auto;
   background-color: maroon;
   color: ivory;
}

/* Footer */

footer {
   background-color: rgb(37, 38, 34);
   color: ivory;
   text-align: center;
   font-size: 0.9em;
   padding: 20px;
   clear: both;
}

/* Phone and tablet formatting */

@media only screen and (max-width: 768px) {
   body {
      width: 100%;
      margin: 0;
   }

   nav li {
      width: 100%;
      float: none;
   }

   main > img {
      width: 100%;
      float: none;
      padding: 0;
   }

   th,
   td {
      padding: 6px;
   }
}