* {
  box-sizing: inherit; }

html,
body {
  box-sizing: border-box;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  width: 100vw;
  min-height: 100vh;
  padding: 0;
  margin: 0; }

noscript {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

p:first-child {
  margin-top: 0; }
p:last-child {
  margin-bottom: 0; }

.not-supported {
  font-size: 2em;
  width: 50%;
  margin: 25% auto 0;
  text-align: center;
  border: solid #ff6666 3px;
  background-color: #ffaaaa;
  padding: 25px; }

.pre-flight-check {
  width: 50%;
  min-width: 300px;
  margin: 10vh auto 0;
  font-size: 1.35em;
  text-align: center; }

.heading {
  display: block;
  text-align: center; }
  .heading.heading-1 {
    font-size: 2em; }
  .heading.heading-2 {
    font-size: 1.66em; }
  .heading.heading-3 {
    font-size: 1.33em; }

.center {
  text-align: center; }

.hidden {
  display: none !important; }

.pre-flight-check {
  padding: 5vw;
  margin: 10vh 10vw 0; }

.logo {
  background-image: url(../images/logo-white.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin-top: 3.5vh;
  height: 6vh; }

.score-container {
  display: flex;
  justify-content: space-between;
  padding: 1vh 1vw 0;
  font-size: 5vh;
  flex-wrap: wrap; }
  @media screen and (max-width: 480px) {
    .score-container div {
      flex: 50%;
      text-align: center; } }

.controls {
  margin: 5vh auto; }
  .controls.d-pad {
    display: grid;
    grid-gap: 1vw;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    width: 85vw;
    height: 85vw; }
    @media screen and (min-aspect-ratio: 1 / 1) {
      .controls.d-pad {
        width: 65vh;
        height: 65vh; } }
    .controls.d-pad .pad {
      position: relative; }
      .controls.d-pad .pad::before {
        content: "";
        display: block;
        position: absolute;
        width: 25%;
        height: 25%;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0) rotate(45deg); }
    .controls.d-pad .pad-left {
      grid-row: 2/span 1;
      grid-column: 1/span 1;
      transform: rotateZ(0deg); }
    .controls.d-pad .pad-right {
      grid-row: 2/span 1;
      grid-column: 3/span 1;
      transform: rotateZ(180deg); }
    .controls.d-pad .pad-up {
      grid-row: 1/span 1;
      grid-column: 2/span 1;
      transform: rotateZ(90deg); }
    .controls.d-pad .pad-down {
      grid-row: 3/span 1;
      grid-column: 2/span 1;
      transform: rotateZ(270deg); }
  .controls.actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly; }
    .controls.actions .action {
      flex: 20vh 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 10vh;
      background-color: rgba(255, 255, 255, 0.75);
      border: solid 2px #666;
      border-radius: 5px;
      margin-bottom: 2vh; }
      @media screen and (min-aspect-ratio: 1 / 1) {
        .controls.actions .action {
          flex: 20vw 0;
          height: 10vw; } }

.game-board {
  display: grid;
  width: fit-content;
  margin: 0 auto;
  grid-template-rows: repeat(30, 10px);
  grid-template-columns: repeat(30, 10px);
  grid-gap: 2px; }
  .game-board div {
    background-color: #fff8; }
    .game-board div.food.food-1 {
      background-color: red; }
    .game-board div.food.food-2 {
      background-color: yellow; }
    .game-board div.food.food-3 {
      background-color: magenta; }
    .game-board div.food.food-4 {
      background-color: white; }
    .game-board div.food.food-5 {
      background-image: linear-gradient(45deg, red, orange, yellow, green, cyan, blue, indigo); }
    .game-board div.snake.snake-tail {
      background-color: green; }
    .game-board div.snake.snake-head {
      background-color: limegreen; }
    .game-board div.wall {
      background-color: blue; }

.menu {
  padding: 1vw;
  margin: 3vh 5vw 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1vh 4vw;
  position: relative; }
  .menu select,
  .menu input,
  .menu button {
    display: block;
    width: 100%;
    padding: 1vh 1vw;
    text-align: center;
    border-radius: 0;
    height: 6vh;
    font-size: 3vh; }
    .menu select:not(:last-child),
    .menu input:not(:last-child),
    .menu button:not(:last-child) {
      margin-bottom: 10px; }
  .menu .input-length {
    position: absolute;
    top: 1vw;
    right: 1vw;
    padding: 1vh;
    height: 6vh;
    display: flex;
    align-items: center;
    font-size: 2vh; }
  .menu button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8.5vh;
    margin-bottom: 3vh;
    grid-column: 1/span 2; }
    .menu button::before {
      content: "";
      display: block;
      margin: 0;
      padding: 0 1vw;
      width: 0;
      border: solid 3vh transparent; }
  .menu label {
    display: flex;
    align-items: center; }
    .menu label input {
      display: inline;
      width: initial;
      margin: 0 1ch 0 0; }

.modal-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10; }
  .modal-background .modal-container {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    padding: 3vh; }
    .modal-background .modal-container .modal-button {
      display: block;
      margin: 5vh auto;
      width: 100%;
      padding: 1vh 1vw;
      text-align: center;
      border-radius: 0;
      height: 8.5vh;
      font-size: 3vh; }
    .modal-background .modal-container .text {
      max-height: 50vh;
      overflow-y: auto; }
    .modal-background .modal-container .modal {
      position: relative;
      overflow: auto; }

@keyframes runny-rainbow {
  0% {
    background-position: 0 0; }
  100% {
    background-position: 200% 200%; } }
.heading-free-beer {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet, red);
  background-size: 200% 200%;
  animation: runny-rainbow 1s infinite linear;
  font-size: 7vh !important;
  font-weight: bold; }
  .heading-free-beer ~ p {
    text-align: center; }
    .heading-free-beer ~ p span {
      font-weight: bold; }

.high-scores {
  padding: 1vw;
  margin: 1vh 5vw 0;
  z-index: 5; }
  .high-scores .high-scores-header {
    text-align: center;
    margin: 0;
    padding: 0.75em; }
  .high-scores .high-score-list {
    margin-top: 2.5vh; }
    .high-scores .high-score-list .new-high-score {
      text-align: center;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet, red);
      background-size: 200% 200%;
      animation: runny-rainbow 1s infinite linear; }
    .high-scores .high-score-list > p,
    .high-scores .high-score-list > div {
      padding: 1vh;
      text-align: center; }
    .high-scores .high-score-list ol {
      counter-reset: high-scores;
      list-style: none;
      margin: 0;
      padding: 0 0 0 10vw; }
      .high-scores .high-score-list ol li {
        margin: 1vh 0 1vh -10vw;
        padding: 1vh 0 1vh 10vw;
        position: relative; }
        .high-scores .high-score-list ol li:first-child {
          margin-top: 0; }
        .high-scores .high-score-list ol li:last-child {
          margin-bottom: 0; }
        .high-scores .high-score-list ol li p {
          margin: 0;
          display: table-row; }
          .high-scores .high-score-list ol li p span {
            display: table-cell;
            padding: 0 1em; }
        .high-scores .high-score-list ol li.new p {
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
          background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet, red);
          background-size: 200% 200%;
          animation: runny-rainbow 1s infinite linear; }
        .high-scores .high-score-list ol li.new::before {
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
          background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet, red);
          background-size: 200% 200%;
          animation: runny-rainbow 1s infinite linear; }
        .high-scores .high-score-list ol li::before {
          color: inherit;
          counter-increment: high-scores;
          content: counter(high-scores) ".";
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          width: 10vw;
          padding: 1vh 2vw; }

main {
  margin-bottom: 1vh; }

footer {
  text-align: center;
  margin: auto 5vw 1vh; }
  footer .footer-links span[role=separator]::after {
    content: "\2013"; }
  footer .theme-switcher {
    margin-top: 1vh; }

/*# sourceMappingURL=main.css.map */