html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

article {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60vmin;
}

.star {
  animation-name: stardrop;
  animation-timing-function: linear;
  font-family: "Roboto Mono";
  color: transparent;
  display: inline-block;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  height: 1em;
  line-height: 1em;
  position: fixed;
  top: -2em;
  z-index: 1;
  text-shadow: 0 0 1em white, 0 0 1em #dddd00, 0 0 2em #bbbb00, 0 0 0.5em yellow, 0 0 0.05em gold;
}

@keyframes stardrop {
  0% {
    transform: translateY(0) rotateZ(0);
  }
  100% {
    transform: translateY(calc(100vh + 10em)) rotateZ(360deg);
  }
}
.message-area {
  width: 100vmin;
}
.message-area > .content {
  position: relative;
}
.message-area > .content .arrow-white {
  background-color: #fff;
  position: absolute;
  width: 13vmin;
  height: 12.5vmin;
  bottom: 6vmin;
  left: 2vmin;
  z-index: -30;
  -webkit-clip-path: polygon(82% 33%, 100% 17%, 100% 73%, 63% 100%, 44% 63%, 0 71%, 65% 18%);
          clip-path: polygon(82% 33%, 100% 17%, 100% 73%, 63% 100%, 44% 63%, 0 71%, 65% 18%);
  animation-name: arrowWhiteAnimation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.message-area > .content .arrow-black {
  background-color: black;
  position: absolute;
  width: 17vmin;
  height: 10vmin;
  bottom: 7vmin;
  left: 2vmin;
  z-index: -10;
  -webkit-clip-path: polygon(62% 43%, 100% 26%, 100% 73%, 53% 80%, 44% 56%, 0 71%, 56% 19%);
          clip-path: polygon(62% 43%, 100% 26%, 100% 73%, 53% 80%, 44% 56%, 0 71%, 56% 19%);
  animation-name: arrowBlackAnimation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.message-area > .content .background-white {
  background-color: #fff;
  position: absolute;
  width: 85vmin;
  height: 100%;
  left: 11vmin;
  z-index: -40;
  -webkit-clip-path: polygon(6% 0, 100% 0, 90% 100%, 0 87%);
          clip-path: polygon(6% 0, 100% 0, 90% 100%, 0 87%);
  animation-name: backgroundWhiteAnimation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.message-area > .content .background-black {
  background-color: #000;
  position: absolute;
  width: 81vmin;
  height: calc(100% - 2vmin);
  left: 11vmin;
  margin: 1vmin 0 1vmin 2vmin;
  z-index: -20;
  -webkit-clip-path: polygon(6% 0, 100% 0, 90% 100%, 0 87%);
          clip-path: polygon(6% 0, 100% 0, 90% 100%, 0 87%);
  animation-name: backgroundBlackAnimation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.message-area > .content .text-area {
  color: #fff;
  font-size: 12vmin;
  padding: 5vmin 15vmin 5vmin 18vmin;
  line-height: 1.1em;
}
.message-area > .content .arrow-white2 {
  background-color: #fff;
  position: absolute;
  width: 13vmin;
  height: 12.5vmin;
  bottom: 6vmin;
  right: 2vmin;
  z-index: -30;
  -webkit-clip-path: polygon(18% 67%, 0% 83%, 0% 27%, 37% 0%, 56% 37%, 100% 29%, 35% 72%);
          clip-path: polygon(18% 67%, 0% 83%, 0% 27%, 37% 0%, 56% 37%, 100% 29%, 35% 72%);
  animation-name: arrowWhiteAnimation2;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.message-area > .content .arrow-black2 {
  background-color: black;
  position: absolute;
  width: 17vmin;
  height: 10vmin;
  bottom: 7vmin;
  right: 2vmin;
  z-index: -10;
  -webkit-clip-path: polygon(46% 50%, 0% 103%, 0% 44%, 50% 4%, 64% 33%, 91% 28%, 47% 69%);
          clip-path: polygon(46% 50%, 0% 103%, 0% 44%, 50% 4%, 64% 33%, 91% 28%, 47% 69%);
  animation-name: arrowBlackAnimation2;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.message-area > .content .background-white2 {
  background-color: #fff;
  position: absolute;
  width: 85vmin;
  height: 100%;
  right: 11vmin;
  z-index: -40;
  -webkit-clip-path: polygon(98% 92%, 10% 98%, 4% 6%, 93% 15%);
          clip-path: polygon(98% 92%, 10% 98%, 4% 6%, 93% 15%);
  animation-name: backgroundWhiteAnimation2;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.message-area > .content .background-black2 {
  background-color: #000;
  position: absolute;
  width: 81vmin;
  height: calc(100% - 2vmin);
  right: 13vmin;
  margin: 1vmin 0 1vmin 2vmin;
  z-index: -20;
  -webkit-clip-path: polygon(96% 91%, 11% 98%, 3% 5%, 94% 20%);
          clip-path: polygon(96% 91%, 11% 98%, 3% 5%, 94% 20%);
  animation-name: backgroundBlackAnimation2;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.message-area > .content .text-area2 {
  color: #fff;
  font-size: 13vmin;
  padding: 8vmin 12vmin 8vmin 16vmin;
  line-height: 1.1em;
}
@keyframes arrowWhiteAnimation {
  0% {
    -webkit-clip-path: polygon(82% 33%, 100% 17%, 100% 73%, 63% 100%, 44% 63%, 0 71%, 65% 18%);
            clip-path: polygon(82% 33%, 100% 17%, 100% 73%, 63% 100%, 44% 63%, 0 71%, 65% 18%);
  }
  25% {
    -webkit-clip-path: polygon(82% 33%, 100% 18%, 99% 73%, 63% 99%, 44% 63%, 0 72%, 65% 18%);
            clip-path: polygon(82% 33%, 100% 18%, 99% 73%, 63% 99%, 44% 63%, 0 72%, 65% 18%);
  }
  50% {
    -webkit-clip-path: polygon(81% 33%, 98% 17%, 100% 73%, 61% 100%, 43% 63%, 1% 71%, 66% 18%);
            clip-path: polygon(81% 33%, 98% 17%, 100% 73%, 61% 100%, 43% 63%, 1% 71%, 66% 18%);
  }
  75% {
    -webkit-clip-path: polygon(81% 34%, 100% 17%, 100% 72%, 63% 100%, 44% 65%, 0% 71%, 65% 19%);
            clip-path: polygon(81% 34%, 100% 17%, 100% 72%, 63% 100%, 44% 65%, 0% 71%, 65% 19%);
  }
  100% {
    -webkit-clip-path: polygon(81% 33%, 100% 17%, 100% 73%, 63% 100%, 44% 63%, 0% 71%, 65% 19%);
            clip-path: polygon(81% 33%, 100% 17%, 100% 73%, 63% 100%, 44% 63%, 0% 71%, 65% 19%);
  }
}
@keyframes arrowBlackAnimation {
  0% {
    -webkit-clip-path: polygon(62% 43%, 100% 26%, 100% 73%, 53% 80%, 44% 56%, 0 71%, 56% 19%);
            clip-path: polygon(62% 43%, 100% 26%, 100% 73%, 53% 80%, 44% 56%, 0 71%, 56% 19%);
  }
  25% {
    -webkit-clip-path: polygon(63% 43%, 100% 26%, 98% 73%, 53% 80%, 42% 56%, 1% 71%, 56% 19%);
            clip-path: polygon(63% 43%, 100% 26%, 98% 73%, 53% 80%, 42% 56%, 1% 71%, 56% 19%);
  }
  50% {
    -webkit-clip-path: polygon(62% 44%, 100% 27%, 100% 72%, 53% 81%, 44% 57%, 0 74%, 56% 18%);
            clip-path: polygon(62% 44%, 100% 27%, 100% 72%, 53% 81%, 44% 57%, 0 74%, 56% 18%);
  }
  75% {
    -webkit-clip-path: polygon(62% 43%, 99% 26%, 100% 73%, 54% 80%, 44% 56%, 0 71%, 57% 19%);
            clip-path: polygon(62% 43%, 99% 26%, 100% 73%, 54% 80%, 44% 56%, 0 71%, 57% 19%);
  }
  100% {
    -webkit-clip-path: polygon(62% 43%, 100% 26%, 100% 73%, 53% 80%, 44% 56%, 0 71%, 56% 19%);
            clip-path: polygon(62% 43%, 100% 26%, 100% 73%, 53% 80%, 44% 56%, 0 71%, 56% 19%);
  }
}
@keyframes backgroundWhiteAnimation {
  0% {
    -webkit-clip-path: polygon(6% 0, 100% 0, 90% 100%, 0 87%);
            clip-path: polygon(6% 0, 100% 0, 90% 100%, 0 87%);
  }
  25% {
    -webkit-clip-path: polygon(6% 0, 98% 1%, 90% 100%, 1% 88%);
            clip-path: polygon(6% 0, 98% 1%, 90% 100%, 1% 88%);
  }
  50% {
    -webkit-clip-path: polygon(6% 2%, 100% 0, 89% 100%, 0 87%);
            clip-path: polygon(6% 2%, 100% 0, 89% 100%, 0 87%);
  }
  75% {
    -webkit-clip-path: polygon(6% 0, 100% 0, 90% 99%, 0 87%);
            clip-path: polygon(6% 0, 100% 0, 90% 99%, 0 87%);
  }
  100% {
    -webkit-clip-path: polygon(6% 0, 100% 0, 90% 100%, 0 87%);
            clip-path: polygon(6% 0, 100% 0, 90% 100%, 0 87%);
  }
}
@keyframes backgroundBlackAnimation {
  0% {
    -webkit-clip-path: polygon(6% 0, 100% 0, 90% 100%, 0 87%);
            clip-path: polygon(6% 0, 100% 0, 90% 100%, 0 87%);
  }
  25% {
    -webkit-clip-path: polygon(7% 0, 100% 0, 89% 100%, 0 88%);
            clip-path: polygon(7% 0, 100% 0, 89% 100%, 0 88%);
  }
  50% {
    -webkit-clip-path: polygon(6% 1%, 100% 0, 90% 99%, 0 87%);
            clip-path: polygon(6% 1%, 100% 0, 90% 99%, 0 87%);
  }
  75% {
    -webkit-clip-path: polygon(6% 0%, 99% 1%, 90% 100%, 1% 87%);
            clip-path: polygon(6% 0%, 99% 1%, 90% 100%, 1% 87%);
  }
  100% {
    -webkit-clip-path: polygon(6% 0%, 100% 0%, 90% 100%, 0% 87%);
            clip-path: polygon(6% 0%, 100% 0%, 90% 100%, 0% 87%);
  }
}
@keyframes arrowWhiteAnimation2 {
  0% {
    -webkit-clip-path: polygon(18% 67%, 0% 83%, 0% 27%, 37% 0%, 56% 37%, 100% 29%, 35% 72%);
            clip-path: polygon(18% 67%, 0% 83%, 0% 27%, 37% 0%, 56% 37%, 100% 29%, 35% 72%);
  }
  25% {
    -webkit-clip-path: polygon(18% 67%, 0% 82%, 1% 27%, 37% 1%, 56% 37%, 100% 28%, 35% 72%);
            clip-path: polygon(18% 67%, 0% 82%, 1% 27%, 37% 1%, 56% 37%, 100% 28%, 35% 72%);
  }
  50% {
    -webkit-clip-path: polygon(19% 67%, 2% 83%, 0% 27%, 39% 0%, 57% 37%, 99% 29%, 34% 72%);
            clip-path: polygon(19% 67%, 2% 83%, 0% 27%, 39% 0%, 57% 37%, 99% 29%, 34% 72%);
  }
  75% {
    -webkit-clip-path: polygon(19% 66%, 0% 83%, 0% 28%, 37% 0%, 56% 35%, 100% 29%, 35% 71%);
            clip-path: polygon(19% 66%, 0% 83%, 0% 28%, 37% 0%, 56% 35%, 100% 29%, 35% 71%);
  }
  100% {
    -webkit-clip-path: polygon(21% 67%, 0% 83%, 0% 27%, 37% 0%, 56% 37%, 100% 29%, 35% 71%);
            clip-path: polygon(21% 67%, 0% 83%, 0% 27%, 37% 0%, 56% 37%, 100% 29%, 35% 71%);
  }
}
@keyframes arrowBlackAnimation2 {
  0% {
    -webkit-clip-path: polygon(46% 50%, 0% 103%, 0% 44%, 50% 4%, 64% 33%, 91% 28%, 47% 69%);
            clip-path: polygon(46% 50%, 0% 103%, 0% 44%, 50% 4%, 64% 33%, 91% 28%, 47% 69%);
  }
  25% {
    -webkit-clip-path: polygon(45% 50%, 0% 103%, 0% 44%, 50% 4%, 68% 33%, 90% 28%, 47% 69%);
            clip-path: polygon(45% 50%, 0% 103%, 0% 44%, 50% 4%, 68% 33%, 90% 28%, 47% 69%);
  }
  50% {
    -webkit-clip-path: polygon(46% 49%, 0% 102%, 0% 45%, 51% 3%, 66% 32%, 91% 25%, 47% 70%);
            clip-path: polygon(46% 49%, 0% 102%, 0% 45%, 51% 3%, 66% 32%, 91% 25%, 47% 70%);
  }
  75% {
    -webkit-clip-path: polygon(46% 50%, 1% 103%, 0% 44%, 50% 4%, 66% 33%, 91% 28%, 46% 69%);
            clip-path: polygon(46% 50%, 1% 103%, 0% 44%, 50% 4%, 66% 33%, 91% 28%, 46% 69%);
  }
  100% {
    -webkit-clip-path: polygon(45% 50%, 0% 101%, 0% 45%, 50% 4%, 64% 33%, 91% 28%, 47% 69%);
            clip-path: polygon(45% 50%, 0% 101%, 0% 45%, 50% 4%, 64% 33%, 91% 28%, 47% 69%);
  }
}
@keyframes backgroundWhiteAnimation2 {
  0% {
    -webkit-clip-path: polygon(98% 92%, 10% 98%, 4% 6%, 93% 15%);
            clip-path: polygon(98% 92%, 10% 98%, 4% 6%, 93% 15%);
  }
  25% {
    -webkit-clip-path: polygon(98% 92%, 12% 97%, 4% 6%, 92% 16%);
            clip-path: polygon(98% 92%, 12% 97%, 4% 6%, 92% 16%);
  }
  50% {
    -webkit-clip-path: polygon(98% 90%, 10% 98%, 5% 6%, 93% 15%);
            clip-path: polygon(98% 90%, 10% 98%, 5% 6%, 93% 15%);
  }
  75% {
    -webkit-clip-path: polygon(98% 92%, 10% 98%, 4% 7%, 93% 15%);
            clip-path: polygon(98% 92%, 10% 98%, 4% 7%, 93% 15%);
  }
  100% {
    -webkit-clip-path: polygon(98% 92%, 10% 98%, 4% 6%, 93% 15%);
            clip-path: polygon(98% 92%, 10% 98%, 4% 6%, 93% 15%);
  }
}
@keyframes backgroundBlackAnimation2 {
  0% {
    -webkit-clip-path: polygon(96% 91%, 11% 98%, 3% 5%, 94% 20%);
            clip-path: polygon(96% 91%, 11% 98%, 3% 5%, 94% 20%);
  }
  25% {
    -webkit-clip-path: polygon(95% 91%, 11% 98%, 4% 5%, 94% 19%);
            clip-path: polygon(95% 91%, 11% 98%, 4% 5%, 94% 19%);
  }
  50% {
    -webkit-clip-path: polygon(96% 90%, 11% 98%, 3% 6%, 94% 20%);
            clip-path: polygon(96% 90%, 11% 98%, 3% 6%, 94% 20%);
  }
  75% {
    -webkit-clip-path: polygon(96% 91%, 12% 97%, 3% 5%, 93% 20%);
            clip-path: polygon(96% 91%, 12% 97%, 3% 5%, 93% 20%);
  }
  100% {
    -webkit-clip-path: polygon(96% 91%, 11% 98%, 3% 5%, 94% 20%);
            clip-path: polygon(96% 91%, 11% 98%, 3% 5%, 94% 20%);
  }
}/*# sourceMappingURL=style.css.map */