<link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:500&display=swap" rel="stylesheet" />

<main>
  <div class="canvas">
    <div class="face">（っ'-')</div>
    <div class="hand">╯</div>
    <div class="axe">🪓</div>
    <div class="effect">= ﾌﾞｫﾝ</div>
  </div>
</main>

<!--
情報発信に必要なものは2つ。

指摘を受け止める謙虚な心と、
悪意ある攻撃をした人を素手で斃せる筋肉。
-->

.axe,
.hand,
.effect {
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}

.axe {
  animation-name: axe-keyframes;
}

@keyframes axe-keyframes {
  0% {
    rotate: 0deg;
  }

  20% {
    rotate: -20deg;
  }

  100% {
    rotate: 2400deg;
  }

  0% {
    translate: 0 0;
  }

  20% {
    translate: -10px -10px;
  }

  100% {
    translate: 1400px 60px;
  }

  0%,
  80% {
    opacity: 1;
  }

  90%,
  100% {
    opacity: 0;
  }
}

.hand {
  animation-name: hand-keyframes;
}

@keyframes hand-keyframes {
  0% {
    rotate: 0deg;
  }

  20% {
    rotate: -20deg;
  }

  40% {
    rotate: 90deg;
  }

  100% {
    rotate: 90deg;
  }
}

.effect {
  opacity: 0;
  animation-name: effect-keyframes;
}

@keyframes effect-keyframes {
  0%,
  25% {
    opacity: 0;
  }

  25.1% {
    opacity: 1;
  }

  64%,
  100% {
    opacity: 0;
  }
}

/* その他スタイル */

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

body {
  background-color: #151f2c;
  position: relative;
}

main {
  overflow: hidden;
}

.canvas {
  position: absolute;
  top: 50%;
  left: 30%;
  pointer-events: none;
}

.face,
.hand,
.effect,
.axe {
  position: absolute;
}

.face,
.hand,
.effect {
  color: #ffffff;
  font-size: 50px;
  font-family: "M PLUS Rounded 1c", sans-serif;
}

.face {
  width: 200px;
  height: 75px;
  left: calc(50% - 100px);
  top: calc(50% - 37px);
}

.hand {
  width: 50px;
  height: 75px;
  left: calc(50% + 65px);
  top: calc(50% - 37px);
  border-top-color: #ffffff;
  transform-origin: 0 center;
}

.axe {
  width: 46px;
  height: 46px;
  font-size: 46px;
  left: calc(50% + 47px);
  top: calc(50% - 76px);
}

.effect {
  font-size: 40px;
  width: 207px;
  height: 75px;
  left: calc(50% + 137px);
  top: calc(50% - 37px);
}

/* <!-- （っ'-')╮ =🍄 ﾌﾞｫﾝ  --> */