/* Generated by less 2.5.1 */
/* 
File Name: style.css
Date: 05/28/19
Programmer: Sarah Bayley 
*/
/* Allow this stylesheet to refer to the code in var.less */
/*
File Name: var.less
Date: 05/28/19
Programmer: Sarah Bayley
*/
/* VARIABLES */
/* color palette */
/* font sizes */
/* font families */
/* miscellaneous, repeated values */
/* common box-shadows */
/* MIXINS */
.center {
  text-align: center;
}
/* MOBILE STYLES */
html body {
  /* set darkened background image, fixed in place */
  background: radial-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../images/backgrounds/body-bg.png) fixed;
  color: white;
}
html body #wrapper {
  /* make body background visible through wrapper portions without assigned backgrounds, namely for #order-note under #menu */
  background-color: transparent;
  /* set base size for mobile fonts */
  font-size: 17px;
  font-family: "Lato", sans-serif;
  font-weight: 300;
  /* make invisible for mobile */
}
html body #wrapper .italic {
  font-style: italic;
}
html body #wrapper .tablet-up {
  display: none;
}
html body #wrapper header {
  /* push hero image down */
  padding-top: 115px;
  /* make nav bar and opened nav menu appear to pop out and hover slightly over page elements on scroll */
  /* make logo spin while page scrolls */
  /* let script.js use following darkened background images for hero slides on mobile */
}
html body #wrapper header nav {
  /* make nav bar follow user as they scroll */
  position: fixed;
  width: 100%;
  height: 115px;
  /* push nav bar back up and above hero image */
  margin-top: calc(-115px);
  background-color: #5a0b09;
  background-image: url(../images/backgrounds/texture1.png);
  border-bottom: solid 1px rgba(0, 0, 0, 0.5);
  /* keep nav bar above other elements on page */
  z-index: 5;
  transition: box-shadow 0.3s;
}
html body #wrapper header nav #logo {
  position: absolute;
  top: 30px;
  left: 5px;
  height: 50px;
  width: auto;
  margin: 5px;
  /* make border circular to match logo shape so shadow starts as closely around the design as possible */
  border-radius: 50%;
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.5);
  transition: .8s;
}
html body #wrapper header nav h1 {
  text-align: center;
  height: 115px;
  /* vertically center text in nav bar */
  line-height: calc(57.5px);
  width: 70%;
  /* center h1 on mobile */
  margin: auto;
  color: #e87f09;
  font-family: "Tillana", serif;
  font-size: 2.4em;
  font-variant: all-small-caps;
}
html body #wrapper header nav h1 a {
  color: #e87f09;
}
html body #wrapper header nav #navigation {
  width: 100%;
  height: 115px;
}
html body #wrapper header nav #navigation #hamburger-button {
  position: absolute;
  top: 32px;
  right: 5px;
  width: 50px;
  cursor: pointer;
}
html body #wrapper header nav #navigation #hamburger-button .hamburger-lines {
  width: 38px;
  height: 0;
  margin: 10px auto;
  padding: 0;
  /* form each hamburger line */
  border: solid 1px rgba(255, 255, 255, 0.7);
  /* soften edges of lines */
  border-radius: 10%;
  transition: .3s;
}
html body #wrapper header nav #navigation #hamburger-button .hamburger-x {
  transition: .3s;
  /* turn first line clockwise to form part of x */
  /* turn last line counter-clockwise to form other part of x */
  /* hide middle line */
}
html body #wrapper header nav #navigation #hamburger-button .hamburger-x:first-of-type {
  transform: rotate(45deg);
  transform-origin: 5% 400%;
}
html body #wrapper header nav #navigation #hamburger-button .hamburger-x:last-of-type {
  transform: rotate(-45deg);
  transform-origin: 18% -200%;
}
html body #wrapper header nav #navigation #hamburger-button .hamburger-x:nth-of-type(2) {
  border-color: #5a0b09;
  transition: .2s;
}
html body #wrapper header nav #navigation #navlinks {
  /* space items evenly */
  display: grid;
  position: relative;
  /* hide nav area until menu is opened */
  height: 0;
  width: 100%;
  background-color: black;
  /* hide shadow until menu is opened and page is scolled */
  box-shadow: 0;
  transition: .3s;
  /* hide contents until menu is opened */
  overflow: hidden;
}
html body #wrapper header nav #navigation #navlinks li {
  text-align: center;
  font-size: 1.2em;
  /* make side borders and hover background of every third nav link starting from the first this color */
  /* make side borders and hover background of every third nav link starting from the second this color */
  /* make side borders and hover background of every third nav link starting from the third this color */
}
html body #wrapper header nav #navigation #navlinks li a {
  /* make clickable area for each link fill its navlink area and center itself */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  color: white;
  border-bottom: solid 1px rgba(255, 255, 255, 0.4);
}
html body #wrapper header nav #navigation #navlinks li a:hover {
  transition: .2s;
}
html body #wrapper header nav #navigation #navlinks li:nth-of-type(3n+1) {
  border-left: solid 3px #354d01;
  border-right: solid 3px #354d01;
}
html body #wrapper header nav #navigation #navlinks li:nth-of-type(3n+1) a:hover {
  background-color: #354d01;
}
html body #wrapper header nav #navigation #navlinks li:nth-of-type(3n+2) {
  border-left: solid 3px #e87f09;
  border-right: solid 3px #e87f09;
}
html body #wrapper header nav #navigation #navlinks li:nth-of-type(3n+2) a:hover {
  background-color: #e87f09;
}
html body #wrapper header nav #navigation #navlinks li:nth-of-type(3n+3) {
  border-left: solid 3px #940f06;
  border-right: solid 3px #940f06;
}
html body #wrapper header nav #navigation #navlinks li:nth-of-type(3n+3) a:hover {
  background-color: #940f06;
}
html body #wrapper header nav #navigation .opened-navlinks {
  height: 250px !important;
  transition: .3s !important;
}
html body #wrapper header .nav-shadow {
  box-shadow: 0 6px 3px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.3s;
}
html body #wrapper header .nav-shadow #navigation {
  /* apply shadow to navigation menu when opened */
}
html body #wrapper header .nav-shadow #navigation .opened-navlinks {
  box-shadow: 0 7px 4px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.3s;
}
html body #wrapper header .spin {
  transform: rotate(360deg);
  transition: .8s;
}
html body #wrapper header #hero {
  /* use flex and align-items to center text area vertically over hero image */
  display: flex;
  position: relative;
  align-items: center;
  height: 400px;
  /* display medium dark background color while first hero image loads in */
  background-color: rgba(0, 0, 0, 0.5);
  background-repeat: no-repeat;
  /* resize background image to cover area regardless of screen size */
  background-size: cover;
  font-size: 1.6em;
  /* keep background image above background */
  z-index: 0;
}
html body #wrapper header #hero p {
  text-align: center;
  /* make text area fullwidth so text-align can center text */
  width: 100%;
  /* give text contrast against image */
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8), -2px -2px 3px rgba(0, 0, 0, 0.8), -2px 2px 3px rgba(0, 0, 0, 0.8), 2px -2px 3px rgba(0, 0, 0, 0.8);
}
html body #wrapper header .bg1 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../images/backgrounds/hero1-mobile.jpg);
}
html body #wrapper header .bg2 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../images/backgrounds/hero2-mobile.jpg);
}
html body #wrapper header .bg3 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../images/backgrounds/hero3-mobile.jpg);
}
html body #wrapper main {
  /* make body background visible (when stacked on transparent wrapper) through smain portions without assigned backgrounds, namely for #order-note under #menu */
  background-color: transparent;
  /* main section headings */
  /* order instruction and contact info headings */
  /* food item names and call to action section heading */
  /* basic styles for most sections */
}
html body #wrapper main h2 {
  line-height: 2em;
  text-align: center;
  margin-bottom: 15px;
  background-color: black;
  font-size: 1.75em;
  font-variant: small-caps;
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.6);
}
html body #wrapper main h3 {
  padding: 15px 0;
  font-size: 1.7em;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 2px;
  text-shadow: 1px 1px 2px rgba(20, 20, 20, 0.1), -1px -1px 2px rgba(20, 20, 20, 0.1), -1px 1px 2px rgba(20, 20, 20, 0.1), 1px -1px 2px rgba(20, 20, 20, 0.1);
}
html body #wrapper main h4 {
  padding: 10px;
  font-size: 1.4em;
  text-shadow: 1px 1px 3px #000000, -1px -1px 3px #000000, -1px 1px 3px #000000, 1px -1px 3px #000000;
}
html body #wrapper main .group {
  text-align: center;
  box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, 0.5);
}
html body #wrapper main p {
  /* give all main paragraph lines a little leg room room for legibility */
  line-height: 1.5em;
}
html body #wrapper main #order-note {
  /* give some extra space above and below to let note stand out as its own section */
  padding: calc(67.5px) 15px;
  text-align: center;
}
html body #wrapper main #order-note h4 {
  /* make call to action heading appear more prominently */
  font-size: 1.75em;
  font-family: "Tillana", serif;
  font-weight: 600;
}
html body #wrapper main #order-note p {
  font-size: 1.3em;
  font-weight: 500;
}
html body #wrapper main #order-note p a {
  color: #e87f09;
  transition: .2s;
  /* give bottom border a style to stransition from */
  border-bottom: solid 1px rgba(0, 0, 0, 0);
}
html body #wrapper main #order-note p a:hover,
html body #wrapper main #order-note p a:active {
  /* use bottom border instead of underline so we can soften the transition */
  border-bottom: solid 1px #e87f09;
  transition: .2s;
}
html body #wrapper main #menu {
  /* add background color and texture to top area of #menu outside of subsections */
  background-color: #5a0b09;
  background-image: url(../images/backgrounds/texture1.png);
}
html body #wrapper main #menu h2 {
  line-height: 2.3em;
  margin: 15px;
}
html body #wrapper main #menu h3 {
  text-align: center;
  margin-bottom: calc(30px);
  background-color: rgba(255, 255, 255, 0.4);
  /* make light background stop at inside part of double border so there's a clear gab between the borders */
  background-clip: padding-box;
  color: black;
  border: double 4px rgba(255, 255, 255, 0.4);
  font-family: "Tillana", serif;
}
html body #wrapper main #menu h4 {
  /* slightly darken top of heading area to add contrast against white text */
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2));
}
html body #wrapper main #menu ul {
  /* make diet symbol key items sit next to each other */
  display: flex;
  /* align diet symbol area with surrounding elements */
  padding: 15px;
}
html body #wrapper main #menu ul li {
  padding-right: 10px;
  font-size: 0.9em;
}
html body #wrapper main #menu ul li img {
  border: solid 1px white;
  /* make borders snug against round icons */
  border-radius: 50%;
}
html body #wrapper main #menu ul li span {
  /* get text to roughly align with symbol icons */
  vertical-align: super;
}
html body #wrapper main #menu section {
  /* match rest of page's padding since #menu section has no padding of its own (so that each subsection's background can extend to edge without doubled padding) */
  padding: 15px;
}
html body #wrapper main #menu section .item {
  position: relative;
  float: none;
  /* take up all of column width */
  width: 100%;
  height: 200px;
  margin-bottom: 15px;
  background-repeat: no-repeat;
  /* center view of background image */
  background-position: center;
  /* resize background image as necessary to cover div */
  background-size: cover;
  border: solid 1px black;
  box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.5);
}
html body #wrapper main #menu section .item .description {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 5px;
  background-color: rgba(255, 255, 255, 0.7);
  color: black;
  font-family: "Tillana", serif;
  transition: .5s;
}
html body #wrapper main #menu section .item .diet {
  /* take icons out of page flow to be precisely positioned in top right corner */
  position: absolute;
  top: 0;
  right: 0;
  margin-bottom: 15px;
}
html body #wrapper main #menu section .item .diet img {
  margin: 5px;
  border: solid 1px white;
  /* make borders snug against round icons */
  border-radius: 50%;
  /* keep icons on top of .item */
  z-index: 4;
}
html body #wrapper main #menu #style-options {
  background-color: #5a0b09;
  /* add texture to background */
  background-image: url(../images/backgrounds/texture2.png);
}
html body #wrapper main #menu #meat-veg-options {
  background-color: #354d01;
  /* add texture to background */
  background-image: url(../images/backgrounds/texture3.png);
}
html body #wrapper main #menu #rice-options {
  background-color: #5a0b09;
  /* add texture to background */
  background-image: url(../images/backgrounds/texture4.png);
}
html body #wrapper main #menu #topping-options {
  background-color: #354d01;
  /* set background image overlayed with faded color3 (green) */
  background: linear-gradient(rgba(53, 77, 1, 0.7), rgba(53, 77, 1, 0.7)), url(../images/backgrounds/toppings-bg-mobile.jpg);
  background-repeat: no-repeat;
  /* ensure background image fills area regardless of screen size */
  background-size: cover;
}
html body #wrapper main #menu #topping-options .item {
  /* size these according to their content */
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
html body #wrapper main #menu #topping-options .item h4 {
  /* ensure long titles don't run into diet symbols */
  margin: 0 56px;
  background: none;
}
html body #wrapper main #menu #topping-options .item .description {
  position: relative;
  padding: 15px;
  /* don't use background color for topping item descriptions */
  background-color: transparent;
  color: white;
}
html body #wrapper main #contact {
  text-align: left;
  padding: 15px;
  background-color: #e87f09;
  /* add texture to background */
  background-image: url(../images/backgrounds/texture5.png);
}
html body #wrapper main #contact h3 {
  /* let h2's padding-bottom be the only spacing; align first h3 with map on larger resolutions */
}
html body #wrapper main #contact h3:first-of-type {
  padding-top: 0;
}
html body #wrapper main #contact #phone-buttons {
  /* set call and text buttons next to each other */
  display: flex;
  text-align: center;
  margin: 20px 0 10px 0;
}
html body #wrapper main #contact #phone-buttons a {
  position: relative;
  /* have buttons resize depending on screen width */
  width: auto;
  /* don't let buttons shrink smaller than their contents */
  min-width: 130px;
  height: 44px;
  /* space buttons apart */
  margin-right: 20px;
  /* get content roughly centered */
  padding: 15px 20px 10px 20px;
  /* give buttons rounded edge */
  border-radius: 20px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
  background-color: #940f06;
  /* match icon color */
  color: white;
  font-size: 1.2em;
  font-weight: 400;
  letter-spacing: 3px;
  transition: .3s;
}
html body #wrapper main #contact #phone-buttons a:hover,
html body #wrapper main #contact #phone-buttons a:active {
  background-color: #5a0b09;
  transition: .3s;
}
html body #wrapper main #contact #phone-buttons a img {
  /* roughly align icon with text */
  vertical-align: top;
  width: 18px;
  height: 18px;
  /* add space between icon and text */
  margin-right: 10px;
}
html body #wrapper main #contact figure {
  border: solid 1px black;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
html body #wrapper main #contact figure iframe {
  width: 100%;
  height: 350px;
}
html body #wrapper main #about {
  padding: 15px;
  background-color: #354d01;
  /* add background texture */
  background-image: url(../images/backgrounds/texture6.png);
}
html body #wrapper main #about p {
  text-align: left;
  line-height: 2.4;
}
html body #wrapper main #about img {
  width: 80%;
  /* keep image proportionate regardless of screen width */
  height: auto;
  /* center image */
  margin: auto;
  /* make image circular */
  border-radius: 50%;
  box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.5);
}
html body #wrapper footer {
  text-align: center;
  padding: 1.5em 1em;
  background-color: #5a0b09;
  /* add background texture */
  background-image: url(../images/backgrounds/texture1.png);
  font-size: 0.9em;
  box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.5);
}
html body #wrapper footer a .social-icons {
  margin-top: .5em;
  margin-bottom: 1em;
  /* add space between icons while keeping their area centered */
}
html body #wrapper footer a .social-icons:not(:last-of-type) {
  margin-right: 1em;
}
html body #wrapper footer p {
  line-height: 2em;
}
html body #wrapper footer p a {
  color: #e87f09;
  transition: .2s;
  /* give bottom border a style to stransition from */
  border-bottom: solid 1px rgba(0, 0, 0, 0);
}
html body #wrapper footer p a:hover,
html body #wrapper footer p a:active {
  /* use bottom border instead of underline so we can soften the transition */
  border-bottom: solid 1px #e87f09;
  transition: .2s;
}
/* LARGER MOBILE CSS AND UP */
@media only screen and (min-width: 385px) {
  html body #wrapper header {
    /* adjust space on top of page to fit new nav bar size */
    padding-top: 70px;
  }
  html body #wrapper header nav {
    /* shrink nav bar to fit single line of h1 */
    height: 70px;
    /* position nav in space created at top of page */
    margin-top: calc(-70px);
  }
  html body #wrapper header nav #logo {
    top: 5px;
  }
  html body #wrapper header nav h1 {
    /* center h1 text vertically */
    line-height: 70px;
  }
  html body #wrapper header nav #navigation {
    position: absolute;
    /* adjust nav menu top to new nav bar */
    top: 70px;
  }
  html body #wrapper header nav #navigation #hamburger-button {
    /* position menu button roughly vertically in nav bar */
    top: -59px;
  }
  html body #wrapper header #hero {
    font-size: 2em;
  }
  html body #wrapper main #contact .flex-container div {
    /* enlarge buttons a bit */
  }
  html body #wrapper main #contact .flex-container div #phone-buttons a {
    font-size: 1.5em;
    padding: 10px 20px;
  }
  html body #wrapper main #contact .flex-container div #phone-buttons img {
    width: 24px;
    height: 24px;
  }
}
/* TABLET CSS CODE AND UP */
@media only screen and (min-width: 481px) {
  html body #wrapper {
    /* shrink base font size */
    font-size: 16px;
  }
  html body #wrapper .tablet-up {
    /* display previously hidden text intended for tablet and desktop users */
    display: inline !important;
  }
  html body #wrapper .mobile {
    /* hide elements only intended for mobile users */
    display: none !important;
  }
  html body #wrapper header {
    /* let script.js use following darkened background images for hero slides on tablet up */
  }
  html body #wrapper header nav h1 {
    /* make sure h1 doesn't touch logo in new position */
    margin-left: 70px;
  }
  html body #wrapper header nav h1 a {
    /* position h1 text/link on left side of its container next to logo */
    float: left;
  }
  html body #wrapper header #hero {
    /* use larger hero image for tablet and desktop */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: 1s;
  }
  html body #wrapper header .bg1 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../images/backgrounds/hero1-desktop.jpg);
  }
  html body #wrapper header .bg2 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../images/backgrounds/hero2-desktop.jpg);
  }
  html body #wrapper header .bg3 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../images/backgrounds/hero3-desktop.jpg);
  }
  html body #wrapper main #menu #topping-options {
    /* use larger background image for tablet and desktop */
    background: linear-gradient(rgba(53, 77, 1, 0.7), rgba(53, 77, 1, 0.7)), url(../images/backgrounds/toppings-bg-desktop.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  html body #wrapper main #menu #topping-options .item {
    /* keep topping divs the same height so they are properly aligned in columns and rows */
    min-height: 170px;
  }
  html body #wrapper main #contact {
    /* put map to left of text */
  }
  html body #wrapper main #contact .flex-container {
    display: flex;
    flex-direction: row-reverse;
    /* switch map and text area margins to match their swapped positioning */
  }
  html body #wrapper main #contact .flex-container div {
    margin-left: 2%;
  }
  html body #wrapper main #contact .flex-container figure {
    margin-left: 0;
  }
  html body #wrapper main #about {
    /* make image square and fill its column */
  }
  html body #wrapper main #about img {
    width: 100%;
    border-radius: 0;
  }
}
/* DESKTOP CSS CODE AND UP */
@media only screen and (min-width: 1025px) {
  html body #wrapper {
    /* give page margins so background shows on sides */
    width: 95%;
    /* center page */
    margin: 0 auto 15px auto;
    font-size: 15px;
  }
  html body #wrapper header {
    /* adjust space at top of page for nav bar to fit at new size */
    padding-top: 115px;
  }
  html body #wrapper header nav {
    /* match new width of page wrapper */
    width: 95%;
    /* enlarge nav bar */
    height: 115px;
    /* position nav bar in space at top of page */
    margin-top: calc(-115px);
    /* enlarge and re-center h1 */
  }
  html body #wrapper header nav #logo {
    /* maintain logo aspect ratio */
    width: auto;
    /* enlarge logo */
    height: 95px;
  }
  html body #wrapper header nav h1 {
    font-size: 4.5em;
    line-height: 115px;
    margin-left: 115px;
  }
  html body #wrapper header nav #navigation {
    position: relative;
    /* position navigation area to match nav bar */
    top: calc(-115px);
    /* push nav link area to the side right of nav bar */
    float: right;
    /* keep nav link area confined to only part of the nav bar */
    width: 35%;
  }
  html body #wrapper header nav #navigation #hamburger-button {
    /* hide button */
    display: none;
  }
  html body #wrapper header nav #navigation #navlinks {
    /* keep visible and beside each other */
    display: flex;
    top: 0;
    /* center links vertically */
    line-height: 115px;
    /* keep visible */
    height: auto;
    background-color: rgba(0, 0, 0, 0.4);
    list-style-type: none;
  }
  html body #wrapper header nav #navigation #navlinks li {
    /* space items apart evenly */
    flex-grow: 1;
    top: 0;
    font-weight: 300;
    /* remove appearance of nav link border and hover background styles from previous media queries */
  }
  html body #wrapper header nav #navigation #navlinks li a {
    /* keep nav links from extending below nav bar */
    height: 115px;
    width: 100%;
    /* create style for background to transition from */
    background-color: rgba(0, 0, 0, 0);
    /* create style for borders to transition from */
    border-bottom: solid 6px rgba(0, 0, 0, 0);
    transition: .2s;
  }
  html body #wrapper header nav #navigation #navlinks li a:hover {
    color: #e87f09;
    border-color: #e87f09;
    transition: .2s;
  }
  html body #wrapper header nav #navigation #navlinks li:nth-of-type(3n+1) {
    border-left: 0;
    border-right: 0;
  }
  html body #wrapper header nav #navigation #navlinks li:nth-of-type(3n+1) a:hover {
    background-color: rgba(0, 0, 0, 0);
  }
  html body #wrapper header nav #navigation #navlinks li:nth-of-type(3n+2) {
    border-left: 0;
    border-right: 0;
  }
  html body #wrapper header nav #navigation #navlinks li:nth-of-type(3n+2) a:hover {
    background-color: rgba(0, 0, 0, 0);
  }
  html body #wrapper header nav #navigation #navlinks li:nth-of-type(3n+3) {
    border-left: 0;
    border-right: 0;
  }
  html body #wrapper header nav #navigation #navlinks li:nth-of-type(3n+3) a:hover {
    background-color: rgba(0, 0, 0, 0);
  }
  html body #wrapper header .nav-shadow {
    /* create bigger shadow to match bigger nav bar */
    box-shadow: 0 14px 7px rgba(0, 0, 0, 0.6);
  }
  html body #wrapper main h2 {
    /* improve section heading proportions as they stretch across a wider screen */
    padding: 15px;
  }
  html body #wrapper main #menu h2 {
    /* align menu h2 margin with margin of other sections and subsections */
    margin: calc(30px);
  }
  html body #wrapper main #menu h3 {
    /* shorten to a more reasonable length */
    width: 50%;
    /* center */
    margin: 15px auto;
  }
  html body #wrapper main #menu section {
    /* increase appearance of page margin */
    padding: 15px calc(30px);
  }
  html body #wrapper main #menu ul {
    /* align diet key margin with margin of other sections and subsections */
    margin: 15px;
  }
  html body #wrapper main #contact {
    /* increase appearance of page margin */
    padding: 15px calc(30px);
  }
  html body #wrapper main #about {
    /* increase appearance of page margin */
    padding: 15px calc(30px);
  }
}