// Nos trois animations
@keyframes flame-orange
  0%
    transform: translate(-50%, -90%)  rotate(134deg) scale(1)
  50%
    transform: translate(-45%, -120%) rotate(134deg) scale(1.1)
  100%
    transform: translate(-50%, -90%)  rotate(134deg) scale(1)

@keyframes flame-yellow
  0%
    transform: translate(-50%, -90%)  rotate(134deg) scale(1)
  50%
    transform: translate(-45%, -110%) rotate(134deg) scale(1.2)
  100%
    transform: translate(-50%, -90%)  rotate(134deg) scale(1)

@keyframes flame-red
  0%
    transform: translate(-40%, -90%) rotate(134deg) scale(1)
  100%
    transform: translate(-55%, -220%) rotate(134deg) scale(0)  

/* Element Properties */  
body
  background: #111217

#night-fire
  position: relative
  width: 240px
  top: 50%
  margin: 280px auto

// Les bout de bois
#nightfirewood
  margin: auto
  position: relative
  z-index: 10
  width: 15em
  height: 2em
  
  &:before, &::after
    content: ''
    top: 0
    left: 0
    position: absolute
    width: 100%
    height: 100%
    background: #70392f
    border-radius: .3em
    
  &:before
    transform: rotate(15deg)
  &:after
    transform: rotate(-15deg)

// la flame !
[class^="flame"]
  border-radius: .3em
  position: absolute
  transform: translate(-50%, -90%) rotate(134deg)
  left: 50%
  
.flame-yellow
  top: -30%
  width: 5em
  height: 5em
  background: #FFDC01
  z-index: 2 
  animation: flame-yellow 1s infinite
  
.flame-orange
  top: -100%
  width: 8em
  height: 8em
  background: #CD8408
  z-index: 1
  animation: flame-orange 1s infinite

.flame-red
  top: -400%
  width: 5em
  height: 5em
  background: #f73B01 
  z-index: 0
  animation: flame-red 1s infinite