<div class="header">
  <h1 class="title">Codevember <span class="number"> #15 </span></h1>
  <h2 class="type">Fire</h2>
  <div class="social">
		<a href="https://rominamartin.github.io/" class="social"><img src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="github"></img></a>
		<a href="https://twitter.com/rominamartinlib" class="social"><img src="https://i.imgsafe.org/43/431dd07874.png" alt="twitter"></img></a>
  </div>
</div>

<div class="content">
  <div class="light"></div>
  <div class="fire">
    <div class="back"></div>
    <div class="medium"></div>
    <div class="front"></div>
  </div>
  <div class="wood">
    <div class="stick"></div>
    <div class="stick"></div>
    <div class="stick"></div>
  </div>
  
</div>

$titleColor: #757780;
$numberColor: #ffb726;
$nameColor: #ff6234;
$backgroundColor: #3e252d;

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "Quicksand";
  background: radial-gradient(ellipse at center, #522e2a 0%, #321b20 100%) fixed;
}

.header {
  position: absolute;
  left: 10px;
  top: 10px;
  h1, h2 {margin: 0}
  
  h1 {color: $titleColor;}
  .number {color: $numberColor;}
  .type { color: $nameColor; }
  .social a img { 
    margin-top: 10px; 
    height: 1.5em; 
  }
}

.content {
  width: 60%;
  height: 60%;
  position: absolute;
  bottom: 0;
  left: 20%;
}
.fire {
  position: absolute;
  bottom: 4%;
  left: 25%;
  width: 30%;
  padding-bottom: 50%;
  
  .back {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-bottom: 100%;
    background: #ff6234;
    border-radius: 0 75% 75% 75%;
    transform: rotate(45deg);
    animation: fire 2s linear infinite alternate;
    animation-delay: 1s;
  }
  
  .medium {
    position: absolute;
    bottom: 5%;
    left: 10%;
    width: 80%;
    padding-bottom: 80%;
    background: #ff7d17;
    border-radius: 0 75% 75% 75%;
    transform: rotate(45deg);
    animation: fire 2s linear infinite alternate;
    animation-delay: .5s;
  }
  
  .front {
    position: absolute;
    bottom: 10%;
    left: 20%;
    width: 60%;
    padding-bottom: 60%;
    background: #ffb726;
    border-radius: 0 75% 75% 75%;
    transform: rotate(45deg);
    animation: fire 2s linear infinite alternate;
  }
  
  
}
.wood {
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 30%;
  display: flex;

  .stick {
    position: relative;
    width: 33%;
    padding-bottom: 33%;
    background: #714717;
    border-radius: 50%;
    
    &::before {
      content: "";
      position: absolute;
      width: 80%;
      padding-bottom: 80%;
      border-radius: 50%;
      left: 10%;
      top: 10%;
      background: #975314;
    }
    
    &::after {
      content: "";
      position: absolute;
      width: 50%;
      padding-bottom: 50%;
      border-radius: 50%;
      left: 25%;
      top: 25%;
      background: #714717;
    }
  }
}

.light {
  position: absolute;
  bottom: -5%;
  left: 3%;
  width: 75%;
  padding-bottom: 75%;
  border-radius: 50%;
  background: #522e2a;
  animation: light 2s linear infinite alternate;
  
  &::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 5%;
    width: 90%;
    padding-bottom: 90%;
    border-radius: 50%;
    background: #643627;
  }
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 12.5%;
    width: 75%;
    padding-bottom: 75%;
    border-radius: 50%;
    background: #743d25;
  }
}


@keyframes light {
  0%   {opacity: 1; transform: translate(0px) scale(1)}
  100% {opacity: .6; transform: translateY(-10px) scaleX(.9)}
}

@keyframes fire {
  0%   {opacity: 1; transform: scale(1) rotate(45deg)}
  100% {opacity: .8; transform: scale(.9) rotate(45deg)}
}