@charset "UTF-8";
/* CSS Document */


.AYM {
  position: absolute;
  top: 50px;
  left: 25px;
  width: 318px;
  background-color: transparent;
  margin-left: auto;
  margin-right: auto;
    font-size: 45px;
    z-index: 4;
}

.AYM span { font-size: 1px; }
.AYM b { font-weight: normal; color: #09f; }
.AYM strong { color: #c0c; }

* {
  box-sizing: border-box;
}

@keyframes scaleUpDown {
  0%,
  100% {
    transform: scaleY(1) scaleX(1);
  }
  50%,
  90% {
    transform: scaleY(1.1);
  }
  75% {
    transform: scaleY(0.95);
  }
  80% {
    transform: scaleX(0.95);
  }
}

@keyframes shake {
  0%,
  100% {
    transform: skewX(0) scale(1);
  }
  50% {
    transform: skewX(5deg) scale(0.9);
  }
}

@keyframes particleUp {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: -100%;
    transform: scale(0.5);
  }
}

@keyframes glow {
  0%,
  100% {
    background-color: #fff;
  }
  50% {
    background-color: #ccc;
  }
}

.fire {
  position: absolute;
  top: 30px;
  left: 55px;
  width: 25px;
  height: 25px;
  background-color: transparent;
  margin-left: auto;
  margin-right: auto;
    z-index: 3;
}

.fire-main {
  position: absolute;
  height: 100%;
  width: 100%;
  animation: scaleUpDown 3s ease-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.fire-main .main-fire {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(farthest-corner at 10px 0, #0099ff 0%, #5fbfff 95%);
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 0 40% 60% 40%;
  filter: drop-shadow(0 0 10px #ededed);
}

.fire-main .particle-fire {
  position: absolute;
  top: 60%;
  left: 45%;
  width: 10px;
  height: 10px;
  background-color: #09f;
  border-radius: 50%;
  filter: drop-shadow(0 0 10px #ccc);
  animation: particleUp 2s ease-out 0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.fire-right {
  height: 100%;
  width: 100%;
  position: absolute;
  animation: shake 2s ease-out 0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.fire-right .main-fire {
  position: absolute;
  top: 15%;
  right: -25%;
  width: 80%;
  height: 80%;
  background-color: #c0c;
  transform: scaleX(0.8) rotate(80deg);
  border-radius: 0 40% 60% 40%;
  filter: drop-shadow(0 0 10px #ededed);
}

.fire-right .particle-fire {
  position: absolute;
  top: 45%;
  left: 50%;
  width: 15px;
  height: 15px;
  background-color: #d0d;
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 50%;
  filter: drop-shadow(0 0 10px #ededed);
  animation: particleUp 2s ease-out 0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.fire-left {
  position: absolute;
  height: 100%;
  width: 100%;
  animation: shake 3s ease-out 0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.fire-left .main-fire {
  position: absolute;
  top: 15%;
  left: -20%;
  width: 80%;
  height: 80%;
  background-color: #ddd;
  transform: scaleX(0.8) rotate(-10deg);
  border-radius: 0 40% 60% 40%;
  filter: drop-shadow(0 0 10px #ededed);
}

.fire-left .particle-fire {
  position: absolute;
  top: 45%;
  left: 30%;
  width: 15px;
  height: 15px;
  background-color: #dedede;
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 50%;
  filter: drop-shadow(0 0 10px #ededed);
  animation: particleUp 3s ease-out 0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.fire-bottom .main-fire {
  position: absolute;
  top: 30%;
  left: 20%;
  width: 75%;
  height: 75%;
  background-color: #ccc;
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 0 40% 100% 40%;
  filter: blur(10px);
  animation: glow 2s ease-out 0;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}