* {
  user-select: none;
}

.background {
  background-color: #222;
  border-spacing: 0;
  table-layout: fixed;
}

.background.bg1 {
  background: linear-gradient(#0af, #196);
}

.background.bg2 {
  background: linear-gradient(#62a, #ca3);
}

.background.bg3 {
  background: linear-gradient(#163, #115e7c);
}

.background.bg4 {
  background: linear-gradient(#217, #517);
}

.background.bg5 {
  background: linear-gradient(purple, yellow);
}

.background td {
  padding: 0;
}

.poison {
  background: rgb(170, 100, 255);
}

/* .lava {
  background: rgb(255, 100, 100);
} */

/* .wall:hover, .wall:hover + .wall {
  background: orange!important;
} */
/* 
.wall:hover:before {
  color: white;
}

@keyframes colorchange {
  0% { background: orange!important; }
  100% { background: blue!important; }
} */

.water {
  background: #0af;
}

.platform {
  background: rgba(30, 30, 30, 1);
}

.actor {
  position: absolute;
}

.coin {
  background: rgb(241, 229, 89);
  /* border-radius: 50%; */
}

.trampoline {
  background: #45d;
}

.finleygoal,
.frankiegoal,
.forestgoal,
.fitzgoal,
.fegoal {
  border: 2px dotted white;
  box-sizing: border-box;
  border-spacing: 2px;
}

.player {
  background: rgb(111, 61, 150);
}

.lost .player,
.lost .finley,
.lost .frankie,
.lost .forest,
.lost .fitz,
.lost .fe {
  background: rgb(160, 64, 64);
}

.drowned .finley,
.drowned .frankie,
.drowned .forest,
.drowned .fitz,
.drowned .fe {
  background: #0d3831;
}

.won .player,
.won .finley,
.won .frankie,
.won .forest,
.won .fitz,
.won .fe {
  background: #fff;
}

#game-wrapper {
  /* border-radius: 45px; */
  background: black;
  position: relative;
  width: 900px;
  height: 600px;
  /* margin-top: 50px; */
}

#game-wrapper.won {
  background: linear-gradient(
      217deg,
      rgba(255, 0, 0, 0.8),
      rgba(255, 0, 0, 0) 70.71%
    ),
    linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
}

.finley {
  background-color: #e0b427;
}
/* The element to apply the animation to */
.wall {
  background-color: rgb(40, 40, 50);
  /* animation: wow 10s linear infinite; */
}

/* .wall:before {
  content: '+';
  position: absolute;
  font-size: 10px;
  color: #000;
  font-family: 'HelveticaNeue-Light';
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -10px;
  animation: rotate 10s linear;
} */

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes wow {
  0% {
    background-color: rgb(40, 40, 50);
  }
  50% {
    background-color: rgb(60, 60, 80);
  }
  100% {
    background-color: rgb(40, 40, 50);
  }
}

.frankie {
  background-color: #b91e87;
}

.forest {
  background-color: #0f8822;
}

.fitz {
  background-color: #f0703e;
}

.fe {
  background-color: #173592;
}

.pause-modal,
.title-screen,
.level-selector-menu,
.instructions-menu,
.controls-menu,
.play-instructions {
  /* border-radius: 45px; */
  display: none;
  position: absolute;
  z-index: 1;
  width: 900px;
  height: 600px;
  background-color: rgba(0, 0, 0, 0.6);
}

.controls-menu {
  background-color: black;
}

.title-screen,
.level-selector-menu,
.instructions-menu,
.controls-menu,
.play-instructions {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  animation: fadein 1s linear;
}

.title-screen h1,
.level-selector-menu h1 {
  color: white;
  font: 80px 'HelveticaNeue-UltraLight';
}

.instructions-menu h2,
.play-instructions h2,
.controls-menu h2 {
  color: white;
  font: 30px 'HelveticaNeue-UltraLight';
}

.instructions-menu,
.controls-menu {
  flex-direction: column;
}

.instructions-menu img,
.controls-menu img {
  width: 300px;
}

.instructions-container {
  display: flex;
  flex-direction: row;
}

.instruction-img-container {
  margin: 10px;
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.play-instructions h2 {
  text-align: center;
}

.play-instructions img {
  height: 200px;
  width: auto;
}

.hidden {
  display: none;
}

.show {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.level-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}

.level-buttons div {
  display: flex;
  flex-direction: row;
}

.level-selector-menu h1 {
  font-size: 50px;
}

.title-screen.show {
  justify-content: space-between;
}

.pause-modal button,
.title-screen button,
.level-selector-menu button,
.instructions-menu button,
.controls-menu button,
.play-instructions button,
.title-screen a {
  width: 200px;
  height: 70px;
  margin: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* border-radius: 20px; */
  border: 1px dotted white;
  background: 000;
  color: white;
  font: 30px 'HelveticaNeue-UltraLight';
  outline: 0;
  animation: fadein 1s forwards;
  transition: 0.2s ease;
  transform: scale(1);
  padding: 15px;
  backface-visibility: hidden;
  text-decoration: none;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1);
  transform: translateZ(0);
}

.level-selector-menu button {
  margin: 10px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.level-selector-menu .main-menu-btn {
  /* position: absolute; */
  /* bottom: 0; */
  /* left: calc(50% - 70px); */
  margin-top: 80px;
  font-size: 20px;
  width: 120px;
  height: 40px;
  border-radius: 0%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
}

.instructions-menu,
.controls-menu,
.play-instructions {
  color: white;
}

button,
a {
  background: rgba(0, 0, 0, 0.3) !important;
}

button:hover,
a:hover {
  padding: 15px;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
  transition: 0.05s ease;
}

button:active,
a:active {
  transform: scale(0.98);
}

.curr-player:before {
  content: '';
  height: 0;
  width: 0;
  position: absolute;
  z-index: 100;
  top: -20px;
  left: calc(50% - 8px);

  border-left: 8px solid transparent;
  border-right: 8px solid transparent;

  border-top: 10px solid #fff;
}

/* .finley-tut.curr-player:before  {
  content: 'Finley';
  height: 0;
  width: 0;
  position: absolute;
  z-index: 9999;
  top: -25px;
  left: calc(50% - 22px);
  font-size: 20fpx;
  letter-spacing: 1px;
  border: 0;
  font-family: 'HelveticaNeue-UltraLight';
  color: white;
} */

.promotion {
  width: 100%;
  /* background-color: orange!important; */
  display: flex;
  justify-content: space-between;
}

.promotion a {
  width: 60px;
  height: 20px;
  font-size: 18px;
  padding: 10px;
}

@keyframes fadein {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.instruction {
  position: absolute;
  z-index: 0;
}

.instruction:before {
  color: white;
  font-size: 30px;
  font-family: 'Lato Thin', 'HelveticaNeue-UltraLight';
  letter-spacing: 1px;
}

.zero:before {
  content: 'welcome, finley. :)';
  margin-left: -30px;
}

.one:before {
  /* content: 'hold down the arrow keys to move and jump.'; */
  margin-left: -30px;
}

.two:before {
  /* content: "press esc and click restart if you're stuck."; */
}

.three:before {
  content: 'hello, frankie.';
  margin-left: 25px;
}

.four:before {
  content: 'press s.';
  margin-left: 15px;
  animation: fadein-s 8s ease;
}

@keyframes fadein-s {
  0%,
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.five:before {
  content: 'welcome, forest.';
  width: 100px;
  height: 100px;
  background-color: rgb(40, 40, 50);
  position: absolute;
  white-space: nowrap;
  animation: fadeouttext 5s forwards;
}

.six:before {
  content: 'hey, fe.';
  background-color: rgb(40, 40, 50);
  position: absolute;
  white-space: nowrap;
  animation: fadeouttext 5s forwards;
}

.seven:before {
  content: "what's up, fitz?.";
  position: absolute;
  white-space: nowrap;
  background-color: rgb(40, 40, 50);
  animation: fadeouttext 5s forwards;
}

@keyframes fadeouttext {
  50% {
    color: white;
  }
  100% {
    color: rgb(40, 40, 50);
  }
}

@keyframes fadeintext {
  0% {
    color: rgb(40, 40, 50);
  }
  50% {
    color: rgb(40, 40, 50);
  }
  100% {
    color: white;
  }
}

.eight:before {
  content: 'press up and down to swim.';
  position: absolute;
  white-space: nowrap;
  color: rgb(40, 40, 50);
  background-color: rgb(40, 40, 50);
  animation: fadeintext 5s forwards 2s;
}

.nine {
  background-color: #0af;
}

.nine:before {
  content: 'he was the only thing keeping you afloat.';
  position: absolute;
  white-space: nowrap;
  background-color: #0af;
}

.ten:before {
  content: 'then why did you suffer...';
  position: absolute;
  white-space: nowrap;
}

.eleven:before {
  content: 'while he remained so unaffected?';
  position: absolute;
  white-space: nowrap;
}

.twelve:before {
  content: 'how come you felt so alone?';
  position: absolute;
  white-space: nowrap;
}

.thirteen:before {
  content: "it's ok.";
  position: absolute;
  white-space: nowrap;
}

.heart {
  background-color: #851631;
}

.fourteen:before {
  content: 'you never needed him.';
  position: absolute;
  white-space: nowrap;
}

.fifteen:before {
  content: 'and all it takes...';
  position: absolute;
  white-space: nowrap;
}

.sixteen:before {
  content: 'is just a change in perspective.';
  position: absolute;
  white-space: nowrap;
  transform: rotate(180deg);
}

.seventeen:before {
  content: "it's not your fault you stayed.";
  position: absolute;
  white-space: nowrap;
  margin-left: 30px;
}

.eighteen:before {
  content: 'but you can let him go.';
  position: absolute;
  white-space: nowrap;
}

.nineteen:before {
  content: "you're free.";
  position: absolute;
  white-space: nowrap;
}

/* .last-level .frankie {
  animation: byebye 5s linear forwards!important;
}

@keyframes byebye {
  100% {background-color: white!important;}
} */

.last-level .finleygoal {
}

/* IMPLEMENT THIS OH MY GOD */
.rotated {
  animation: hello 5s linear forwards;
}

@keyframes hello {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

.game {
  overflow: hidden;
  max-width: 900px;
  max-height: 600px;
  position: relative;
  /* border-radius: 45px; */
}

.gravity {
  /* background-color: green; */
}

.game {
  animation: baby 2s forwards;
}

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

/* .last-level {
  background-color: orange;
  animation: fadeout 5s forwards;
  animation-delay: 15s;
} */

@keyframes fadeout {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

/* .last-level:after {
  content: '';
  position: absolute;
  display: block;
  z-index: 9999!important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  color: orange!important;
} */

/* .last-level .background {
  animation: lastlevel 15s forwards;
  animation-delay: 5s;
 } */

/* .last-level:before {
 position: fixed;
 z-index: 15!important;
 width: 900px;
 height: 600px;
 background-color: white!important;
} */

@keyframes lastlevel {
  100% {
    background-color: white;
  }
}

/* .game:before {
    content: '';
    position: fixed;
    width: 910px;
    height: 610px;
    background-color: red;
    margin-left: -5px;
    margin-top: -5px;
    z-index: -1;
    border-radius: 48px;
    background: linear-gradient(270deg, #961f7a, #1f5896, #1f963c, #90961f, #961f7a, #961f7a);
    background-size: 1000% 1200%;
    animation: gradient 500s infinite;
    animation-fill-mode:forwards;
    animation-timing-function: linear;
  } */

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  /* background: white; */
  background: #000;
  background-image: url('https://steamusercontent-a.akamaihd.net/ugc/772778501267616228/943896502CE7357163BDEF5F6ACDFD24DB3D2015/');
  /* background: linear-gradient(270deg, #555, #222, #555); */
}

@keyframes gradient {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1200% 0;
  }
}

.keys {
  width: 900px;
  font-size: 25px;
  color: white;
  font-family: 'HelveticaNeue-UltraLight';
  display: flex;
  justify-content: center;
  align-items: flex-end;
  opacity: 0.3;
  transition: opacity 0.2s ease;
  background-color: rgba(0, 0, 0, 0.8);
}

.keys:hover {
  opacity: 1;
}

.keys div {
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px;
}

.keys img {
  padding: 10px;
}