@font-face {
  font-family: "Kenyan Coffee Rg";
  src: url("./assets/fonts/Kenyan Coffee Rg.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Slab";
  src: url("./assets/fonts/RobotoSlab-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Fire */
@keyframes burn {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 -5400px;
  }
}

#core {
  background: url("./assets/core.webp");
  -webkit-mask-image: url("./assets/maskCore.webp");
  mask-image: url("./assets/maskFlame.webp");
  filter: sepia(100%) saturate(10000%) hue-rotate(314deg)
    drop-shadow(20px 20px 80px rgba(255, 255, 220, 0.8));
}

#flames {
  background: url("./assets/flamesExtra.webp");
  -webkit-mask-image: url("./assets/maskFlame.webp");
  mask-image: url("./assets/maskFlame.webp");
  filter: sepia(100%) saturate(10000%) hue-rotate(299deg)
    drop-shadow(20px 20px 50px rgba(255, 0, 0, 0.8));
}

.animatedParts {
  background-repeat: repeat-y;
  -webkit-mask-size: contain;
  mask-size: contain;
  animation: burn 17s linear infinite;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}