<head>
  <link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono" rel="stylesheet">
</head>
<body>
<div class="container">
  <div class="game-area">
    <div class="flash"></div>

    <div class="blue-fall-row">
      <div class="block  fall1"></div>
      <div class="block  fall2"></div>
      <div class="block  fall3"></div>
      <div class="block  fall4"></div>
    </div>

    <div class="yellow-row">
      <div class="block  y1"></div>
      <div class="block y2"></div>
      <div class="block  y3"></div>
      <div class="block y4"></div>
    </div>

    <div class="blue-stay-row">
      <div class="block  stay1"></div>
      <div class="block stay2"></div>
      <div class="block  stay3"></div>
    </div>

    <div class="red-row">
      <div class="block r1"></div>
      <div class="block r2"></div>
      <div class="block r3"></div>
      <div class="block r4"></div>
    </div>

  </div>
  <div class="message">
    <h1> Leveling up...</h1>
  </div>

</div>
</body>
$background: white;
$container: white;
$game-background: black;
$flash: white;
$blue: #304ffe;
$red: #d50000;
$yellow: #ffd600;
$curve: 10%;
$block-size: 20%;
$animation: 6s linear infinite;
$border: $game-background 0.5vmin solid;

@mixin move ($x,$y) {
  -webkit-transform: translate($x, $y);
  -ms-transform: translate($x, $y);
  transform: translate($x, $y);
}

body,
html {
  background: $background;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: 'Share Tech Mono', monospace;
}

.container {
  background: $container;
  width: 90vmin;
  height: 90vmin;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.message{
  text-align: center;
}
.game-area {
  width: 70%;
  height: 70%;
  background: $game-background;
  border-radius: $curve;
  position: relative;
  overflow: hidden;
}

.block {
  height: 100%;
  width: 25%;
  border-radius: $curve;
  border: $border;
  margin: 0;
  box-sizing: border-box;
  position: absolute;
}

.flash {
  height: $block-size;
  width: 300%;
  position: absolute;
  background: white;
  top: $block-size*3;
  left: -300%;
  animation: flash $animation;
  z-index: 4;
}

.row {
  height: $block-size;
  width: $block-size*4;
  position: absolute;
}

.red-row {
  @extend .row;
  top: $block-size*4;
  left: $block-size/2;
  .block {
    background: $red;
  }
}

.blue-stay-row {
  @extend .row;
  top: -$block-size*2;
  @include move(0, 500%); // used this because when the bottom was set, it didn't line up with the falling blcok at the end, creating a jump
  left: $block-size/2;
  animation: blue-stay $animation;
  .block {
    background: $blue;
  }
}

.blue-fall-row {
  @extend .row;
  top: -$block-size*2;
  left: $block-size/2;
  animation: blue-fall $animation;
  .block {
    background: $blue;
  }
}

.yellow-row {
  @extend .row;
  top: -$block-size*2;
  left: $block-size*1.5;
  animation: yellow-fall $animation;
  .block {
    background: $yellow;
  }
}

.fall1 {
  left: 0;
  top: 100%;
}
.fall2 {
  left: 0;
}
.fall3 {
  left: 25%;
}
.fall4 {
  left: 50%;
}

.y1 {
  left: 0;
}
.y2 {
  left: 25%;
}
.y3 {
  left: 50%;
}
.y4 {
  left: 50%;
  top: 100%;
}

.stay1 {
  left: 0;
}
.stay2 {
  left: 25%;
}
.stay3 {
  left: 50%;
}

.r1 {
  left: 0;
}
.r2 {
  left: 25%;
}
.r3 {
  left: 50%;
}
.r4 {
  left: 75%;
}

@media (max-width: 300px), (max-height: 300px) {
  .game-area {
   height: 60%;
    width: 60%;
  }
  .container {
    background: $game-background;
    border-radius: 10%;
    overflow:hidden;
  }
  .message {
    animation: colour-change $animation;
  }
  .yellow-row,
  .blue-fall-row,
  .blue-stay-row,
  .flash {
    animation: none;
  }
  .yellow-row {
    @include move(0, 400%);
  }
}
@media (max-width: 200px), (max-height: 200px){
  .game-area{
    display: none;
  }
  .message{
    font-size: 1em;
  }
}

@keyframes yellow-fall {
  0% {
    @include move(0,0);
  }
  20%,
  24% {
    @include move(0, 400%);
  }
  25%,
  74% {
    @include move(0,500%);
  }
  75%,
  90% {
    @include move(0,600%);
  }
  0%,
  74% {
    opacity: 1;
  }
  75%,
  100% {
    opacity: 0;
  }
}

@keyframes blue-stay {
  0%,
  24% {
    @include move(0, 500%);
  }
  25%,
  74% {
    @include move(0, 600%);
  }
  75%,
  100% {
    @include move(0, 500%);
  }
  74%,
  76% {
    opacity: 0;
  }
  77%,
  100% {
    opacity: 1;
  }
}

@keyframes blue-fall {
  0%,
  50% {
    @include move(0,0);
  }
  70%,
  74% {
    @include move(0, 400%);
  }
  75%,
  99% {
    @include move(0, 500%);
  }
  100% {
    @include move(0,0);
  }

  0%,
  78% {
    opacity: 1;
  }
  79%,
  100% {
    opacity: 0;
  }
}

@keyframes flash {
  0%,
  20% {
    @include move(0,0);
  }
  23%,
  30% {
    @include move(100%, 0);
  }
  30%,
  35% {
    @include move(300%, 0);
  }

  0%,
  28% {
    opacity: 1;
  }
  36%,
  49% {
    opacity: 0;
  }

  40%,
  70% {
    @include move(0,0);
  }
  73%,
  80% {
    @include move(100%, 0);
  }
  80%,
  85% {
    @include move(300%, 0);
  }
  70%,
  74% {
    opacity: 1;
  }
  84%,
  100% {
    opacity: 0;
  }
  100% {
    @include move(0, 0);
  }
}

@keyframes colour-change {
  0%,
  7% {
    color: $red;
  }
  33%,
  40% {
    color: $blue;
  }

  66%,
  73% {
    color: $yellow;
  }
  100% {
    color: $red;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.