html {box-sizing: border-box;font-size: 16px;}
*, *:before, *:after {box-sizing: inherit;}
img {max-width: 100%;height: auto;}
html, body {width: 100%; height: 100%; overflow: hidden;}

body {
  position: relative;
  margin: 0;
  padding: 0;
  background: rgb(255,168,254);
  background: linear-gradient(323deg, rgba(255,168,254,1) 0%, rgba(185,234,255,1) 100%);
}

.hidden {display: none;}

.play {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -100px;
  display: block;
  padding: 0;
  text-indent: -999999px;
  outline: none;
  overflow: hidden;
  transform: scale(1.1);
  transform-origin: center center;
  transition: all .15s ease-in-out;
  position: relative;
  z-index: 2;
  cursor: pointer;
  border: 0;
}

.play:hover {transform: scale(1.4);}
.play:active {transform: scale(1.2);}

.gachi {
  width: 200px;
  height: 200px;
  background: url('gachigasm.png') center center no-repeat;
}

.fly {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  animation: gachigasm .6s ease-out;
  transform: translate3d(0,0,0);
  background-position: bottom left;
}

.fly.el-0{
  transform: scale(4);
  left: -200px;
}

.fly.el-1{
  transform: scale(20);
  left: 200px;
}

.fly.el-2{
  transform: scale(6);
  left: 800px;
}

.fly.el-3{
  transform: scale(20);
  left: -800px;
}

.fly.el-4{
  transform: scale(50);
  left: -300px;
}

@keyframes gachigasm {
  0%, 100% { filter: contrast(1.2) saturate(2.2) hue-rotate(-25deg); }
  100% {
    transform: translate3d(100%,-100%,0);
  }
}