:root {
  --scale-large-mobile: 3.5vw;
  --scale-medium-mobile: 3vw;
  --scale-large: 2vw;
  --scale-medium: 1.5vw;
}

@font-face {
  font-family: "FBWallW";
  src: url("font/FBWallW.ttf") format("truetype");
}
@font-face {
  font-family: "SourceSans3";
  src: url("font/source sans/ttf/source-sans-3-latin-500-normal.ttf");
}
@font-face {
  font-family: "BlackOpsOne";
  src: url("font/BlackOpsOne-Regular.ttf");
}
.underline {
  text-decoration: underline;
}
.menu {
  background-color: antiquewhite;
  text-transform: uppercase;
  margin: auto;
  padding: 2rem;
  font-family: SourceSans3, sans-serif;
  font-size: var(--scale-large);
  display: grid;
  max-width: 100%;
}
.grid-2x2 {
  display: grid;
  grid-template-areas: "1 2" "3 4";
  gap: 1rem;
}

.grid-1xn {
  display: grid;
  grid-template-columns: auto;
}
.menu-page {
  display: grid;
  grid-template-areas: "left right" "bottom bottom" "footer footer";
}
.grid-left {
  grid-area: left;
}
.grid-right {
  grid-area: right;
}
.grid-bottom {
  grid-area: bottom;
}
.grid-footer {
  grid-area: footer;
}
.menu-section {
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 2rem;
}
.menu-section img {
  display: grid;
  margin: auto;
}
.menu h2 {
  font-family: FBWallW;
  text-align: center;
  margin: auto;
  margin-bottom: 2rem;
}
.menu-item {
  display: grid;
  grid-template-areas: "title title" "description price" "description price";
  grid-template-columns: 68% auto;
}
.menu-item-title {
  grid-area: title;
  font-family: BlackOpsOne;
  margin-top: 0;
  margin-bottom: 0;
}
.menu-item-title span {
  display: block;
}
.menu-item-description {
  grid-area: description;
  font-size: 80%;
}
.menu-item-description span {
  padding-top: 1rem;
}
.menu-item-price {
  grid-area: price;
  font-family: blackOpsOne;
  font-size: 130%;
}
.menu-item-price p {
  margin: 0;
}
.menu-item-price span {
  display: block;
  text-align: center;
}
.menu-border {
  border: 0.5rem solid black;
  padding: 2rem;
}
.menu-border-tea {
  border: 0.5rem solid black;
  padding: 2rem;
  border-left: none;
}
.menu-outline {
  outline: 0.5rem solid black;
}
.menu-underline {
  border-bottom: 0.5rem dotted black;
  padding: 2rem;
}
.menu-padding {
  padding: 2rem;
}
.menu-customization {
  font-size: var(--scale-medium);
}
.menu-footer p {
  font-family: blackOpsOne;
}

.font-blops {
  font-family: blackOpsOne;
}

@media screen and (max-width: 800px) {
  .menu-page {
    grid-template-areas: "left" "right" "bottom" "footer";
  }
  .menu {
    font-size: var(--scale-large-mobile);
  }
  .menu-customization {
    font-size: var(--scale-medium-mobile);
  }
}