main.css

body {
  background-color: #1C1C1C;
  overflow: hidden;
}

.info {
  color: #ffffff;
  font-family: "Courier New", Courier, monospace;
}

.bold {
  font-weight: bold;
}

.small {
  font-size: small;
}

a:link, a:visited, a:hover, a:active {
  color: #ffffff;
}

.container {
  display: grid;
  grid-template-columns: 10px 150px 150px 150px 150px 10px;
  grid-template-rows: 20px 5px 5px 400px 5px 5px auto auto;
}

@media screen and (min-width: 640px) {
  .container {
    margin-left: 0px;
  }
}

@media screen and (min-width: 800px) {
  .container {
    margin-left: 80px;
  }
}

@media screen and (min-width: 1024px) {
  .container {
    margin-left: 190px;
  }
}

@media screen and (min-width: 1152px) {
  .container {
    margin-left: 256px;
  }
}

@media screen and (min-width: 1280px) {
  .container {
    margin-left: 320px;
  }
}

@media screen and (min-width: 2048px) {
  .container {
    margin-left: 704px;
  }
}

@media screen and (min-width: 2560px) {
  .container {
    margin-left: 960px;
  }
}

@media screen and (min-width: 3440px) {
  .container {
    margin-left: 1400px;
  }
}

@media screen and (min-width: 3840px) {
  .container {
    margin-left: 1600px;
  }
}

@media screen and (min-width: 4096px) {
  .container {
    margin-left: 1728px;
  }
}

.title {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.level {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  text-align: left;
}

.fuel {
  grid-column: 4 / 5;
  grid-row: 1 / 2;
  text-align: center;
}

.score {
  grid-column: 5 / 6;
  grid-row: 1 / 2;
  text-align: right;
}

.gutter-top {
  grid-column: 2 / span 4;
  grid-row: 3 / 4;
}

.main {
  grid-column: 2 / span 4;
  grid-row: 4 / 5;
  background-color: #424242;
}

.gutter-bottom {
  grid-column: 2 / span 4;
  grid-row: 5 / 6;
}

.hud {
  grid-column: 2 / span 4;
  grid-row: 7 / 8;
  background-color: #2E2E2E;
  text-align: center;
}

.footer-keys {
  grid-column: 2 / span 2;
  grid-row: 8 / 9;
}

.footer-info {
  grid-column: 4 / span 2;
  grid-row: 8 / 9;
}

.gutter {
  display: flex;
  width: 100px;
  height: 5px;
  background-color: #ffffff;
  animation: translatex 10s infinite;
  animation-direction: right;
}

.paused {
  animation-play-state:paused;
  -webkit-animation-play-state:paused;
  -moz-animation-play-state:paused;
  -o-animation-play-state:paused;
}

@keyframes translatex {
  0% {
    transform: translateX(500px);
    opacity: 0.9;
  }
  100% {
    transform: translateX(0px);
    opacity: 0.01;
  }
}