* {
  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;
}

#searchnav input[type="text"] {
  width: 10%;
  margin-right: 45px;
  margin-top: 27px;
  border: 3px solid #0081fa;
}

section {
  max-width: 650px;
  min-width: 650px;
  margin: 0px 0px 0px 370px;
  float: left;
}

/* 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 {
  font-size: 35px;
  color: black;
  text-align: center;
}

h2 {
  font-size: 180%;
  margin: 40px 0px 0px 0px;
}

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

h4 {
  margin: 10px 0px 0px 0px;
  font-size: 130%;
}

.arrowdiv {
  display: flex;
}

.back {
  margin: 19px 0px 0px 5px;
  text-decoration: none;
  font-weight: bold;
  color: #0064C2;
}

.arrow {
  border: solid #0064C2;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

#pickup {
  padding: 0px 0px 0px 20px;
  border: 3px solid black;
}

.contactinformation {
  padding: 0px 0px 0px 20px;
  border: 3px solid black;
  margin: 30px 0px 0px 0px;
}

#address p {
  line-height: 0.7;
}

#time {
  display: flex;
  font-weight: bold;
}

/* Style The Dropdown Button */
.dropbtn2 {
  background-color: #d7eaf9;
  color: black;
  font-size: 16px;
  border: 1px solid black;
  cursor: pointer;
  font-style: italic;
}

/* The container <div> - needed to position the dropdown content */
.dropdown2 {
  position: relative;
  display: inline-block;
  margin: 17px 17px 17px 5px;
}

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

/* Links inside the dropdown */
.dropdown-content2 a {
  color: black;
  padding: 5px 7px;
  text-decoration: none;
  display: block;
  font-weight: normal;
}

/* Change color of dropdown links on hover */
.dropdown-content2 a:hover {
  background-color: #d7eaf9;
}

/* Show the dropdown menu on hover */
.dropdown2:hover .dropdown-content2 {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown2:hover .dropbtn2 {
  background-color: #abd6f7;
}

#orderbutton:active #confirm {
  display: block;
}

#confirm {
  display: none;
  font-weight: bold;
  color: #0064C2;
  margin: 20px 0px 0px 0px;
}

.firstnamebox,
#lastnamebox,
#emailaddressbox,
#phonenumberbox {
  border: 3px solid black;
  margin: -20px 0px 0px 0px;
  height: 30px;
}

.firstnamebox,
#lastnamebox,
#phonenumberbox {
  width: 250px;
}

#emailaddressbox {
  width: 600px;
}

#nameboxes {
  width: 400px;
  display: flex;
  gap: 100px;
}

.myinfo {
  padding: 0px 0px 20px 0px;
}

#paymentboxes {
  width: 400px;
  display: flex;
  gap: 45px;
}

#cvvbox,
#expdatebox {
  border: 3px solid black;
  margin: -20px 0px 0px 0px;
  height: 30px;
  width: 130px;
}

#or {
  text-align: center;
  font-weight: bold;
  font-size: 150%;
}

#payatstore {
  text-decoration: none;
  color: black;
  font-weight: bold;
  background: linear-gradient(
    90deg,
    rgba(233, 177, 111, 1) 0%,
    rgba(238, 228, 174, 1) 53%,
    rgba(233, 177, 111, 1) 100%
  );
  text-align: center;
  border: 3px solid #f4d6ad;
  border-radius: 9px;
  padding: 9px;
  margin: 0px 20px 0px 0px;
  display: flex;
  justify-content: center;
  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;
}

#payatstore:hover {
  background: linear-gradient(
    90deg,
    rgba(237, 195, 144, 0.94) 0%,
    rgba(237, 229, 188, 0.7679446778711485) 53%,
    rgba(237, 195, 144, 0.9360119047619048) 100%
  );
}

#payatstorer:active {
  background: linear-gradient(
    80deg,
    rgba(20, 101, 196, 1) 0%,
    rgba(245, 83, 114, 1) 100%
  );
}

#paybutton {
  margin-top: 15px;
}

.quantity {
  text-align: center;
  font-weight: 700;
  box-shadow: rgba(14, 30, 37, 0.32) 3px 1px 5px 1px;
  border-width: 1px;
}

aside {
  float: right;
  margin: 150px 370px 270px 0px;
  top: 0;
  position: sticky;
}

#orderarea {
  margin-bottom: 70px;
}

.ordersummarytext {
  font-weight: bold;
  font-size: 30px;
  margin: 0px;
}

#summaryheadline {
  display: flex;
  align-items: baseline;
}

#qt {
  margin: 0px 0px 0px 200px;
}

#summary {
  border: 5px double #0081fa;
  padding: 10px 10px 0px 10px;
  width: 500px;
}

#finalcost {
  border: 5px double #0081fa;
  padding: 5px 15px 15px 15px;
}

.summaryitem {
  font-weight: bold;
  padding: 0px 20px 0px 0px;
}

#summaryitem1,
#summaryitem2,
#summaryitem3 {
  margin: 20px 0px 30px 0px;
}

#summaryitem1 {
  padding: 0px 20px 0px 0px;
}

#summaryitem1 .price {
  order: 3;
}

#summaryitem2 {
  padding: 0px 20px 0px 0px;
}

#summaryitem2 .price {
  order: 3;
}

#summaryitem3 {
  padding: 0px 20px 0px 0px;
}

#summaryitem3 .price {
  order: 3;
}

#summary input[type="number"] {
  margin: -55px 0px 0px 416px;
  display: flex;
  position: absolute;
  font-size: 20px;
  width: 50px;
  height: 30px;
  background-color: #f2e0cb;
  order: 2;
}

#summaryitem2 input[type="number"] {
  margin: -80px 0px 0px 416px;
}

#finalcost .ordersummarytext {
  margin: 0px 0px 15px 0px;
}

#carttotal,
#tax,
#ordertotal {
  display: flex;
  justify-content: space-between;
}

.bold {
  font-weight: bold;
}

#placeorder {
  text-decoration: none;
  color: white;
  font-weight: bold;
  background: linear-gradient(
    80deg,
    rgba(20, 101, 196, 1) 0%,
    rgba(245, 83, 114, 1) 100%
  );
  border-radius: 9px;
  padding: 9px 10px;
  align-items: flex-end;
  margin: auto;
  display: flex;
  justify-content: center;
  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;
}

#placeorder:hover {
  background: linear-gradient(
    80deg,
    rgba(20, 101, 196, 0.577468487394958) 0%,
    rgba(245, 83, 114, 0.6138830532212884) 100%
  );
}

#placeorder:active {
  background: linear-gradient(
    80deg,
    rgba(20, 101, 196, 1) 0%,
    rgba(245, 83, 114, 1) 100%
  );
}

#orderbutton {
  margin-top: 15px;
}

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;
}

footer {
  clear: both;
  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;
}

#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: 1150px) {
  #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: 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;
  }

  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;
  }
}