body {
  background-color: #FFFFFA;
  margin: 0;
  padding: 0;
  cursor: url('https://cdn.custom-cursor.com/db/cursor/32/Hot_Dog_Cursor.png'), auto;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* NAVBAR */
.sticky {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 3;
} 

a {
  text-decoration: none;
  cursor: url('https://cdn.custom-cursor.com/db/cursor/32/Hot_Dog_Cursor.png'), auto;
}

li {
  list-style: none;
  cursor: url('https://cdn.custom-cursor.com/db/cursor/32/Hot_Dog_Cursor.png'), auto;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background-color: #FFFFFA;
  color: rgba(102, 102, 102);
  box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}

.nav-links a {
  color: rgba(102, 102, 102);
  cursor: url('https://cdn.custom-cursor.com/db/cursor/32/Hot_Dog_Cursor.png'), auto; 
}

/* LOGO */
.logo {
  width: 50%;
  cursor: url('https://cdn.custom-cursor.com/db/cursor/32/Hot_Dog_Cursor.png'), auto;  
}

/* NAVBAR MENU */
.menu {
  display: flex;
  gap: 0.5em;
  font-size: 16px;
}

.menu li:hover, .selected {
  background-color: #feeadc;
  border-radius: 5px;
  transition: 0.3s ease;
  cursor: url('https://cdn.custom-cursor.com/db/cursor/32/Hot_Dog_Cursor.png'), auto;
}

.menu li {
  padding: 16px 40px;
}

/* DROPDOWN MENU */
.services {
  position: relative; 
}

.dropdown {
  background-color: #FFFFFA;
  padding: 1em 0;
  position: absolute; /*WITH RESPECT TO PARENT*/
  display: none;
  border-radius: 8px;
  top: 35px;
}

.dropdown li + li {
  margin-top: 10px;
}

.dropdown li {
  padding: 0.5em 1em;
  width: 8em;
  text-align: center;
}

.dropdown li:hover {
  background-color: #feeadc;
}

.services:hover .dropdown {
  display: block;
}

input[type=checkbox] {
  display: none;
} 

/* HAMBURGER MENU */
.hamburger {
  display: none;
  font-size: 24px;
  user-select: none;
  cursor: url('https://cdn.custom-cursor.com/db/cursor/32/Hot_Dog_Cursor.png'), auto;
  
}

/* APPLYING MEDIA QUERIES */
@media (max-width: 992px) {
 .menu {
    display:none;
    position: absolute;
    background-color:#FFFFFA;
    right: 0;
    left: 0;
    text-align: center;
    padding: 16px 0;
    margin-top: 24px;
  }

  .menu li:hover {
    background-color:#feeadc;
    transition: 0.3s ease;
  }

  .menu li + li {
    margin-top: 12px;
  }

  input[type=checkbox]:checked ~ .menu {
    display: block;
  }

  .hamburger {
    display: block;
  }

  .dropdown {
    left: 50%;
    top: 30px;
    transform: translateX(35%);
  }

  .dropdown li:hover {
    background-color: #feeadc;
  }

  .logo {
    width: 35%;
  }

}
/* END NAVBAR STYLING */


h1 {
  font-family: 'Stardos Stencil', cursive, Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding: 40px 0px 24px 0px;
  margin: 0 auto;
  font-size: 3em;
  color:rgba(250, 99, 4);
  text-align: center;
  width: 80%;
}

h2 {
  font-weight: 100;
  font-size: 1em;
  color:rgba(250, 99, 4);
  padding-top: 8px;
}

.h3 {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 100;
  width: 80%;
  line-height: 1.5em;
  font-weight: bold;
  color:rgba(102, 102, 102);
  margin: 32px 16px 16px 32px;
  padding: 0;
  text-align: left;
}

.paragraph {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1em;
  line-height: 2em;
  padding-bottom: 32px;
  text-align: center;
  width: 60%;
  margin: 0 auto;
  font-weight: 100;
  color:rgba(102, 102, 102);
}

.descriptions {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 100;
  color:#000000;
  width: 80%;
  margin: 0px 16px 32px 32px;
  line-height: 2em;
  text-align: left;
}

section > img {
  width: 10%;
}

/* MENU SQUARES */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
  "dogs dogs dogs"
  "plain-dog coney-dog corn-dog"
  "condiments condiments condiments"
  "onions relish tomatoes"
  "mustard ketchup mayo"
  "drinks drinks drinks"
  "water coke sprite"
  "fanta root-beer minute-maid"
  "sides sides sides"
  "fries plain-chips onion-rings";
  gap: 48px 0;
  justify-items: center;
  margin: 24px 0 0 0;
}

#dogs {
  grid-area: dogs;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 40px 40px 24px 40px;
  font-size: 2em;
  text-align: center;
  color:rgba(102, 102, 102);
}

#plain-dog {
  grid-area: plain-dog;
  width: 85%;
  border: 1px solid #cccccc;
  border-radius: 8px;
  justify-self: flex-end;
}

#coney-dog {
  grid-area: coney-dog;
  width: 85%;
  border: 1px solid #cccccc;
  border-radius: 8px;
}

#corn-dog {
  grid-area: corn-dog;
  width: 85%;
  border: 1px solid #cccccc;
  border-radius: 8px;
  justify-self: flex-start;
}

#condiments {
  grid-area: condiments;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 80px 40px 24px 40px;
  font-size: 2em;
  text-align: center;
  color:rgba(102, 102, 102);
}

#onions {
  grid-area: onions;
  width: 85%;
  border: 1px solid #cccccc;
  border-radius: 8px;
  justify-self: flex-end;
}

#relish {
  grid-area: relish;
  width: 85%;
  border: 1px solid #cccccc;
  border-radius: 8px;
}

#tomatoes {
  grid-area: tomatoes;
  width: 85%;
  border: 1px solid #cccccc;
  border-radius: 8px;
  justify-self: flex-start;
}

#mustard {
  grid-area: mustard;
  width: 85%;
  border: 1px solid #cccccc;
  border-radius: 8px;
  justify-self: flex-end;
}

#ketchup {
  grid-area: ketchup;
  width: 85%;
  border: 1px solid #cccccc;
  border-radius: 8px;
}

#mayo {
  grid-area: mayo;
  width: 85%;
  border: 1px solid #cccccc;
  border-radius: 8px;
  justify-self: flex-start;
}

#drinks {
  grid-area: drinks;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 80px 40px 24px 40px;
  font-size: 2em;
  text-align: center;
  color:rgba(102, 102, 102);
}

#water {
  grid-area: water;
  width: 85%;
  border: 1px solid #cccccc;
  border-radius: 8px;
  justify-self: flex-end;
}

#coke {
  grid-area: coke;
  width: 85%;
  border: 1px solid #cccccc;
  border-radius: 8px;
}

#sprite {
  grid-area: sprite;
  width: 85%;
  border: 1px solid #cccccc;
  border-radius: 8px;
  justify-self: flex-start;
}

#fanta {
  grid-area: fanta;
  width: 85%;
  border: 1px solid #cccccc;
  border-radius: 8px;
  justify-self: flex-end;
}

#root-beer {
  grid-area: root-beer;
  width: 85%;
  border: 1px solid #cccccc;
  border-radius: 8px;
}

#minute-maid {
  grid-area: minute-maid;
  width: 85%;
  border: 1px solid #cccccc;
  border-radius: 8px;
  justify-self: flex-start;
}

#sides {
  grid-area: sides;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 80px 40px 24px 40px;
  font-size: 2em;
  text-align: center;
  color:rgba(102, 102, 102);
}

#fries {
  grid-area: fries;
  width: 85%;
  border: 1px solid #cccccc;
  border-radius: 8px;
  justify-self: flex-end;
}

#plain-chips {
  grid-area: plain-chips;
  width: 85%;
  border: 1px solid #cccccc;
  border-radius: 8px;
}

#onion-rings {
  grid-area: onion-rings;
  width: 85%;
  border: 1px solid #cccccc;
  border-radius: 8px;
  justify-self: flex-start;
}
/* END MENU SQUARES */

@media (max-width: 992px) {
  .container {
    gap: 24px;
    grid-template-columns: 1fr;
    grid-template-areas:
    "dogs"
    "plain-dog"
    "coney-dog"
    "corn-dog"
    "condiments"
    "onions"
    "relish"
    "tomatoes"
    "mustard"
    "ketchup"
    "mayo"
    "drinks"
    "water"
    "coke"
    "sprite"
    "fanta"
    "root-beer"
    "minute-maid"
    "sides"
    "fries"
    "plain-chips"
    "onion-rings";
  }

  #dogs {
    justify-self: center;
  }

  #plain-dog {
    justify-self: center;
  }
  
  #coney-dog {
    justify-self: center;
  }

  #corn-dog {
    justify-self: center;
  }

  #condiments {
    justify-self: center;
  }

  #onions {
    justify-self: center;
  }
  
  #relish {
    justify-self: center;
  }

  #tomatoes {
    justify-self: center;
  }

  #mustard {
    justify-self: center;
  }
  
  #ketchup {
    justify-self: center;
  }

  #mayo {
    justify-self: center;
  }

  #drinks {
    justify-self: center;
  }

  #water {
    justify-self: center;
  }
  
  #coke {
    justify-self: center;
  }

  #sprite {
    justify-self: center;
  }

  #fanta {
    justify-self: center;
  }
  
  #root-beer {
    justify-self: center;
  }

  #minute-maid {
    justify-self: center;
  }

  #sides {
    justify-self: center;
  }

  #fries {
    justify-self: center;
  }
  
  #plain-chips {
    justify-self: center;
  }

  #onion-rings {
    justify-self: center;
  }

  h1 {
    font-size: 2em;
    text-align: left;
  }

  .paragraph {
    text-align: left;
    padding-bottom: 24px;
    width: 80%;
  }
}




/* FOOTER */
footer {
    background-color:#fa6304;
    width:100%;
    margin-top:50px;
    padding: 60px 0;
    text-align: center;
}

.footer-content {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #ffffff;
}
/* END FOOTER */