* {
  box-sizing: border-box;
}

body{
  background-color:#04151F;
}
#container{
  width: 765px;
  margin: 0 auto;
  margin-top: 80px;
}
@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: #ef5a00;
  }
  50% {
    background-color: #ff7800;
  }
}

.fire {
  position: relative;
  width: 220px;
  height: 220px;
  background-color: #04151F;
  top: 37px;
  margin-left: -7px;
  margin-left: auto;
  margin-right: auto;
}

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

.fire-main .main-fire {
  position: absolute;
  width: 90%;
  height: 90%;
  background-image: radial-gradient(farthest-corner at 10px 0, #ff7800 0%, #ff7800 95%);
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 0 40% 60% 40%;
}

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

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

.fire-right .main-fire {
  position: absolute;
  top: 15%;
  right: -25%;
  width: 90%;
  height: 90%;
  background-color: #ff7800;
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 0 40% 60% 40%;
}

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

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

.fire-left .main-fire {
  position: absolute;
  top: 15%;
  left: -20%;
  width: 90%;
  height: 90%;
  background-color: #ff7800;;
  transform: scaleX(0.8) rotate(45deg);
  border-radius: 0 40% 60% 40%;
}

.fire-left .particle-fire {
  position: absolute;
  top: 10%;
  left: 20%;
  width: 90%;
  height: 90%;
  background-color: #ff7800;;
  border-radius: 50%;
  animation: particleUp 3s infinite ease-out 0;
}

.head {
  position: relative;
      width: 210px;
      height: 210px;
      border-radius: 50%;
      background-color: #ff7800;
      margin-left: auto;
margin-right: auto;
margin-top: -115px;
z-index: 110;

}
.eyes{
  width: 45px;
      height: 45px;
      border-radius: 50%;
      background-color: black;
      position: absolute;
      margin-left: 35px;
      margin-top: 80px;
}
.eyes::after{
  content: "";
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background-color: black;
      position: absolute;
      margin-left: 100px;
      margin-top: -23px;
}
.pupil{
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-top: 10px;
  margin-left: 23px;
  background-color: white;
}
.pupil::after{
    content: "";
    position: absolute;
  width: 15px;
  height: 15px;
  z-index: 99;
  border-radius: 50%;
  margin-top: 0px;
  margin-left: 102px;
  background-color: white;
}
.mouth {
  position: absolute;
      margin-top: 139px;
        margin-left: 95px;
      margin-right: auto;
      width: 30px;
      height: 30px;
      background: black;
      border-radius: 100%;
}
.cheek-left{
  width: 20px;
  height: 20px;
  margin-left: 310px;
  position: absolute;
  margin-right: auto;
  Z-INDEX: 130;
  margin-top: -73px;
  background-color: #E55934;
  border-radius: 50%;
}
.cheek-right{
  width: 20px;
  height: 20px;
  margin-left: 432px;
  margin-right: auto;
  z-index: 130;
  position: absolute;
  margin-top: -70px;
  background-color: #E55934;
  border-radius: 50%;
}

/* WIP */

/* - Organize code
   - Solve mobile problem
   */