:root {
  font-size: 1rem; }

* {
  box-sizing: border-box; }

body {
  height: 100%;
  margin: 0;
  background: #222;
  background-image: url("brick-back.jpg");
  color: #efefef;
  font-family: 'Noto Sans', sans-serif;
  line-height: 1.2; }
  body:after {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -5;
    background: rgba(0, 0, 0, 0.6); }

a {
  text-decoration: none;
  color: #fffa6a; }
  a.link, a.visited, a.hover {
    color: #fffa6a; }
  a.active {
    color: #e34; }

p {
  margin: 0;
  padding: 1rem 1.5rem;
  color: #efefef;
  font-family: 'Noto Sans', sans-serif;
  font-size: 1rem;
  text-align: center;
  line-height: 1.5; }
  p.note {
    font-size: 1rem; }
  p.item-info {
    padding: 0.5rem 0 0.5rem 2.5rem;
    text-align: right;
    font-style: italic; }
  p.item-info-left {
    padding: 0.25rem 1rem;
    text-align: left; }
  p .bold {
    font-weight: 700; }

hr {
  width: 50%;
  color: #fda900; }

h1 {
  margin: 0;
  padding: 2rem 1rem;
  color: #fda900;
  font-family: 'Roboto Slab', serif;
  font-size: 3rem;
  font-weight: 700; }

h2 {
  margin: 0;
  padding: 3rem 1rem 1rem 1rem;
  color: #fda900;
  font-family: 'Roboto Slab', serif;
  font-size: 2.5rem;
  font-weight: 700; }

h3 {
  display: inline-block;
  margin: 1rem 0;
  padding: 0 0 0.25rem;
  border-bottom: 1px solid #efefef;
  color: #efefef;
  font-family: 'Noto Sans', sans-serif;
  font-size: 1.8rem;
  text-align: left; }

h4 {
  margin: 0;
  padding: 2rem 1rem;
  color: #fda900;
  font-family: 'Kaushan Script', sans-serif;
  font-size: 2rem; }

h5 {
  margin: 0;
  padding: 0.25rem 1rem;
  color: #efefef;
  font-family: 'Roboto Slab', serif;
  font-weight: 400;
  font-size: 1.5rem; }

h6 {
  margin: 2rem;
  background: rgba(0, 0, 0, 0.6);
  color: #efefef;
  font-family: 'Roboto Slab', serif;
  font-size: 1.2rem;
  font-weight: 400; }
  h6.special-note {
    padding: 1rem;
    border: 1px solid #fda900;
    text-align: center; }
    h6.special-note .bold {
      font-weight: 700; }
    h6.special-note .price {
      color: #fffa6a; }

.small {
  font-size: 80%; }

header {
  text-align: center; }
  header .logo {
    padding: 3rem 2rem 0 2rem;
    max-width: 100%;
    max-height: 100%; }
  header .details {
    padding: 0 16%;
    display: grid;
    justify-content: center;
    gap: 3rem;
    grid-template-areas: 'location hours';
    grid-template-columns: 1fr 1fr; }
    header .details .location {
      grid-area: location;
      text-align: left; }
    header .details .hours {
      grid-area: hours;
      text-align: right; }

main {
  padding: 0 2rem 3rem 2rem;
  min-height: calc(100vh - 2rem); }
  main section.top {
    text-align: center; }
  main .menu {
    padding: 0 15%;
    display: grid;
    justify-content: center;
    gap: 2rem;
    grid-template-areas: 'col1 col2';
    grid-template-columns: 1fr 1fr; }
    main .menu section.column h2 {
      text-align: center; }
    main .menu section.column table {
      margin: 0 auto 2rem auto;
      border-collapse: collapse;
      border-spacing: 0;
      max-width: 450px;
      font-size: 1.5rem; }
      main .menu section.column table .small {
        font-size: 80%; }
    main .menu section.column td.name {
      width: 70%;
      text-align: right;
      color: #efefef; }
    main .menu section.column td.item {
      padding: 2rem 1rem 0 1rem;
      text-align: left;
      font-size: 110%; }
      main .menu section.column td.item.first {
        padding-top: 0; }
    main .menu section.column td.size {
      text-align: right;
      font-style: italic; }
    main .menu section.column td.price {
      width: 24%;
      text-align: right;
      color: #fffa6a; }
      main .menu section.column td.price.center {
        text-align: center; }
    main .menu section.col1 {
      grid-area: col1; }
    main .menu section.col2 {
      grid-area: col2; }

footer {
  background: #060303;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  height: 2rem;
  text-align: center; }

@media screen and (max-width: 961px) {
  :root {
    font-size: 0.75rem; }
  header .details {
    gap: 1.5rem;
    grid-template-areas: 'location' 'hours';
    grid-template-columns: 1fr; }
    header .details .location, header .details .hours {
      text-align: center; }
  body:after {
    background: rgba(0, 0, 0, 0.5); }
  main .menu {
    padding: 0 1rem;
    grid-template-areas: 'col1' 'col2';
    grid-template-columns: 1fr; }
    main .menu section.column h3 {
      margin-left: 2rem; }
    main .menu section.column table {
      width: 95%; }
    main .menu section.column td.price {
      text-align: center; }
      main .menu section.column td.price.right {
        text-align: right; } }