body {
  background: #22223B;
  padding-top: 3em;
  overflow-x: hidden;
  overflow-y: hidden;
  overflow: hidden;
}

.title {
  font-size: 1em;
  padding-top: 1em;
  font-family: "Corben", cursive;
  letter-spacing: 0.6em;
  line-height: 1.4em;
  text-transform: uppercase;
  color: whitesmoke;
  text-align: center;
}

section {
  position: relative;
  height: 70vh;
}

.noise {
  width: 100vw;
  height: 80vh;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  background: radial-gradient(circle at 50% 50%, rgb(0, 0, 0), rgba(0, 0, 0, 0)), url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  filter: contrast(125%) brightness(650%) invert(100%);
  mix-blend-mode: color-dodge;
}

.spells__icon {
  position: absolute;
  top: 45%;
  left: 45%;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  --az: calc(var(--i)*1turn/var(--n));
  transform: rotate(var(--az)) translate(6em) rotate(calc(-1 * var(--az)));
  font-size: 1em;
  text-align: center;
  counter-reset: i var(--i);
  padding: 0.75em;
  transition: 0.3s;
}
@media screen and (min-width: 20em) {
  .spells__icon {
    transform: rotate(var(--az)) translate(9em) rotate(calc(-1 * var(--az)));
  }
}
@media screen and (min-width: 40em) {
  .spells__icon {
    transform: rotate(var(--az)) translate(9em) rotate(calc(-1 * var(--az)));
  }
}

.spells__icon:hover {
  background-color: white;
}

.spells__icon img {
  position: relative;
  width: 100%;
  justify-self: center;
}
@media screen and (min-width: 50em) {
  .spells__icon img {
    width: 100%;
  }
}

.popup-wrapper {
  position: fixed;
  opacity: 0;
  pointer-events: none;
  width: 90%;
  top: 3em;
  left: 5%;
  height: 100vh;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 30em) {
  .popup-wrapper {
    width: 100%;
    left: 0;
  }
}

.popup__content {
  opacity: 0;
  pointer-events: none;
  margin-top: 3em;
  margin: auto;
  padding: 3em;
  max-width: 500px;
  background-color: whitesmoke;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.popup__icon {
  text-align: center;
}

.popup__icon img {
  height: 5em;
  margin-left: auto;
  margin-right: auto;
}

.popup__text h2 {
  font-family: "Mrs Saint Delafield", cursive;
  text-align: center;
  font-size: 3em;
  color: #22223B;
}

.popup__text p {
  font-family: Vollkorn, sans-serif;
  margin-top: 2em;
}

.popup__background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* LUMOS */
.lumos__overlay {
  mix-blend-mode: multiply;
}

.lumos__mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgb(0, 0, 0);
  z-index: 1;
  pointer-events: none;
}

.lumos__light {
  -webkit-animation: lumos__glow 2s ease-out infinite;
          animation: lumos__glow 2s ease-out infinite;
  position: absolute;
  z-index: 2;
}

@-webkit-keyframes lumos__glow {
  0% {
    box-shadow: 0 0 60px 50px rgb(255, 255, 255), 0 0 85px 60px rgb(255, 130, 255), 0 0 110px 100px rgb(9, 255, 255); /* outer cyan */
  }
  20% {
    box-shadow: 0 0 60px 50px rgb(255, 255, 255), 0 0 85px 60px rgba(255, 130, 255, 0.8), 0 0 110px 100px rgba(9, 255, 255, 0.65); /* outer cyan */
  }
  40% {
    box-shadow: 0 0 60px 50px rgba(255, 255, 255, 0.6), 0 0 85px 60px rgba(255, 130, 255, 0.7), 0 0 110px 100px rgba(9, 255, 255, 0.6); /* outer cyan */
  }
  50% {
    box-shadow: 0 0 60px 50px rgba(255, 255, 255, 0.8), 0 0 85px 60px rgba(255, 130, 255, 0.5), 0 0 110px 100px rgba(9, 255, 255, 0.9); /* outer cyan */
  }
  100% {
    box-shadow: 0 0 60px 50px rgb(255, 255, 255), 0 0 85px 60px rgb(255, 130, 255), 0 0 110px 100px rgb(9, 255, 255); /* outer cyan */
  }
}

@keyframes lumos__glow {
  0% {
    box-shadow: 0 0 60px 50px rgb(255, 255, 255), 0 0 85px 60px rgb(255, 130, 255), 0 0 110px 100px rgb(9, 255, 255); /* outer cyan */
  }
  20% {
    box-shadow: 0 0 60px 50px rgb(255, 255, 255), 0 0 85px 60px rgba(255, 130, 255, 0.8), 0 0 110px 100px rgba(9, 255, 255, 0.65); /* outer cyan */
  }
  40% {
    box-shadow: 0 0 60px 50px rgba(255, 255, 255, 0.6), 0 0 85px 60px rgba(255, 130, 255, 0.7), 0 0 110px 100px rgba(9, 255, 255, 0.6); /* outer cyan */
  }
  50% {
    box-shadow: 0 0 60px 50px rgba(255, 255, 255, 0.8), 0 0 85px 60px rgba(255, 130, 255, 0.5), 0 0 110px 100px rgba(9, 255, 255, 0.9); /* outer cyan */
  }
  100% {
    box-shadow: 0 0 60px 50px rgb(255, 255, 255), 0 0 85px 60px rgb(255, 130, 255), 0 0 110px 100px rgb(9, 255, 255); /* outer cyan */
  }
}
/* PROTEGO */
.protego__overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  border-radius: 100%;
  pointer-events: none;
  transition: 1s;
  background: radial-gradient(circle at center, cyan, rgb(77, 136, 212), blue);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  width: 150%;
  height: 250%;
  opacity: 0.2;
}

@-webkit-keyframes expand {
  0% {
    background: radial-gradient(circle at center, cyan, rgb(77, 136, 212), blue);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    width: 0%;
    height: 0%;
  }
  85% {
    background: radial-gradient(circle at center, cyan, rgb(77, 136, 212), blue);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    width: 150%;
    height: 250%;
  }
  100% {
    background: radial-gradient(circle at center, cyan, rgb(77, 136, 212), blue);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    width: 250%;
    height: 350%;
    opacity: 0.2;
  }
}

@keyframes expand {
  0% {
    background: radial-gradient(circle at center, cyan, rgb(77, 136, 212), blue);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    width: 0%;
    height: 0%;
  }
  85% {
    background: radial-gradient(circle at center, cyan, rgb(77, 136, 212), blue);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    width: 150%;
    height: 250%;
  }
  100% {
    background: radial-gradient(circle at center, cyan, rgb(77, 136, 212), blue);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    width: 250%;
    height: 350%;
    opacity: 0.2;
  }
}
.popup__protego:hover .protego__overlay {
  -webkit-animation: expand 1s ease;
          animation: expand 1s ease;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  transition: 4s;
}

/* REVELIO */
.popup__revelio .popup-button {
  transition: 1s;
  opacity: 0;
}

.popup__revelio h2 {
  opacity: 0;
  transition: 0.5s;
}

.popup__revelio h2:hover {
  opacity: 1;
}

.popup__revelio em {
  opacity: 0;
  transition: 0.5s;
  font-style: normal;
}

.popup__revelio .popup__icon img {
  transition: 1.5s;
  opacity: 0;
}

.popup__revelio .popup__icon img:hover {
  opacity: 1;
}

.popup__revelio em:hover {
  opacity: 1;
}

.popup__revelio .popup-button {
  transition: 2s;
}

.popup__revelio .popup-button:hover {
  opacity: 1;
}

/* WINGARDIUM LEVIOSA */
.wl__content-hover {
  -webkit-animation: wl__float 6s ease-in-out infinite;
          animation: wl__float 6s ease-in-out infinite;
}

.wl__hover p {
  -webkit-animation: wl__text-float 4s ease-in-out infinite;
          animation: wl__text-float 4s ease-in-out infinite;
}

.wl__hover h2 {
  -webkit-animation: wl__header-float 4s ease-in-out infinite;
          animation: wl__header-float 4s ease-in-out infinite;
}

.wl__hover img {
  -webkit-animation: wl__icon-float 4s ease-out infinite;
          animation: wl__icon-float 4s ease-out infinite;
}

.wl__hover .popup-button {
  -webkit-animation: wl__header-float 4s ease-in-out infinite;
          animation: wl__header-float 4s ease-in-out infinite;
}

@-webkit-keyframes wl__float {
  0% {
    box-shadow: -15px 20px 5px rgba(0, 0, 0, 0.4);
    transform: translateX(0px);
    transform: translatey(0px);
    rotate: 0deg;
  }
  20% {
    transform: translatey(-10px);
    rotate: -4deg;
  }
  50% {
    box-shadow: -15px 30px 20px rgba(0, 0, 0, 0.2);
    transform: translatey(-30px);
    rotate: 2deg;
  }
  70% {
    rotate: 4deg;
  }
  100% {
    box-shadow: -15px 20px 5px rgba(0, 0, 0, 0.4);
    transform: translatey(0px);
    rotate: 0deg;
  }
}

@keyframes wl__float {
  0% {
    box-shadow: -15px 20px 5px rgba(0, 0, 0, 0.4);
    transform: translateX(0px);
    transform: translatey(0px);
    rotate: 0deg;
  }
  20% {
    transform: translatey(-10px);
    rotate: -4deg;
  }
  50% {
    box-shadow: -15px 30px 20px rgba(0, 0, 0, 0.2);
    transform: translatey(-30px);
    rotate: 2deg;
  }
  70% {
    rotate: 4deg;
  }
  100% {
    box-shadow: -15px 20px 5px rgba(0, 0, 0, 0.4);
    transform: translatey(0px);
    rotate: 0deg;
  }
}
@-webkit-keyframes wl__text-float {
  0% {
    text-shadow: 5px 15px 3px rgba(0, 0, 0, 0.4);
    transform: translatey(0px);
  }
  50% {
    text-shadow: 5px 25px 6px rgba(0, 0, 0, 0.2);
    transform: translatey(-20px);
  }
  100% {
    text-shadow: 5px 15px 3px rgba(0, 0, 0, 0.4);
    transform: translatey(0px);
  }
}
@keyframes wl__text-float {
  0% {
    text-shadow: 5px 15px 3px rgba(0, 0, 0, 0.4);
    transform: translatey(0px);
  }
  50% {
    text-shadow: 5px 25px 6px rgba(0, 0, 0, 0.2);
    transform: translatey(-20px);
  }
  100% {
    text-shadow: 5px 15px 3px rgba(0, 0, 0, 0.4);
    transform: translatey(0px);
  }
}
@-webkit-keyframes wl__header-float {
  0% {
    text-shadow: 5px 15px 3px rgba(0, 0, 0, 0.4);
    transform: translatey(0px);
  }
  55% {
    text-shadow: 5px 25px 6px rgba(0, 0, 0, 0.2);
    transform: translatey(-20px);
  }
  100% {
    text-shadow: 5px 15px 3px rgba(0, 0, 0, 0.4);
    transform: translatey(0px);
  }
}
@keyframes wl__header-float {
  0% {
    text-shadow: 5px 15px 3px rgba(0, 0, 0, 0.4);
    transform: translatey(0px);
  }
  55% {
    text-shadow: 5px 25px 6px rgba(0, 0, 0, 0.2);
    transform: translatey(-20px);
  }
  100% {
    text-shadow: 5px 15px 3px rgba(0, 0, 0, 0.4);
    transform: translatey(0px);
  }
}
@-webkit-keyframes wl__icon-float {
  0% {
    filter: drop-shadow(5px 15px 3px rgba(0, 0, 0, 0.7));
    transform: translatey(0px);
  }
  60% {
    filter: drop-shadow(5px 25px 6px rgba(0, 0, 0, 0.4));
    transform: translatey(-20px);
  }
  100% {
    filter: drop-shadow(5px 15px 3px rgba(0, 0, 0, 0.7));
    transform: translatey(0px);
  }
}
@keyframes wl__icon-float {
  0% {
    filter: drop-shadow(5px 15px 3px rgba(0, 0, 0, 0.7));
    transform: translatey(0px);
  }
  60% {
    filter: drop-shadow(5px 25px 6px rgba(0, 0, 0, 0.4));
    transform: translatey(-20px);
  }
  100% {
    filter: drop-shadow(5px 15px 3px rgba(0, 0, 0, 0.7));
    transform: translatey(0px);
  }
}
/* EVANESCO */
.popup__evanesco h2, p {
  transition: 1s;
}

.popup-button {
  transition: 1s;
}

.popup__evanesco:hover h2 {
  opacity: 0;
}

.popup__evanesco p {
  transition: 0.5s;
  font-style: normal;
}

.popup__evanesco .popup__icon img {
  transition: 1.5s;
}

.popup__evanesco:hover .popup__icon img {
  opacity: 0;
}

.popup__evanesco:hover p {
  opacity: 0;
}

.popup__evanesco .popup-button {
  transition: 2s;
}

.popup__evanesco:hover .popup-button {
  opacity: 0;
}

/* REDUCIO */
.popup__reducio {
  transition: 0.5s;
  margin-top: 3em;
  margin: auto;
}

.reducio__hover {
  transition: 4s;
}

.popup__reducio:hover .reducio__hover {
  transform: scale(0.5);
  text-shadow: 5px 15px 3px rgba(0, 0, 0, 0.4);
}

.popup__reducio:hover .popup-button {
  text-shadow: 5px 15px 3px rgba(0, 0, 0, 0.4);
}

.popup__reducio img {
  transition: 1s;
}

.popup__reducio:hover img {
  filter: drop-shadow(5px 15px 7px rgba(0, 0, 0, 0.7));
}

/* INCENDIO */
.incendio__fire {
  pointer-events: none;
  font-size: 2em;
  position: absolute;
  bottom: 0;
  left: 25%;
  filter: blur(0.02em);
  width: 50vw;
  height: 12em;
}

.incendio__particle {
  -webkit-animation: incendio__rise 1s ease-in infinite;
          animation: incendio__rise 1s ease-in infinite;
  background-image: radial-gradient(rgb(255, 80, 0) 20%, rgba(255, 80, 0, 0) 70%);
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0;
  position: absolute;
  bottom: 0;
  width: 5em;
  height: 5em;
}
.incendio__particle:nth-of-type(1) {
  -webkit-animation-delay: 0.1122808707s;
          animation-delay: 0.1122808707s;
  left: calc((100% - 5em) * 0);
}
.incendio__particle:nth-of-type(2) {
  -webkit-animation-delay: 0.1710061261s;
          animation-delay: 0.1710061261s;
  left: calc((100% - 5em) * 0.02);
}
.incendio__particle:nth-of-type(3) {
  -webkit-animation-delay: 0.6843699508s;
          animation-delay: 0.6843699508s;
  left: calc((100% - 5em) * 0.04);
}
.incendio__particle:nth-of-type(4) {
  -webkit-animation-delay: 0.1339113105s;
          animation-delay: 0.1339113105s;
  left: calc((100% - 5em) * 0.06);
}
.incendio__particle:nth-of-type(5) {
  -webkit-animation-delay: 0.2821842442s;
          animation-delay: 0.2821842442s;
  left: calc((100% - 5em) * 0.08);
}
.incendio__particle:nth-of-type(6) {
  -webkit-animation-delay: 0.840898335s;
          animation-delay: 0.840898335s;
  left: calc((100% - 5em) * 0.1);
}
.incendio__particle:nth-of-type(7) {
  -webkit-animation-delay: 0.3509805347s;
          animation-delay: 0.3509805347s;
  left: calc((100% - 5em) * 0.12);
}
.incendio__particle:nth-of-type(8) {
  -webkit-animation-delay: 0.9171813355s;
          animation-delay: 0.9171813355s;
  left: calc((100% - 5em) * 0.14);
}
.incendio__particle:nth-of-type(9) {
  -webkit-animation-delay: 0.2895138497s;
          animation-delay: 0.2895138497s;
  left: calc((100% - 5em) * 0.16);
}
.incendio__particle:nth-of-type(10) {
  -webkit-animation-delay: 0.5610743656s;
          animation-delay: 0.5610743656s;
  left: calc((100% - 5em) * 0.18);
}
.incendio__particle:nth-of-type(11) {
  -webkit-animation-delay: 0.6543181888s;
          animation-delay: 0.6543181888s;
  left: calc((100% - 5em) * 0.2);
}
.incendio__particle:nth-of-type(12) {
  -webkit-animation-delay: 0.7315494019s;
          animation-delay: 0.7315494019s;
  left: calc((100% - 5em) * 0.22);
}
.incendio__particle:nth-of-type(13) {
  -webkit-animation-delay: 0.7709808914s;
          animation-delay: 0.7709808914s;
  left: calc((100% - 5em) * 0.24);
}
.incendio__particle:nth-of-type(14) {
  -webkit-animation-delay: 0.8338976546s;
          animation-delay: 0.8338976546s;
  left: calc((100% - 5em) * 0.26);
}
.incendio__particle:nth-of-type(15) {
  -webkit-animation-delay: 0.9535412771s;
          animation-delay: 0.9535412771s;
  left: calc((100% - 5em) * 0.28);
}
.incendio__particle:nth-of-type(16) {
  -webkit-animation-delay: 0.8716331196s;
          animation-delay: 0.8716331196s;
  left: calc((100% - 5em) * 0.3);
}
.incendio__particle:nth-of-type(17) {
  -webkit-animation-delay: 0.5989371765s;
          animation-delay: 0.5989371765s;
  left: calc((100% - 5em) * 0.32);
}
.incendio__particle:nth-of-type(18) {
  -webkit-animation-delay: 0.651122098s;
          animation-delay: 0.651122098s;
  left: calc((100% - 5em) * 0.34);
}
.incendio__particle:nth-of-type(19) {
  -webkit-animation-delay: 0.6830477399s;
          animation-delay: 0.6830477399s;
  left: calc((100% - 5em) * 0.36);
}
.incendio__particle:nth-of-type(20) {
  -webkit-animation-delay: 0.3311692628s;
          animation-delay: 0.3311692628s;
  left: calc((100% - 5em) * 0.38);
}
.incendio__particle:nth-of-type(21) {
  -webkit-animation-delay: 0.2466428831s;
          animation-delay: 0.2466428831s;
  left: calc((100% - 5em) * 0.4);
}
.incendio__particle:nth-of-type(22) {
  -webkit-animation-delay: 0.7655823476s;
          animation-delay: 0.7655823476s;
  left: calc((100% - 5em) * 0.42);
}
.incendio__particle:nth-of-type(23) {
  -webkit-animation-delay: 0.9553444804s;
          animation-delay: 0.9553444804s;
  left: calc((100% - 5em) * 0.44);
}
.incendio__particle:nth-of-type(24) {
  -webkit-animation-delay: 0.3315976892s;
          animation-delay: 0.3315976892s;
  left: calc((100% - 5em) * 0.46);
}
.incendio__particle:nth-of-type(25) {
  -webkit-animation-delay: 0.8266955458s;
          animation-delay: 0.8266955458s;
  left: calc((100% - 5em) * 0.48);
}
.incendio__particle:nth-of-type(26) {
  -webkit-animation-delay: 0.0876301452s;
          animation-delay: 0.0876301452s;
  left: calc((100% - 5em) * 0.5);
}
.incendio__particle:nth-of-type(27) {
  -webkit-animation-delay: 0.2424458747s;
          animation-delay: 0.2424458747s;
  left: calc((100% - 5em) * 0.52);
}
.incendio__particle:nth-of-type(28) {
  -webkit-animation-delay: 0.9109454518s;
          animation-delay: 0.9109454518s;
  left: calc((100% - 5em) * 0.54);
}
.incendio__particle:nth-of-type(29) {
  -webkit-animation-delay: 0.083024345s;
          animation-delay: 0.083024345s;
  left: calc((100% - 5em) * 0.56);
}
.incendio__particle:nth-of-type(30) {
  -webkit-animation-delay: 0.4248892985s;
          animation-delay: 0.4248892985s;
  left: calc((100% - 5em) * 0.58);
}
.incendio__particle:nth-of-type(31) {
  -webkit-animation-delay: 0.5545182572s;
          animation-delay: 0.5545182572s;
  left: calc((100% - 5em) * 0.6);
}
.incendio__particle:nth-of-type(32) {
  -webkit-animation-delay: 0.9999812986s;
          animation-delay: 0.9999812986s;
  left: calc((100% - 5em) * 0.62);
}
.incendio__particle:nth-of-type(33) {
  -webkit-animation-delay: 0.6030085482s;
          animation-delay: 0.6030085482s;
  left: calc((100% - 5em) * 0.64);
}
.incendio__particle:nth-of-type(34) {
  -webkit-animation-delay: 0.8996992716s;
          animation-delay: 0.8996992716s;
  left: calc((100% - 5em) * 0.66);
}
.incendio__particle:nth-of-type(35) {
  -webkit-animation-delay: 0.9910182978s;
          animation-delay: 0.9910182978s;
  left: calc((100% - 5em) * 0.68);
}
.incendio__particle:nth-of-type(36) {
  -webkit-animation-delay: 0.6357741509s;
          animation-delay: 0.6357741509s;
  left: calc((100% - 5em) * 0.7);
}
.incendio__particle:nth-of-type(37) {
  -webkit-animation-delay: 0.7771961356s;
          animation-delay: 0.7771961356s;
  left: calc((100% - 5em) * 0.72);
}
.incendio__particle:nth-of-type(38) {
  -webkit-animation-delay: 0.1160283533s;
          animation-delay: 0.1160283533s;
  left: calc((100% - 5em) * 0.74);
}
.incendio__particle:nth-of-type(39) {
  -webkit-animation-delay: 0.7191879401s;
          animation-delay: 0.7191879401s;
  left: calc((100% - 5em) * 0.76);
}
.incendio__particle:nth-of-type(40) {
  -webkit-animation-delay: 0.1119297341s;
          animation-delay: 0.1119297341s;
  left: calc((100% - 5em) * 0.78);
}
.incendio__particle:nth-of-type(41) {
  -webkit-animation-delay: 0.3491176294s;
          animation-delay: 0.3491176294s;
  left: calc((100% - 5em) * 0.8);
}
.incendio__particle:nth-of-type(42) {
  -webkit-animation-delay: 0.9717824082s;
          animation-delay: 0.9717824082s;
  left: calc((100% - 5em) * 0.82);
}
.incendio__particle:nth-of-type(43) {
  -webkit-animation-delay: 0.9850722429s;
          animation-delay: 0.9850722429s;
  left: calc((100% - 5em) * 0.84);
}
.incendio__particle:nth-of-type(44) {
  -webkit-animation-delay: 0.2020655503s;
          animation-delay: 0.2020655503s;
  left: calc((100% - 5em) * 0.86);
}
.incendio__particle:nth-of-type(45) {
  -webkit-animation-delay: 0.3288341414s;
          animation-delay: 0.3288341414s;
  left: calc((100% - 5em) * 0.88);
}
.incendio__particle:nth-of-type(46) {
  -webkit-animation-delay: 0.0390464877s;
          animation-delay: 0.0390464877s;
  left: calc((100% - 5em) * 0.9);
}
.incendio__particle:nth-of-type(47) {
  -webkit-animation-delay: 0.19634636s;
          animation-delay: 0.19634636s;
  left: calc((100% - 5em) * 0.92);
}
.incendio__particle:nth-of-type(48) {
  -webkit-animation-delay: 0.6459871217s;
          animation-delay: 0.6459871217s;
  left: calc((100% - 5em) * 0.94);
}
.incendio__particle:nth-of-type(49) {
  -webkit-animation-delay: 0.3840241699s;
          animation-delay: 0.3840241699s;
  left: calc((100% - 5em) * 0.96);
}
.incendio__particle:nth-of-type(50) {
  -webkit-animation-delay: 0.5886080838s;
          animation-delay: 0.5886080838s;
  left: calc((100% - 5em) * 0.98);
}

@-webkit-keyframes incendio__rise {
  from {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(-10em) scale(0);
  }
}

@keyframes incendio__rise {
  from {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(-10em) scale(0);
  }
}
/* VERMILLIOUS */
.firework {
  position: absolute;
  width: 5px;
  height: 5px;
  opacity: 1;
}

@-webkit-keyframes launchFirework {
  to {
    opacity: 0;
  }
}

@keyframes launchFirework {
  to {
    opacity: 0;
  }
}
@-webkit-keyframes launchFirework1 {
  to {
    transform: translate(-9px, -91px);
  }
}
@keyframes launchFirework1 {
  to {
    transform: translate(-9px, -91px);
  }
}
.firework1 {
  -webkit-animation: launchFirework 838ms linear forwards, launchFirework1 504ms linear forwards;
          animation: launchFirework 838ms linear forwards, launchFirework1 504ms linear forwards;
}

@-webkit-keyframes launchFirework2 {
  to {
    transform: translate(71px, 93px);
  }
}

@keyframes launchFirework2 {
  to {
    transform: translate(71px, 93px);
  }
}
.firework2 {
  -webkit-animation: launchFirework 523ms linear forwards, launchFirework2 1041ms linear forwards;
          animation: launchFirework 523ms linear forwards, launchFirework2 1041ms linear forwards;
}

@-webkit-keyframes launchFirework3 {
  to {
    transform: translate(-63px, -35px);
  }
}

@keyframes launchFirework3 {
  to {
    transform: translate(-63px, -35px);
  }
}
.firework3 {
  -webkit-animation: launchFirework 1327ms linear forwards, launchFirework3 1315ms linear forwards;
          animation: launchFirework 1327ms linear forwards, launchFirework3 1315ms linear forwards;
}

@-webkit-keyframes launchFirework4 {
  to {
    transform: translate(39px, -24px);
  }
}

@keyframes launchFirework4 {
  to {
    transform: translate(39px, -24px);
  }
}
.firework4 {
  -webkit-animation: launchFirework 810ms linear forwards, launchFirework4 556ms linear forwards;
          animation: launchFirework 810ms linear forwards, launchFirework4 556ms linear forwards;
}

@-webkit-keyframes launchFirework5 {
  to {
    transform: translate(35px, -36px);
  }
}

@keyframes launchFirework5 {
  to {
    transform: translate(35px, -36px);
  }
}
.firework5 {
  -webkit-animation: launchFirework 1057ms linear forwards, launchFirework5 777ms linear forwards;
          animation: launchFirework 1057ms linear forwards, launchFirework5 777ms linear forwards;
}

@-webkit-keyframes launchFirework6 {
  to {
    transform: translate(29px, 60px);
  }
}

@keyframes launchFirework6 {
  to {
    transform: translate(29px, 60px);
  }
}
.firework6 {
  -webkit-animation: launchFirework 897ms linear forwards, launchFirework6 1163ms linear forwards;
          animation: launchFirework 897ms linear forwards, launchFirework6 1163ms linear forwards;
}

@-webkit-keyframes launchFirework7 {
  to {
    transform: translate(21px, 88px);
  }
}

@keyframes launchFirework7 {
  to {
    transform: translate(21px, 88px);
  }
}
.firework7 {
  -webkit-animation: launchFirework 1151ms linear forwards, launchFirework7 1199ms linear forwards;
          animation: launchFirework 1151ms linear forwards, launchFirework7 1199ms linear forwards;
}

@-webkit-keyframes launchFirework8 {
  to {
    transform: translate(71px, 74px);
  }
}

@keyframes launchFirework8 {
  to {
    transform: translate(71px, 74px);
  }
}
.firework8 {
  -webkit-animation: launchFirework 765ms linear forwards, launchFirework8 642ms linear forwards;
          animation: launchFirework 765ms linear forwards, launchFirework8 642ms linear forwards;
}

@-webkit-keyframes launchFirework9 {
  to {
    transform: translate(-13px, 63px);
  }
}

@keyframes launchFirework9 {
  to {
    transform: translate(-13px, 63px);
  }
}
.firework9 {
  -webkit-animation: launchFirework 1390ms linear forwards, launchFirework9 789ms linear forwards;
          animation: launchFirework 1390ms linear forwards, launchFirework9 789ms linear forwards;
}

@-webkit-keyframes launchFirework10 {
  to {
    transform: translate(9px, 63px);
  }
}

@keyframes launchFirework10 {
  to {
    transform: translate(9px, 63px);
  }
}
.firework10 {
  -webkit-animation: launchFirework 1076ms linear forwards, launchFirework10 1379ms linear forwards;
          animation: launchFirework 1076ms linear forwards, launchFirework10 1379ms linear forwards;
}

@-webkit-keyframes launchFirework11 {
  to {
    transform: translate(37px, 22px);
  }
}

@keyframes launchFirework11 {
  to {
    transform: translate(37px, 22px);
  }
}
.firework11 {
  -webkit-animation: launchFirework 898ms linear forwards, launchFirework11 1139ms linear forwards;
          animation: launchFirework 898ms linear forwards, launchFirework11 1139ms linear forwards;
}

@-webkit-keyframes launchFirework12 {
  to {
    transform: translate(91px, 94px);
  }
}

@keyframes launchFirework12 {
  to {
    transform: translate(91px, 94px);
  }
}
.firework12 {
  -webkit-animation: launchFirework 1048ms linear forwards, launchFirework12 1199ms linear forwards;
          animation: launchFirework 1048ms linear forwards, launchFirework12 1199ms linear forwards;
}

@-webkit-keyframes launchFirework13 {
  to {
    transform: translate(-71px, 12px);
  }
}

@keyframes launchFirework13 {
  to {
    transform: translate(-71px, 12px);
  }
}
.firework13 {
  -webkit-animation: launchFirework 682ms linear forwards, launchFirework13 724ms linear forwards;
          animation: launchFirework 682ms linear forwards, launchFirework13 724ms linear forwards;
}

@-webkit-keyframes launchFirework14 {
  to {
    transform: translate(-52px, 13px);
  }
}

@keyframes launchFirework14 {
  to {
    transform: translate(-52px, 13px);
  }
}
.firework14 {
  -webkit-animation: launchFirework 1023ms linear forwards, launchFirework14 1346ms linear forwards;
          animation: launchFirework 1023ms linear forwards, launchFirework14 1346ms linear forwards;
}

@-webkit-keyframes launchFirework15 {
  to {
    transform: translate(22px, 95px);
  }
}

@keyframes launchFirework15 {
  to {
    transform: translate(22px, 95px);
  }
}
.firework15 {
  -webkit-animation: launchFirework 1319ms linear forwards, launchFirework15 919ms linear forwards;
          animation: launchFirework 1319ms linear forwards, launchFirework15 919ms linear forwards;
}

@-webkit-keyframes launchFirework16 {
  to {
    transform: translate(88px, 98px);
  }
}

@keyframes launchFirework16 {
  to {
    transform: translate(88px, 98px);
  }
}
.firework16 {
  -webkit-animation: launchFirework 720ms linear forwards, launchFirework16 565ms linear forwards;
          animation: launchFirework 720ms linear forwards, launchFirework16 565ms linear forwards;
}

@-webkit-keyframes launchFirework17 {
  to {
    transform: translate(66px, -27px);
  }
}

@keyframes launchFirework17 {
  to {
    transform: translate(66px, -27px);
  }
}
.firework17 {
  -webkit-animation: launchFirework 549ms linear forwards, launchFirework17 1443ms linear forwards;
          animation: launchFirework 549ms linear forwards, launchFirework17 1443ms linear forwards;
}

@-webkit-keyframes launchFirework18 {
  to {
    transform: translate(43px, -79px);
  }
}

@keyframes launchFirework18 {
  to {
    transform: translate(43px, -79px);
  }
}
.firework18 {
  -webkit-animation: launchFirework 740ms linear forwards, launchFirework18 1458ms linear forwards;
          animation: launchFirework 740ms linear forwards, launchFirework18 1458ms linear forwards;
}

@-webkit-keyframes launchFirework19 {
  to {
    transform: translate(-47px, 61px);
  }
}

@keyframes launchFirework19 {
  to {
    transform: translate(-47px, 61px);
  }
}
.firework19 {
  -webkit-animation: launchFirework 1308ms linear forwards, launchFirework19 1495ms linear forwards;
          animation: launchFirework 1308ms linear forwards, launchFirework19 1495ms linear forwards;
}

@-webkit-keyframes launchFirework20 {
  to {
    transform: translate(95px, -77px);
  }
}

@keyframes launchFirework20 {
  to {
    transform: translate(95px, -77px);
  }
}
.firework20 {
  -webkit-animation: launchFirework 1431ms linear forwards, launchFirework20 505ms linear forwards;
          animation: launchFirework 1431ms linear forwards, launchFirework20 505ms linear forwards;
}

@-webkit-keyframes launchFirework21 {
  to {
    transform: translate(100px, 6px);
  }
}

@keyframes launchFirework21 {
  to {
    transform: translate(100px, 6px);
  }
}
.firework21 {
  -webkit-animation: launchFirework 1458ms linear forwards, launchFirework21 628ms linear forwards;
          animation: launchFirework 1458ms linear forwards, launchFirework21 628ms linear forwards;
}

@-webkit-keyframes launchFirework22 {
  to {
    transform: translate(-17px, -92px);
  }
}

@keyframes launchFirework22 {
  to {
    transform: translate(-17px, -92px);
  }
}
.firework22 {
  -webkit-animation: launchFirework 772ms linear forwards, launchFirework22 1017ms linear forwards;
          animation: launchFirework 772ms linear forwards, launchFirework22 1017ms linear forwards;
}

@-webkit-keyframes launchFirework23 {
  to {
    transform: translate(-88px, 64px);
  }
}

@keyframes launchFirework23 {
  to {
    transform: translate(-88px, 64px);
  }
}
.firework23 {
  -webkit-animation: launchFirework 1298ms linear forwards, launchFirework23 758ms linear forwards;
          animation: launchFirework 1298ms linear forwards, launchFirework23 758ms linear forwards;
}

@-webkit-keyframes launchFirework24 {
  to {
    transform: translate(44px, 36px);
  }
}

@keyframes launchFirework24 {
  to {
    transform: translate(44px, 36px);
  }
}
.firework24 {
  -webkit-animation: launchFirework 1144ms linear forwards, launchFirework24 595ms linear forwards;
          animation: launchFirework 1144ms linear forwards, launchFirework24 595ms linear forwards;
}

@-webkit-keyframes launchFirework25 {
  to {
    transform: translate(-24px, 7px);
  }
}

@keyframes launchFirework25 {
  to {
    transform: translate(-24px, 7px);
  }
}
.firework25 {
  -webkit-animation: launchFirework 1424ms linear forwards, launchFirework25 988ms linear forwards;
          animation: launchFirework 1424ms linear forwards, launchFirework25 988ms linear forwards;
}

@-webkit-keyframes launchFirework26 {
  to {
    transform: translate(-92px, 33px);
  }
}

@keyframes launchFirework26 {
  to {
    transform: translate(-92px, 33px);
  }
}
.firework26 {
  -webkit-animation: launchFirework 1488ms linear forwards, launchFirework26 1457ms linear forwards;
          animation: launchFirework 1488ms linear forwards, launchFirework26 1457ms linear forwards;
}

@-webkit-keyframes launchFirework27 {
  to {
    transform: translate(15px, 51px);
  }
}

@keyframes launchFirework27 {
  to {
    transform: translate(15px, 51px);
  }
}
.firework27 {
  -webkit-animation: launchFirework 1231ms linear forwards, launchFirework27 614ms linear forwards;
          animation: launchFirework 1231ms linear forwards, launchFirework27 614ms linear forwards;
}

@-webkit-keyframes launchFirework28 {
  to {
    transform: translate(-82px, 29px);
  }
}

@keyframes launchFirework28 {
  to {
    transform: translate(-82px, 29px);
  }
}
.firework28 {
  -webkit-animation: launchFirework 1266ms linear forwards, launchFirework28 873ms linear forwards;
          animation: launchFirework 1266ms linear forwards, launchFirework28 873ms linear forwards;
}

@-webkit-keyframes launchFirework29 {
  to {
    transform: translate(-87px, -66px);
  }
}

@keyframes launchFirework29 {
  to {
    transform: translate(-87px, -66px);
  }
}
.firework29 {
  -webkit-animation: launchFirework 1091ms linear forwards, launchFirework29 1406ms linear forwards;
          animation: launchFirework 1091ms linear forwards, launchFirework29 1406ms linear forwards;
}

@-webkit-keyframes launchFirework30 {
  to {
    transform: translate(12px, -9px);
  }
}

@keyframes launchFirework30 {
  to {
    transform: translate(12px, -9px);
  }
}
.firework30 {
  -webkit-animation: launchFirework 1393ms linear forwards, launchFirework30 674ms linear forwards;
          animation: launchFirework 1393ms linear forwards, launchFirework30 674ms linear forwards;
}

@-webkit-keyframes launchFirework31 {
  to {
    transform: translate(41px, -88px);
  }
}

@keyframes launchFirework31 {
  to {
    transform: translate(41px, -88px);
  }
}
.firework31 {
  -webkit-animation: launchFirework 1319ms linear forwards, launchFirework31 986ms linear forwards;
          animation: launchFirework 1319ms linear forwards, launchFirework31 986ms linear forwards;
}

@-webkit-keyframes launchFirework32 {
  to {
    transform: translate(-42px, -51px);
  }
}

@keyframes launchFirework32 {
  to {
    transform: translate(-42px, -51px);
  }
}
.firework32 {
  -webkit-animation: launchFirework 774ms linear forwards, launchFirework32 1369ms linear forwards;
          animation: launchFirework 774ms linear forwards, launchFirework32 1369ms linear forwards;
}

@-webkit-keyframes launchFirework33 {
  to {
    transform: translate(-17px, 47px);
  }
}

@keyframes launchFirework33 {
  to {
    transform: translate(-17px, 47px);
  }
}
.firework33 {
  -webkit-animation: launchFirework 1227ms linear forwards, launchFirework33 674ms linear forwards;
          animation: launchFirework 1227ms linear forwards, launchFirework33 674ms linear forwards;
}

@-webkit-keyframes launchFirework34 {
  to {
    transform: translate(-4px, 70px);
  }
}

@keyframes launchFirework34 {
  to {
    transform: translate(-4px, 70px);
  }
}
.firework34 {
  -webkit-animation: launchFirework 680ms linear forwards, launchFirework34 1201ms linear forwards;
          animation: launchFirework 680ms linear forwards, launchFirework34 1201ms linear forwards;
}

@-webkit-keyframes launchFirework35 {
  to {
    transform: translate(-98px, 23px);
  }
}

@keyframes launchFirework35 {
  to {
    transform: translate(-98px, 23px);
  }
}
.firework35 {
  -webkit-animation: launchFirework 1101ms linear forwards, launchFirework35 713ms linear forwards;
          animation: launchFirework 1101ms linear forwards, launchFirework35 713ms linear forwards;
}

@-webkit-keyframes launchFirework36 {
  to {
    transform: translate(-76px, 98px);
  }
}

@keyframes launchFirework36 {
  to {
    transform: translate(-76px, 98px);
  }
}
.firework36 {
  -webkit-animation: launchFirework 858ms linear forwards, launchFirework36 982ms linear forwards;
          animation: launchFirework 858ms linear forwards, launchFirework36 982ms linear forwards;
}

@-webkit-keyframes launchFirework37 {
  to {
    transform: translate(-84px, -79px);
  }
}

@keyframes launchFirework37 {
  to {
    transform: translate(-84px, -79px);
  }
}
.firework37 {
  -webkit-animation: launchFirework 1063ms linear forwards, launchFirework37 534ms linear forwards;
          animation: launchFirework 1063ms linear forwards, launchFirework37 534ms linear forwards;
}

@-webkit-keyframes launchFirework38 {
  to {
    transform: translate(-41px, 82px);
  }
}

@keyframes launchFirework38 {
  to {
    transform: translate(-41px, 82px);
  }
}
.firework38 {
  -webkit-animation: launchFirework 958ms linear forwards, launchFirework38 821ms linear forwards;
          animation: launchFirework 958ms linear forwards, launchFirework38 821ms linear forwards;
}

@-webkit-keyframes launchFirework39 {
  to {
    transform: translate(49px, -10px);
  }
}

@keyframes launchFirework39 {
  to {
    transform: translate(49px, -10px);
  }
}
.firework39 {
  -webkit-animation: launchFirework 1117ms linear forwards, launchFirework39 536ms linear forwards;
          animation: launchFirework 1117ms linear forwards, launchFirework39 536ms linear forwards;
}

@-webkit-keyframes launchFirework40 {
  to {
    transform: translate(-54px, 96px);
  }
}

@keyframes launchFirework40 {
  to {
    transform: translate(-54px, 96px);
  }
}
.firework40 {
  -webkit-animation: launchFirework 1224ms linear forwards, launchFirework40 504ms linear forwards;
          animation: launchFirework 1224ms linear forwards, launchFirework40 504ms linear forwards;
}

@-webkit-keyframes launchFirework41 {
  to {
    transform: translate(19px, 69px);
  }
}

@keyframes launchFirework41 {
  to {
    transform: translate(19px, 69px);
  }
}
.firework41 {
  -webkit-animation: launchFirework 1314ms linear forwards, launchFirework41 1061ms linear forwards;
          animation: launchFirework 1314ms linear forwards, launchFirework41 1061ms linear forwards;
}

@-webkit-keyframes launchFirework42 {
  to {
    transform: translate(43px, -29px);
  }
}

@keyframes launchFirework42 {
  to {
    transform: translate(43px, -29px);
  }
}
.firework42 {
  -webkit-animation: launchFirework 850ms linear forwards, launchFirework42 916ms linear forwards;
          animation: launchFirework 850ms linear forwards, launchFirework42 916ms linear forwards;
}

@-webkit-keyframes launchFirework43 {
  to {
    transform: translate(88px, -8px);
  }
}

@keyframes launchFirework43 {
  to {
    transform: translate(88px, -8px);
  }
}
.firework43 {
  -webkit-animation: launchFirework 1024ms linear forwards, launchFirework43 740ms linear forwards;
          animation: launchFirework 1024ms linear forwards, launchFirework43 740ms linear forwards;
}

@-webkit-keyframes launchFirework44 {
  to {
    transform: translate(40px, -56px);
  }
}

@keyframes launchFirework44 {
  to {
    transform: translate(40px, -56px);
  }
}
.firework44 {
  -webkit-animation: launchFirework 1193ms linear forwards, launchFirework44 831ms linear forwards;
          animation: launchFirework 1193ms linear forwards, launchFirework44 831ms linear forwards;
}

@-webkit-keyframes launchFirework45 {
  to {
    transform: translate(25px, 37px);
  }
}

@keyframes launchFirework45 {
  to {
    transform: translate(25px, 37px);
  }
}
.firework45 {
  -webkit-animation: launchFirework 1463ms linear forwards, launchFirework45 1104ms linear forwards;
          animation: launchFirework 1463ms linear forwards, launchFirework45 1104ms linear forwards;
}

@-webkit-keyframes launchFirework46 {
  to {
    transform: translate(-40px, -77px);
  }
}

@keyframes launchFirework46 {
  to {
    transform: translate(-40px, -77px);
  }
}
.firework46 {
  -webkit-animation: launchFirework 1194ms linear forwards, launchFirework46 1110ms linear forwards;
          animation: launchFirework 1194ms linear forwards, launchFirework46 1110ms linear forwards;
}

@-webkit-keyframes launchFirework47 {
  to {
    transform: translate(-38px, 80px);
  }
}

@keyframes launchFirework47 {
  to {
    transform: translate(-38px, 80px);
  }
}
.firework47 {
  -webkit-animation: launchFirework 1134ms linear forwards, launchFirework47 917ms linear forwards;
          animation: launchFirework 1134ms linear forwards, launchFirework47 917ms linear forwards;
}

@-webkit-keyframes launchFirework48 {
  to {
    transform: translate(-63px, -9px);
  }
}

@keyframes launchFirework48 {
  to {
    transform: translate(-63px, -9px);
  }
}
.firework48 {
  -webkit-animation: launchFirework 1482ms linear forwards, launchFirework48 511ms linear forwards;
          animation: launchFirework 1482ms linear forwards, launchFirework48 511ms linear forwards;
}

@-webkit-keyframes launchFirework49 {
  to {
    transform: translate(84px, 79px);
  }
}

@keyframes launchFirework49 {
  to {
    transform: translate(84px, 79px);
  }
}
.firework49 {
  -webkit-animation: launchFirework 1215ms linear forwards, launchFirework49 1430ms linear forwards;
          animation: launchFirework 1215ms linear forwards, launchFirework49 1430ms linear forwards;
}

@-webkit-keyframes launchFirework50 {
  to {
    transform: translate(25px, -97px);
  }
}

@keyframes launchFirework50 {
  to {
    transform: translate(25px, -97px);
  }
}
.firework50 {
  -webkit-animation: launchFirework 820ms linear forwards, launchFirework50 649ms linear forwards;
          animation: launchFirework 820ms linear forwards, launchFirework50 649ms linear forwards;
}

/* METELOJINX */
.metelojinx__rain {
  width: 100%;
  position: absolute;
  top: 48%;
  left: 0;
  height: 30%;
  pointer-events: none;
}

.metelojinx__droplet {
  position: absolute;
}

.metelojinx__flying {
  position: absolute;
  background-color: #FFF;
  height: 20px;
  width: 1px;
  transform: rotate(20deg);
  -webkit-animation: 1.5s metelojinx__flying infinite linear;
          animation: 1.5s metelojinx__flying infinite linear;
  opacity: 0;
}

@-webkit-keyframes metelojinx__flying {
  0% {
    transform: translate(12000%, -4000%) rotate(20deg);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) rotate(20deg);
    opacity: 1;
  }
}

@keyframes metelojinx__flying {
  0% {
    transform: translate(12000%, -4000%) rotate(20deg);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) rotate(20deg);
    opacity: 1;
  }
}
.metelojinx__splashing {
  position: absolute;
  background-color: #FFF;
  height: 20px;
  width: 80px;
  margin-left: -40px;
  margin-top: 20px;
  border-radius: 100%;
  -webkit-animation: 1.5s metelojinx__splashing infinite linear;
          animation: 1.5s metelojinx__splashing infinite linear;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  opacity: 0;
}

@-webkit-keyframes metelojinx__splashing {
  from {
    opacity: 1;
    transform: scale(0);
  }
}

@keyframes metelojinx__splashing {
  from {
    opacity: 1;
    transform: scale(0);
  }
}
/* COLOVARIA */
.colovaria-color {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  mix-blend-mode: hard-light;
  transition: 0.5s;
}

.popup-buttons {
  text-align: center;
  margin-top: 3em;
}

.popup-button {
  color: #22223B;
  font-family: Montez, sans-serif;
  font-size: 1.2em;
}

.spell-name {
  font-family: "Corben", cursive;
  font-size: 0.8em;
  line-height: 1em;
  color: #000;
  opacity: 0;
  transition: 0.3s;
  transform: rotate(var(--az)) translate(6em) rotate(calc(-1 * var(--az)));
}
@media screen and (min-width: 50em) {
  .spell-name {
    font-size: 1em;
    transform: rotate(var(--az)) translate(6em) rotate(calc(-1 * var(--az)));
  }
}

.spells__icon:hover .spell-name {
  opacity: 1;
}/*# sourceMappingURL=styles.css.map */