html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

html, body, h1, h3, p, a {
  margin: 0;
  padding: 0;
}

body {
  background-image: -webkit-gradient(linear, left top, right bottom, from(#d34f3c), color-stop(#c43d5c), color-stop(#0b6772), to(#d34f3c));
  background-image: linear-gradient(to bottom right, #d34f3c, #c43d5c, #0b6772, #d34f3c);
  background-size: 300% 300%;
  -webkit-transition: 500ms ease-in-out all;
  transition: 500ms ease-in-out all;
}

h1, h3, p, a {
  font-family: 'VT323', monospace;
  -webkit-transform: scaleX(1.5);
          transform: scaleX(1.5);
  -webkit-transform-origin: left;
          transform-origin: left;
  color: #171d1d;
  margin-bottom: .5rem;
}

p, a {
  font-size: 1.25rem;
  display: inline;
}

a {
  text-decoration: none;
}

.use-orange {
  background-position: 0% 0%;
}

.use-orange .screen h1, .use-orange .screen h3, .use-orange .screen p, .use-orange .screen a, .use-orange .screen a:visited, .use-orange .screen .game-board {
  color: #d34f3c;
}

.use-orange .screen a:hover, .use-orange .screen .prompt-option:hover, .use-orange .screen .game-board span:hover {
  color: #c43d5c;
}

.use-orange .contact-row, .use-orange .navigation h3:not(.active):hover span {
  border-color: #d34f3c;
}

.use-pink {
  background-position: 50% 50%;
}

.use-pink .screen h1, .use-pink .screen h3, .use-pink .screen p, .use-pink .screen a, .use-pink .screen a:visited, .use-pink .screen .game-board {
  color: #c43d5c;
}

.use-pink .screen a:hover, .use-pink .screen .prompt-option:hover, .use-pink .screen .game-board span:hover {
  color: #0b6772;
}

.use-pink .contact-row, .use-pink .navigation h3:not(.active):hover span {
  border-color: #c43d5c;
}

.use-blue {
  background-position: 100% 100%;
}

.use-blue .screen h1, .use-blue .screen h3, .use-blue .screen p, .use-blue .screen a, .use-blue .screen a:visited, .use-blue .screen .game-board {
  color: #0b6772;
}

.use-blue .screen a:hover, .use-blue .screen .prompt-option:hover, .use-blue .screen .game-board span:hover {
  color: #d34f3c;
}

.use-blue .contact-row, .use-blue .navigation h3:not(.active):hover span {
  border-color: #0b6772;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  width: 100%;
  padding: 4rem;
}

.screen {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  max-width: 50rem;
  background-color: #171d1d;
  padding: 2rem;
  border-radius: 2rem;
  -webkit-box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.7);
          box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.7);
  overflow-y: auto;
}

.screen-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.screen-content p {
  font-size: 1rem;
}

.screen h1, .screen h3, .screen p, .screen a {
  width: 65%;
}

.contact-row {
  margin: .5rem 0 1rem 0;
  padding-bottom: 1rem;
  border-bottom: 3px dashed;
}

.contact-row a {
  margin-right: .5rem;
}

.navigation {
  -ms-flex-item-align: start;
      align-self: flex-start;
  padding-top: 1rem;
}

.navigation h3:not(.active) {
  cursor: pointer;
}

.navigation h3:not(:last-child) {
  margin-bottom: 1rem;
}

.navigation h3 span {
  border-bottom: 3px solid rgba(0, 0, 0, 0);
  padding-bottom: .25rem;
}

.navigation h3:hover span {
  border-bottom-style: dashed;
}

.navigation h3::before {
  -webkit-animation: blink-animation 1.5s steps(2, start) infinite;
          animation: blink-animation 1.5s steps(2, start) infinite;
  content: '\00a0';
  margin-right: .5rem;
}

.navigation h3.active::before {
  content: '>';
}

.prompt-option {
  cursor: pointer;
}

.game-board {
  cursor: pointer;
}

.game-board span {
  padding: .5rem;
  display: inline-block;
}

@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

@media (max-aspect-ratio: 5 / 7) {
  .content {
    padding: 2rem;
  }
  .content .screen {
    padding: 1.5rem;
  }
}
/*# sourceMappingURL=style.css.map */