* {
  line-height: 1.5;
  font-size: 18px;
  color: black;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
}

body {
  background-color: #f8f0e8;
  margin: 0;
  padding: 0;
}

/*---TEXT----*/
header {
  text-align: right;
  background-color: #d7eaf9;
  height: 90px;
}

nav a {
  text-decoration: none;
  padding: 0 18px;
  line-height: 90px;
}

nav a:hover {
  background-color: #c5e4fc;
  border-radius: 9px;
  padding: 9px 18px;
}

nav {
  justify-content: space-evenly;
  max-width: 1300px;
  min-width: 800px;
  margin: auto;
}

#home {
  color: #184376;
  font-weight: 700;
  text-decoration: none;
}

.logo {
  max-width: 230px;
  float: left;
  margin: -5px 0px 0px 0px;
}

#order_online {
  color: white;
  background-color: #184376;
  border-radius: 9px;
  padding: 9px 10px;
  margin-left: 15px;
  border-style: outset;
  border-color: white;
  border-width: 3px;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 5px 5px;
}

#order_online:hover {
  background-color: #f593a6;
}

#order_online:active {
  background-color: #184376;
}

/* Style The Dropdown Button */
.dropbtn {
  background-color: #d7eaf9;
  color: black;
  border: none;
  margin: 0px 12px 0px 12px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  text-decoration: none;
  display: flex;
  height: 70px;
  margin: -13px 0px 0px 0px;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #d7eaf9;
  margin: 10px 0px 2px 0px;
  align-items: center;
  height: 45px;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
  padding: 0px 10px 0px 10px;
  height: 180px;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #c5e4fc;
  border-radius: 9px;
  margin: 0px 0px 0px 0px;
  padding: 5px 18px;
}

h1 {
  color: #f0f0f0;
  text-shadow: 0 0 8px #000000, 2px 3px 10px #000000, -1px 0 3px black,
    0 1px 3px black, 1px 0 3px black, 0 -1px 3px black;
  text-align: center;
}

#menu_options {
  height: 510px;
  display: flex;
  flex-wrap: wrap;
}

#kitchen {
  background-image: url("https://i.gyazo.com/db1cc72344a9574246c9c1cd384f8974.png");
  padding: 8vw 0px 0px 0px;
  font-size: calc(9px + 3vw);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 50%;
  height: auto;
}

#fountain {
  background-image: url("https://i.gyazo.com/4b36c577e2425659a7c903c2a74e6397.png");
  padding: 8vw 0px 0px 0px;
  font-size: calc(9px + 3vw);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 50%;
  height: auto;
}

h1 a.get_started {
  display: flex;
  height: 45px;
  width: 130px;
  color: white;
  background-color: #184376;
  border-radius: 9px;
  margin: auto;
  padding: 6px 0 0 0;
  font-size: 17px;
  justify-content: center;
  text-decoration: none;
  text-shadow: none;
  font-weight: normal;
  border-style: outset;
  border-color: white;
  border-width: 3px;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 5px 5px;
}

.get_started:hover {
  background-color: #2c63a3;
}

.get_started:active {
  background-color: #184376;
}

#intro {
  text-align: center;
  background-color: #d7eaf9;
  height: 180px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

#intro_text {
  font-size: 140%;
  font-weight: bold;
}

.twenties {
  font-weight: normal;
  font-style: italic;
  font-family: display;
  font-size: 160%;
  margin: -30px 0px 10px 0px;
  min-width: 800px;
}

#learn_more {
  height: 45px;
  width: 225px;
  color: white;
  font-size: 100%;
  font-weight: normal;
  background-color: #184376;
  border-radius: 9px;
  padding: 6px 0 0 0;
  text-decoration: none;
  border-style: outset;
  border-color: white;
  border-width: 3px;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 5px 5px;
}

#learn_more:hover {
  background-color: #2c63a3;
}

#learn_more:active {
  background-color: #184376;
}

#advert {
  margin: 50px 0px 0px 0px;
  text-align: center;
  background-color: #d7eaf9;
  height: 180px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

#meals {
  font-size: 140%;
  font-weight: bold;
}

#find_us {
  height: 45px;
  width: 100px;
  color: white;
  font-size: 100%;
  font-weight: normal;
  background-color: #184376;
  border-radius: 9px;
  padding: 6px 0 0 0;
  text-decoration: none;
  border-style: outset;
  border-color: white;
  border-width: 3px;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 5px 5px;
}

#find_us:hover {
  background-color: #2c63a3;
}

#find_us:active {
  background-color: #184376;
}

section {
  max-width: 1300px;
  margin: auto;
  display: flex;
  justify-content: space-between;
}

.product_description {
  text-align: center;
  font-size: 120%;
  font-weight: bold;
}

.price {
  text-align: center;
  font-size: 120%;
  margin: -20px 0px 0px 0px;
}

.products {
  margin: 60px 0px 0px 0px;
  width: auto;
  height: 280px;
  border-radius: 60%;
  object-fit: cover;
}

#turtle {
  border-radius: 60%;
  width: 370px;
}

#hotdog {
  border-radius: 60%;
  width: 360px;
  object-fit: cover;
  object-position: 50% 40%;
}

input[type="text"] {
  border: 3px solid #184376;
  color: black;
  height: 38px;
  width: 400px;
  font-size: 90%;
  padding: 5px;
  border-radius: 10px;
  margin: 0px 0px -10px 0px;
}

input[type="submit"] {
  font-size: 95%;
  height: 40px;
  width: 100px;
  margin: -10px 0px 0px 0px;
  color: white;
  background-color: #184376;
  border-radius: 9px;
  border-style: outset;
  border-color: white;
  border-width: 3px;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 5px 5px;
}

input[type="submit"]:hover {
  background-color: #2c63a3;
}

input[type="submit"]:active {
  background-color: #184376;
}

h3 {
  font-size: 130%;
  color: #184376;
}

footer {
  margin: 0px 0px 0px 0px;
}

#hoursandcontact {
  display: flex;
  margin: auto;
  height: 300px;
  justify-content: center;
  background-color: #f5c9d5;
  padding: 20px 0px 20px 0px;
}

#contact {
  margin: 0px 100px 0px 0px;
}

#hours {
  margin: 0px 100px 0px 0px;
}

footer div#hours p {
  line-height: 1;
  font-size: 90%;
}

footer div#contact p {
  line-height: 1;
  font-size: 90%;
}

div #loop p {
  margin: -25px 0px 10px 0px;
  font-size: 70%;
  font-style: italic;
}

input[type="email"] {
  width: 200px;
  height: 40px;
  font-size: 80%;
  border: 3px solid #184376;
  border-radius: 10px 0px 0px 10px;
  padding: 0px 0px 0px 10px;
}

#email {
  display: flex;
}

#email input[type="submit"] {
  width: 85px;
  box-shadow: none;
  border-style: none;
  border-color: none;
  padding: 0px 13px 0px 10px;
  margin: 0px 0px 1px 0px;
  border-radius: 0px 10px 10px 0px;
}

#feedback {
  display: flex;
  margin: -50px 0px 40px 0px;
  text-align: center;
  justify-content: center;
  flex-direction: column;
}

div p.formtext {
  line-height: 0.5;
}

h4 {
  font-size: 180%;
  font-style: italic;
  font-family: display;
  margin: 40px 0px -30px 0px;
}

#contact a {
  text-decoration: none;
}

#media {
  display: flex;
  align-items: center;
}

#facebook {
  width: auto;
  height: 32px;
  object-fit: cover;
}

#instagram {
  width: auto;
  height: 35px;
  object-fit: cover;
  margin: 0px 0px 0px -3px;
}

/*---Browser Resizing Specifications----*/

@media screen and (max-width: 1340px) {
  #intro_text {
    font-size: 130%;
  }

  .twenties {
    font-size: 150%;
  }
}

@media screen and (max-width: 1220px) {
  #intro {
    height: 200px;
  }
}

@media screen and (max-width: 1150px) {
  section {
    display: flex;
    justify-content: space evenly;
    flex-direction: column;
    align-items: center;
  }
  #hoursandcontact {
    padding: 20px 20px 20px 20px;
  }
}

@media screen and (max-width: 1053px) {
  #contact {
    margin: 0px 50px 0px 0px;
  }
  #hours {
    margin: 0px 50px 0px 0px;
    min-width: 145px;
  }
}

@media screen and (max-width: 1000px) {
  #fountain,
  #kitchen {
    display: flex;
    flex-direction: column;
    font-size: 40px;
    width: 100%;
    height: 43%;
  }

  #fountain {
    margin: -46px 0px 0px 0px;
  }
}

@media screen and (max-width: 600px) {
  body {
    max-width: 100%;
    width: 400px;
    margin: auto;
    height: auto;
  }

  nav a {
    display: flex;
    line-height: 40px;
    justify-content: center;
    max-width: 400px;
  }
  header {
    height: 340px;
    width: 400px;
  }
  nav {
    max-width: 400px;
    display: flex;
    flex-direction: column;
  }

  .logo {
    align-self: center;
    margin: -5px 0px 10px -300px;
    max-width: 300px;
  }

  nav a:hover {
    background-color: #c5e4fc;
    border-radius: 9px;
    padding: 0px;
  }

  #order_online {
    color: white;
    background-color: #184376;
    border-radius: 9px;
    padding: 2px 5px 2px 5px;
    max-width: 200px;
    align-self: center;
    margin: 0px 0px 0px -400px;
  }

  #kitchen {
    margin: 20px 0px -30px 0px;
  }

  #menu_options {
    margin: 0px 0px -80px 0px;
  }

  .get_started {
    margin: -5px 0px 0px 0px;
    display: flex;
    padding: 8px 0px 0px 20px;
    text-align: center;
    align-self: center;
  }

  section {
    max-width: 400px;
  }
  .products {
    height: 240px;
    width: 240px;
    margin: 30px 10px 0px 0px;
  }

  #turtle {
    width: 240px;
    height: 240px;
  }

  #hotdog {
    width: 240px;
    height: 240px;
  }

  .product_description {
    font-size: 100%;
  }

  .price {
    font-size: 100%;
  }

  nav :nth-child(1) {
    order: 1;
  }
  nav :nth-child(2) {
    order: 2;
  }
  nav :nth-child(3) {
    order: 3;
  }
  nav :nth-child(4) {
    order: 4;
  }
  nav :nth-child(5) {
    order: 5;
  }

  #contact p {
    display: none;
  }

  div#hours p {
    padding: 0px 0px 0px 80px;
    text-align: center;
  }

  #hoursandcontact {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 350px;
  }

  #media {
    margin: -20px 0px 0px 100px;
  }

  h3 {
    margin: -15px 0px 20px 70px;
  }

  #hours h3 {
    margin: 10px 0px 5px 125px;
  }

  #hours p {
    margin: 10px 0px 10px -25px;
  }

  #loop h3 {
    margin: 10px 0px 30px 50px;
  }

  .twenties {
    font-size: 115%;
  }

  #intro_text {
    margin: 20px 0px 0px 0px;
    font-size: 130%;
  }

  #intro p.twenties {
    margin: 2px 0px 10px 0px;
  }

  #intro {
    height: 280px;
  }
}