moving-on.css

* {
  user-select:none;
}

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

.background td {
  padding: 0;
}

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

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

.wall {
  background: rgb(50, 50, 50);
}

.water {
  background: #0af;
}

.actor {
  position: absolute;
}

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

.trampoline {
  background: purple;
}

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

.frankiegoal {
  margin-bottom: -15px;
}

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

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

.drowned .finley {
  background: #0d3831;
}

.drowned .frankie {
  background: #0d613c;
}

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

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

.finley {
  background-color: #320d61;
}

.frankie {
  background-color: #0d613c;
}

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

.instruction:before {
  color: white;
  font-size: 50px;
  font-family: 'lato', 'helveticaneue-light', 'helvetica';
}

.zero:before {
  content: 'it\'s been...';
  margin-left: -30px;
}

.one:before {
  content: 'a while.';
  margin-left: -30px;
}

.two:before {
  content: 'use the arrow keys to move and jump.';
  position: absolute;
  width: 300px;
  left: -80px;
}

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

.four:before {
  content: 'press s.';
  position: absolute;
  white-space: nowrap;
}

.five:before {
  content: 'he needed you too.';
  position: absolute;
  white-space: nowrap;
}

.pause-modal, .title-screen  {
  display: none;
  position: absolute;
  z-index: 1;
  width: 900px;
  height: 600px;
  background-color: rgba(0, 0, 0, .4);
  opacity: .7;
}

.title-screen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  animation: fadein 5s linear;
}

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

.hidden {
  display: none;
}

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

.pause-modal button, .title-screen button, .title-screen a {
  margin: 30px;
  width: 200px;
  height: 100px;
  padding: 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: .2s ease;
  transform: scale(1);
  padding: 15px;
  backface-visibility: hidden;
  text-decoration: none;
}

button:hover, a:hover {
  padding: 15px;
  background: rgba(255, 255, 255, .1);
  transform: scale(1.05);
}

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

  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  
  border-top: 10px solid #fff;
}

.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; }
  100% { opacity: .8; }
}

.six:before {
  content: 'you\'ve been through ups...';
  position: absolute;
  white-space: nowrap;
}

.seven:before {
  content: 'and downs together.';
  position: absolute;
  white-space: nowrap;
}

.eight:before {
  content: 'and sometimes...';
  position: absolute;
  white-space: nowrap;
}

.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 5s 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;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(270deg, #111, #000, #111);
}

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