*,
*::before,
*::afeter {
  box-sizing: border-box;
}

// global colors

$background: #2d3d50;
$flame: #ffad00;
$flame-shadow: #ffad00;
$wax: #ffffff;
$wax-shadow: #d8deed;
$wick: #ad87a9;
$stand: #1c233e;

html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darken($background, 10%);
}

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 4px;
  box-shadow: 4px 8px 16px 0 #00000010;
  overflow: hidden;
  background: $background;
}

// to center the candle i used another div with transform on it

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// candle nesting

.candle {
  display: flex;
  flex-direction: column;
  align-items: center;

  &-flame {
    width: 15px;
    height: 30px;
    background: $flame;
    border-radius: 8px 8px 8px 8px / 20px 20px 8px 8px;
    box-shadow: 0px 0px 20px 0px $flame-shadow;
    animation: flame-twirl 15s ease infinite, glow 2s ease infinite;
  }

  &-wick {
    height: 10px;
    width: 3px;
    background: $wick;
  }

  &-wax {
    width: 40px;
    height: 110px;
    background: $wax;
    border-radius: 6px;
    box-shadow: inset -15px 0px 0px -10px $wax-shadow;
  }

  &-stand {
    width: 100px;
    height: 8px;
    background: $stand;
    border-radius: 3px;
  }
}

// animations

@keyframes flame-twirl {
  0%,
  22%,
  49%,
  62%,
  81%,
  100% {
    border-radius: 2px 14px 8px 8px / 20px 20px 8px 8px;
  }
  14%,
  32%,
  56%,
  70%,
  89% {
    border-radius: 14px 2px 8px 8px / 20px 20px 8px 8px;
  }
}

@keyframes glow {
  0%,
  30%,
  60%,
  80%,
  100% {
    box-shadow: 0 0 20px 0 #ffad00;
  }
  20%,
  50%,
  70% {
    box-shadow: 0 0 22px 0 #ffad00;
  }
}