@import url(normalize.css);
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Upright&display=swap");
body {
  background-image: radial-gradient(closest-corner, rgb(79, 0, 128), rgb(79, 0, 128), rgb(51, 1, 59));
  overflow: hidden;
}

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.symbol {
  position: relative;
  width: 805px;
  height: 805px;
  padding: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: symbol-rot 57s infinite linear reverse;
}
@media (max-width: 805px), (max-height: 805px) {
  .symbol {
    width: min(100vh, 100vw);
    height: min(100vh, 100vw);
  }
}
@-webkit-keyframes symbol-rot {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes symbol-rot {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.external-circle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 10px solid goldenrod;
  box-shadow: inset 0px 0px 0px 10px rgb(79, 0, 128), inset 0px 0px 0px 20px goldenrod;
}
.external-circle:after {
  content: "";
  position: absolute;
  height: 102.6%;
  width: 102.6%;
  border-radius: 50%;
  -webkit-animation: ext-circle-glow 2.85s infinite alternate ease-in-out;
          animation: ext-circle-glow 2.85s infinite alternate ease-in-out;
}
@-webkit-keyframes ext-circle-glow {
  from {
    box-shadow: 0 0 21px 15px rgb(252, 201, 73), inset 0 0 0 2px goldenrod;
  }
  to {
    box-shadow: 0 0 31.5px 22.5px rgb(252, 201, 73), inset 0 0 0 2px goldenrod;
  }
}
@keyframes ext-circle-glow {
  from {
    box-shadow: 0 0 21px 15px rgb(252, 201, 73), inset 0 0 0 2px goldenrod;
  }
  to {
    box-shadow: 0 0 31.5px 22.5px rgb(252, 201, 73), inset 0 0 0 2px goldenrod;
  }
}
@media (max-width: 805px), (max-height: 805px) {
  .external-circle {
    border: calc(4px + 6 * (min(100vw, 100vh) - 320px) / 485) solid goldenrod;
    box-shadow: inset 0px 0px 0px calc(4px + 6 * (min(100vw, 100vh) - 320px) / 485) rgb(79, 0, 128), inset 0px 0px 0px calc((4px + 6 * (min(100vw, 100vh) - 320px) / 485) * 2) goldenrod;
  }
  @-webkit-keyframes ext-circle-glow {
    from {
      box-shadow: 0 0 calc(15px + 6 * (min(100vw, 100vh) - 320px) / 485) calc(8px + 7 * (min(100vw, 100vh) - 320px) / 485) rgb(252, 201, 73), inset 0 0 0 2px goldenrod;
    }
    to {
      box-shadow: 0 0 calc(22.5px + 9 * (min(100vw, 100vh) - 320px) / 485) calc(12px + 10.5 * (min(100vw, 100vh) - 320px) / 485) rgb(252, 201, 73), inset 0 0 0 2px goldenrod;
    }
  }
  @keyframes ext-circle-glow {
    from {
      box-shadow: 0 0 calc(15px + 6 * (min(100vw, 100vh) - 320px) / 485) calc(8px + 7 * (min(100vw, 100vh) - 320px) / 485) rgb(252, 201, 73), inset 0 0 0 2px goldenrod;
    }
    to {
      box-shadow: 0 0 calc(22.5px + 9 * (min(100vw, 100vh) - 320px) / 485) calc(12px + 10.5 * (min(100vw, 100vh) - 320px) / 485) rgb(252, 201, 73), inset 0 0 0 2px goldenrod;
    }
  }
}

.ext-petals-container {
  position: absolute;
  width: 95%;
  height: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
}

.ext-petal {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 154px;
  border-top: 122px solid var(--clr);
  border-left: 32px solid transparent;
  border-right: 32px solid transparent;
  inset: 74px auto;
  -webkit-transform: rotate(calc(var(--i) * 30deg));
          transform: rotate(calc(var(--i) * 30deg));
}
.ext-petal::after {
  content: "";
  position: absolute;
  width: 154px;
  height: 40px;
  top: -160.5px;
  background-color: var(--clr);
  border-radius: 50% 50% 0 0/100% 100% 0 0;
}
.ext-petal > span {
  position: absolute;
  top: -108px;
  display: flex;
  font-family: "Cormorant Upright", serif;
  font-size: 29px;
  color: var(--txt-clr);
  z-index: 1;
  -webkit-transform: rotate(calc(var(--i) * -30deg - 15deg));
          transform: rotate(calc(var(--i) * -30deg - 15deg));
  -webkit-animation: text-rot 57s infinite linear;
          animation: text-rot 57s infinite linear;
}
@-webkit-keyframes text-rot {
  from {
    -webkit-transform: rotate(calc(var(--i) * -30deg - 15deg));
            transform: rotate(calc(var(--i) * -30deg - 15deg));
  }
  to {
    -webkit-transform: rotate(calc(var(--i) * -30deg - 15deg + 360deg));
            transform: rotate(calc(var(--i) * -30deg - 15deg + 360deg));
  }
}
@keyframes text-rot {
  from {
    -webkit-transform: rotate(calc(var(--i) * -30deg - 15deg));
            transform: rotate(calc(var(--i) * -30deg - 15deg));
  }
  to {
    -webkit-transform: rotate(calc(var(--i) * -30deg - 15deg + 360deg));
            transform: rotate(calc(var(--i) * -30deg - 15deg + 360deg));
  }
}
@media (max-width: 805px), (max-height: 805px) {
  .ext-petal {
    width: calc(55.5px + 98.5 * (min(100vw, 100vh) - 320px) / 485);
    border-top: calc(47px + 75 * (min(100vw, 100vh) - 320px) / 485) solid var(--clr);
    border-left: calc(13px + 19 * (min(100vw, 100vh) - 320px) / 485) solid transparent;
    border-right: calc(13px + 19 * (min(100vw, 100vh) - 320px) / 485) solid transparent;
    top: calc(44px + 30 * (min(100vw, 100vh) - 320px) / 485);
    bottom: calc(44px + 30 * (min(100vw, 100vh) - 320px) / 485);
  }
  .ext-petal::after {
    width: calc(55px + 99 * (min(100vw, 100vh) - 320px) / 485);
    height: calc(16px + 24 * (min(100vw, 100vh) - 320px) / 485);
    top: calc(-62px + -98.5 * (min(100vw, 100vh) - 320px) / 485);
  }
  .ext-petal > span {
    top: calc(-40px + -68 * (min(100vw, 100vh) - 320px) / 485);
    font-size: calc(11px + 18 * (min(100vw, 100vh) - 320px) / 485);
  }
}

.mid-circle {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 385px;
  height: 385px;
  border: 10px solid goldenrod;
  box-shadow: inset 0px 0px 0px 10px rgb(79, 0, 128), inset 0px 0px 0px 20px goldenrod;
  z-index: 4;
}
.mid-circle::after {
  content: "";
  position: absolute;
  height: 384.9px;
  width: 384.9px;
  display: flex;
  border-radius: 50%;
  -webkit-animation: mid-circle-glow 2.85s infinite alternate ease-in-out;
          animation: mid-circle-glow 2.85s infinite alternate ease-in-out;
}
@-webkit-keyframes mid-circle-glow {
  from {
    box-shadow: 0 0 26px 15px white;
  }
  to {
    box-shadow: 0 0 39px 22.5px white;
  }
}
@keyframes mid-circle-glow {
  from {
    box-shadow: 0 0 26px 15px white;
  }
  to {
    box-shadow: 0 0 39px 22.5px white;
  }
}
@media (max-width: 805px), (max-height: 805px) {
  .mid-circle {
    border: calc(4px + 6 * (min(100vw, 100vh) - 320px) / 485) solid goldenrod;
    box-shadow: inset 0px 0px 0px calc(4px + 6 * (min(100vw, 100vh) - 320px) / 485) rgb(79, 0, 128), inset 0px 0px 0px calc((4px + 6 * (min(100vw, 100vh) - 320px) / 485) * 2) goldenrod;
    width: calc(127.2px + 257.8 * (min(100vw, 100vh) - 320px) / 485);
    height: calc(127.2px + 257.8 * (min(100vw, 100vh) - 320px) / 485);
  }
  .mid-circle::after {
    height: calc(127px + 257 * (min(100vw, 100vh) - 320px) / 485);
    width: calc(127px + 257 * (min(100vw, 100vh) - 320px) / 485);
  }
  @-webkit-keyframes mid-circle-glow {
    from {
      box-shadow: 0 0 calc(15px + 11 * (min(100vw, 100vh) - 320px) / 485) calc(8px + 7 * (min(100vw, 100vh) - 320px) / 485) white, inset 0 0 0 2px goldenrod;
    }
    to {
      box-shadow: 0 0 calc(22.5px + 16.5 * (min(100vw, 100vh) - 320px) / 485) calc(12px + 10.5 * (min(100vw, 100vh) - 320px) / 485) white, inset 0 0 0 2px goldenrod;
    }
  }
  @keyframes mid-circle-glow {
    from {
      box-shadow: 0 0 calc(15px + 11 * (min(100vw, 100vh) - 320px) / 485) calc(8px + 7 * (min(100vw, 100vh) - 320px) / 485) white, inset 0 0 0 2px goldenrod;
    }
    to {
      box-shadow: 0 0 calc(22.5px + 16.5 * (min(100vw, 100vh) - 320px) / 485) calc(12px + 10.5 * (min(100vw, 100vh) - 320px) / 485) white, inset 0 0 0 2px goldenrod;
    }
  }
}

.int-petals-container {
  position: absolute;
  box-sizing: content-box;
  width: 36%;
  height: 36%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.int-petal {
  position: absolute;
  display: flex;
  justify-content: center;
  box-sizing: content-box;
  width: 75px;
  border-top: 58px solid var(--clr);
  border-left: 58px solid transparent;
  border-right: 58px solid transparent;
  inset: 41px auto;
  -webkit-transform: rotate(calc(var(--i) * 90deg));
          transform: rotate(calc(var(--i) * 90deg));
}
.int-petal::after {
  content: "";
  position: absolute;
  width: 198px;
  height: 65px;
  top: -117px;
  background-color: var(--clr);
  border-radius: 110% 110% 15% 15%/150% 150% 65% 65%;
}
.int-petal > span {
  position: absolute;
  display: flex;
  top: -89px;
  font-family: "Cormorant Upright", serif;
  font-size: 31px;
  color: var(--txt-clr);
  z-index: 100;
}
@media (max-width: 805px), (max-height: 805px) {
  .int-petal {
    width: calc(23.9px + 51.1 * (min(100vw, 100vh) - 320px) / 485);
    border-top: calc(17px + 41 * (min(100vw, 100vh) - 320px) / 485) solid var(--clr);
    border-left: calc(17.1px + 40.9 * (min(100vw, 100vh) - 320px) / 485) solid transparent;
    border-right: calc(17.1px + 40.9 * (min(100vw, 100vh) - 320px) / 485) solid transparent;
    top: calc(26px + 15 * (min(100vw, 100vh) - 320px) / 485);
    bottom: calc(26px + 15 * (min(100vw, 100vh) - 320px) / 485);
  }
  .int-petal::after {
    width: calc(61px + 137 * (min(100vw, 100vh) - 320px) / 485);
    height: calc(22px + 43 * (min(100vw, 100vh) - 320px) / 485);
    top: calc(-37.5px + -79.5 * (min(100vw, 100vh) - 320px) / 485);
  }
  .int-petal > span {
    top: calc(-27px + -62 * (min(100vw, 100vh) - 320px) / 485);
    font-size: calc(10px + 21 * (min(100vw, 100vh) - 320px) / 485);
  }
}

.internal-circle {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 118.3px;
  height: 118.3px;
  background-color: white;
  border: 10px solid goldenrod;
  box-shadow: inset 0px 0px 0px 10px rgb(79, 0, 128), inset 0px 0px 0px 20px goldenrod;
  z-index: 500;
}
.internal-circle::after {
  content: "";
  position: absolute;
  height: 119%;
  width: 119%;
  border-radius: 50%;
  -webkit-animation: int-circle-glow 2.85s infinite alternate ease-in-out;
          animation: int-circle-glow 2.85s infinite alternate ease-in-out;
}
@-webkit-keyframes int-circle-glow {
  from {
    box-shadow: 0 0 34px 31px white;
  }
  to {
    box-shadow: 0 0 51px 46.5px white;
  }
}
@keyframes int-circle-glow {
  from {
    box-shadow: 0 0 34px 31px white;
  }
  to {
    box-shadow: 0 0 51px 46.5px white;
  }
}
@media (max-width: 805px), (max-height: 805px) {
  .internal-circle {
    border: calc(4px + 6 * (min(100vw, 100vh) - 320px) / 485) solid goldenrod;
    box-shadow: inset 0px 0px 0px calc(4px + 6 * (min(100vw, 100vh) - 320px) / 485) rgb(79, 0, 128), inset 0px 0px 0px calc((4px + 6 * (min(100vw, 100vh) - 320px) / 485) * 2) goldenrod;
    width: calc(39.7px + 78.6 * (min(100vw, 100vh) - 320px) / 485);
    height: calc(39.7px + 78.6 * (min(100vw, 100vh) - 320px) / 485);
  }
  @-webkit-keyframes int-circle-glow {
    from {
      box-shadow: 0 0 calc(15px + 19 * (min(100vw, 100vh) - 320px) / 485) calc(13px + 18 * (min(100vw, 100vh) - 320px) / 485) white, inset 0 0 0 2px goldenrod;
    }
    to {
      box-shadow: 0 0 calc(22.5px + 28.5 * (min(100vw, 100vh) - 320px) / 485) calc(19.5px + 27 * (min(100vw, 100vh) - 320px) / 485) white, inset 0 0 0 2px goldenrod;
    }
  }
  @keyframes int-circle-glow {
    from {
      box-shadow: 0 0 calc(15px + 19 * (min(100vw, 100vh) - 320px) / 485) calc(13px + 18 * (min(100vw, 100vh) - 320px) / 485) white, inset 0 0 0 2px goldenrod;
    }
    to {
      box-shadow: 0 0 calc(22.5px + 28.5 * (min(100vw, 100vh) - 320px) / 485) calc(19.5px + 27 * (min(100vw, 100vh) - 320px) / 485) white, inset 0 0 0 2px goldenrod;
    }
  }
}