@import url(https://cdn.materialdesignicons.com/1.3.41/css/materialdesignicons.min.css);body {
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
  color: black;
}
body * {
  box-sizing: inherit;
  transition: all 0.5s ease;
}
body *:before {
  box-sizing: inherit;
  transition: all 0.5s ease;
}
body *:after {
  box-sizing: inherit;
  transition: all 0.5s ease;
}
body a {
  text-decoration: none;
  color: white;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
}
body a:hover {
  text-shadow: 1px 1px 5px #000000;
}
.main-wrapper {
  background: radial-gradient(ellipse at bottom, #a90e0e 5%, #4e0303 55%, #330000 78%);
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.tree-container {
  display: block;
  height: 370px;
  margin: 0;
  padding: 0;
}
.text-container {
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 1%;
  left: 15%;
  right: 15%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-direction: column;
      flex-direction: column;
  text-align: center;
}
.text-container h2 {
  color: rgba(252, 251, 233, 0.85);
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  margin: 0 0 0.8em 0;
}
.text-container h2.happy {
  font-size: 3.3em;
}
.text-container a.c2 {
  display: block;
  font-size: 13px;
  width: 40px;
  height: 40px;
  background-color: rgba(252, 251, 233, 0.8);
  border-radius: 50%;
  color: #8c1313;
  text-decoration: none;
  line-height: 40px;
}
.star {
  border-radius: 0;
  border-color: #f7b93f transparent transparent transparent;
  border-style: solid;
  border-top-width: 9.23076923px;
  border-right-width: 12px;
  border-left-width: 12px;
  height: 0;
  width: 0;
  margin-bottom: 5px;
  background: transparent;
  z-index: 100;
  animation: pulsate-star 1.4s ease-in-out infinite alternate-reverse;
}
.star:before,
.star:after {
  border-color: #f7b93f transparent transparent transparent;
  border-style: solid;
  border-top-width: 9.23076923px;
  border-right-width: 12px;
  border-left-width: 12px;
  border-bottom: 0;
  content: '';
  display: block;
  height: 0;
  left: -12px;
  position: absolute;
  top: -9.23076923px;
  width: 0;
}
.star:before {
  transform: translate(15.5555555%, -15.5555555%) rotate(72deg) translateY(50%);
}
.star:after {
  transform: translate(-15.5555555%, -15.5555555%) rotate(-72deg) translateY(50%);
}
.spiral-container {
  width: 100%;
  height: 100%;
  display: block;
}
.spiral {
  position: relative;
  margin: 0;
  padding: 0;
  transform-style: preserve-3d;
}
.spiral.one {
  animation: rotate-tree 6s infinite linear both;
  animation-delay: -1.7s;
}
.spiral.one .light {
  background: #fcfbe9;
}
.spiral.two {
  animation: rotate-tree 7s infinite linear both;
  animation-delay: -1s;
}
.spiral.two .light {
  background: #e8a41d;
}
.spiral.three {
  animation: rotate-tree 8s infinite linear both;
  animation-delay: -0.1s;
}
.spiral.three .light {
  background: #f5e393;
}
.spiral > .light-wrapper {
  border-radius: 50%;
  position: absolute;
  display: block;
  width: 6px;
  height: 6px;
  left: 50%;
  top: 50%;
  margin: -3px 0 0 -3px;
}
.spiral .stabilise {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
}
.spiral .light {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  opacity: 1;
  animation-name: pulsate;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}
/* Framed view mode (default) */
*:focus {
  outline: 0;
}
.lyrics-container {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.rabbit-lyrics {
  position: relative;
  /* Must be relative, otherwise cannot calculate offset */
  overflow-x: hidden;
  overflow-y: auto;
}
.rabbit-lyrics__line {
  font-family: 'Great Vibes', cursive;
  font-size: 70px;
  min-height: 3rem;
}
.rabbit-lyrics__line--active {
  color: rgba(252, 251, 233, 0.85);
}
/* Mini view mode */
.rabbit-lyrics--mini {
  min-height: 2rem;
  margin: 2rem auto;
  overflow-y: hidden;
}
.rabbit-lyrics--mini .rabbit-lyrics__line {
  display: none;
}
.rabbit-lyrics--mini .rabbit-lyrics__line--active {
  display: inline-block;
}
/* Full view mode, no scroll bar */
.rabbit-lyrics--full {
  height: auto;
  overflow-y: initial;
}
.spiral.one .light-wrapper.light-wrapper-1 {
  transform: translate3d(0px, 0.1px, 0.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(0deg);
  width: 0.3255814px;
  height: 0.3255814px;
}
.spiral.one .light-wrapper.light-wrapper-1 .light {
  animation-duration: 1.09002121s;
  animation-delay: 0.86712841s;
}
.spiral.one .light-wrapper.light-wrapper-2 {
  transform: translate3d(0.0763236px, 0.39265087px, 0.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-11deg);
  width: 0.65116279px;
  height: 0.65116279px;
}
.spiral.one .light-wrapper.light-wrapper-2 .light {
  animation-duration: 0.39170111s;
  animation-delay: 0.58954059s;
}
.spiral.one .light-wrapper.light-wrapper-3 {
  transform: translate3d(0.33714593px, 0.83446547px, 1.5px) rotateX(90deg) rotateZ(0deg) rotateY(-22deg);
  width: 0.97674419px;
  height: 0.97674419px;
}
.spiral.one .light-wrapper.light-wrapper-3 .light {
  animation-duration: 0.95880323s;
  animation-delay: 0.6083594s;
}
.spiral.one .light-wrapper.light-wrapper-4 {
  transform: translate3d(0.87142246px, 1.34187291px, 2.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-33deg);
  width: 1.30232558px;
  height: 1.30232558px;
}
.spiral.one .light-wrapper.light-wrapper-4 .light {
  animation-duration: 0.97650792s;
  animation-delay: 0.57480377s;
}
.spiral.one .light-wrapper.light-wrapper-5 {
  transform: translate3d(1.73664593px, 1.7983495px, 4.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-44deg);
  width: 1.62790698px;
  height: 1.62790698px;
}
.spiral.one .light-wrapper.light-wrapper-5 .light {
  animation-duration: 0.31323667s;
  animation-delay: 1.01733784s;
}
.spiral.one .light-wrapper.light-wrapper-6 {
  transform: translate3d(2.94894736px, 2.06487517px, 6px) rotateX(90deg) rotateZ(0deg) rotateY(-55deg);
  width: 1.95348837px;
  height: 1.95348837px;
}
.spiral.one .light-wrapper.light-wrapper-6 .light {
  animation-duration: 0.38900416s;
  animation-delay: 0.79055701s;
}
.spiral.one .light-wrapper.light-wrapper-7 {
  transform: translate3d(4.47637274px, 1.99300955px, 8.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-66deg);
  width: 2.27906977px;
  height: 2.27906977px;
}
.spiral.one .light-wrapper.light-wrapper-7 .light {
  animation-duration: 0.75970054s;
  animation-delay: 0.36531719s;
}
.spiral.one .light-wrapper.light-wrapper-8 {
  transform: translate3d(6.23596841px, 1.43968675px, 10.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-77deg);
  width: 2.60465116px;
  height: 2.60465116px;
}
.spiral.one .light-wrapper.light-wrapper-8 .light {
  animation-duration: 0.96854416s;
  animation-delay: 0.97702488s;
}
.spiral.one .light-wrapper.light-wrapper-9 {
  transform: translate3d(8.0950657px, 0.28268592px, 13.5px) rotateX(90deg) rotateZ(0deg) rotateY(-88deg);
  width: 2.93023256px;
  height: 2.93023256px;
}
.spiral.one .light-wrapper.light-wrapper-9 .light {
  animation-duration: 1.0590935s;
  animation-delay: 0.81964578s;
}
.spiral.one .light-wrapper.light-wrapper-10 {
  transform: translate3d(9.87688341px, -1.56434465px, 16.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-99deg);
  width: 3.25581395px;
  height: 3.25581395px;
}
.spiral.one .light-wrapper.light-wrapper-10 .light {
  animation-duration: 0.71004234s;
  animation-delay: 0.70309033s;
}
.spiral.one .light-wrapper.light-wrapper-11 {
  transform: translate3d(11.37028071px, -4.13844373px, 20.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-110deg);
  width: 3.58139535px;
  height: 3.58139535px;
}
.spiral.one .light-wrapper.light-wrapper-11 .light {
  animation-duration: 1.28490258s;
  animation-delay: 0.38180139s;
}
.spiral.one .light-wrapper.light-wrapper-12 {
  transform: translate3d(12.34320913px, -7.41654828px, 24px) rotateX(90deg) rotateZ(0deg) rotateY(-121deg);
  width: 3.90697674px;
  height: 3.90697674px;
}
.spiral.one .light-wrapper.light-wrapper-12 .light {
  animation-duration: 0.48722888s;
  animation-delay: 0.99776386s;
}
.spiral.one .light-wrapper.light-wrapper-13 {
  transform: translate3d(12.55914755px, -11.30830725px, 28.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-132deg);
  width: 4.23255814px;
  height: 4.23255814px;
}
.spiral.one .light-wrapper.light-wrapper-13 .light {
  animation-duration: 0.32965615s;
  animation-delay: 1.26654154s;
}
.spiral.one .light-wrapper.light-wrapper-14 {
  transform: translate3d(11.79557445px, -15.653256px, 32.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-143deg);
  width: 4.55813953px;
  height: 4.55813953px;
}
.spiral.one .light-wrapper.light-wrapper-14 .light {
  animation-duration: 1.01922197s;
  animation-delay: 1.04275561s;
}
.spiral.one .light-wrapper.light-wrapper-15 {
  transform: translate3d(9.8633508px, -20.22286604px, 37.5px) rotateX(90deg) rotateZ(0deg) rotateY(-154deg);
  width: 4.88372093px;
  height: 4.88372093px;
}
.spiral.one .light-wrapper.light-wrapper-15 .light {
  animation-duration: 0.37978763s;
  animation-delay: 0.83893497s;
}
.spiral.one .light-wrapper.light-wrapper-16 {
  transform: translate3d(6.62576755px, -24.72770115px, 42.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-165deg);
  width: 5.20930233px;
  height: 5.20930233px;
}
.spiral.one .light-wrapper.light-wrapper-16 .light {
  animation-duration: 1.05663728s;
  animation-delay: 0.62837513s;
}
.spiral.one .light-wrapper.light-wrapper-17 {
  transform: translate3d(2.01596209px, -28.82960105px, 48.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-176deg);
  width: 5.53488372px;
  height: 5.53488372px;
}
.spiral.one .light-wrapper.light-wrapper-17 .light {
  animation-duration: 1.02236609s;
  animation-delay: 0.88326241s;
}
.spiral.one .light-wrapper.light-wrapper-18 {
  transform: translate3d(-3.94856673px, -32.15849531px, 54px) rotateX(90deg) rotateZ(0deg) rotateY(-187deg);
  width: 5.86046512px;
  height: 5.86046512px;
}
.spiral.one .light-wrapper.light-wrapper-18 .light {
  animation-duration: 1.02732985s;
  animation-delay: 0.61140748s;
}
.spiral.one .light-wrapper.light-wrapper-19 {
  transform: translate3d(-11.1555135px, -34.33314024px, 60.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-198deg);
  width: 6.18604651px;
  height: 6.18604651px;
}
.spiral.one .light-wrapper.light-wrapper-19 .light {
  animation-duration: 0.86708003s;
  animation-delay: 0.9514121s;
}
.spiral.one .light-wrapper.light-wrapper-20 {
  transform: translate3d(-19.39238481px, -34.98478829px, 66.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-209deg);
  width: 6.51162791px;
  height: 6.51162791px;
}
.spiral.one .light-wrapper.light-wrapper-20 .light {
  animation-duration: 0.53125202s;
  animation-delay: 0.67674794s;
}
.spiral.one .light-wrapper.light-wrapper-21 {
  transform: translate3d(-28.34693359px, -33.78255994px, 73.5px) rotateX(90deg) rotateZ(0deg) rotateY(-220deg);
  width: 6.8372093px;
  height: 6.8372093px;
}
.spiral.one .light-wrapper.light-wrapper-21 .light {
  animation-duration: 0.59947494s;
  animation-delay: 0.85812869s;
}
.spiral.one .light-wrapper.light-wrapper-22 {
  transform: translate3d(-37.61386453px, -30.45910693px, 80.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-231deg);
  width: 7.1627907px;
  height: 7.1627907px;
}
.spiral.one .light-wrapper.light-wrapper-22 .light {
  animation-duration: 0.63901736s;
  animation-delay: 1.06141778s;
}
.spiral.one .light-wrapper.light-wrapper-23 {
  transform: translate3d(-46.70792766px, -24.83504567px, 88.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-242deg);
  width: 7.48837209px;
  height: 7.48837209px;
}
.spiral.one .light-wrapper.light-wrapper-23 .light {
  animation-duration: 1.06805516s;
  animation-delay: 0.35358125s;
}
.spiral.one .light-wrapper.light-wrapper-24 {
  transform: translate3d(-55.08315394px, -16.84061019px, 96px) rotateX(90deg) rotateZ(0deg) rotateY(-253deg);
  width: 7.81395349px;
  height: 7.81395349px;
}
.spiral.one .light-wrapper.light-wrapper-24 .light {
  animation-duration: 0.77054153s;
  animation-delay: 1.04458292s;
}
.spiral.one .light-wrapper.light-wrapper-25 {
  transform: translate3d(-62.15761846px, -6.53302895px, 104.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-264deg);
  width: 8.13953488px;
  height: 8.13953488px;
}
.spiral.one .light-wrapper.light-wrapper-25 .light {
  animation-duration: 0.35400714s;
  animation-delay: 0.6522014s;
}
.spiral.one .light-wrapper.light-wrapper-26 {
  transform: translate3d(-67.34276159px, 5.89172821px, 112.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-275deg);
  width: 8.46511628px;
  height: 8.46511628px;
}
.spiral.one .light-wrapper.light-wrapper-26 .light {
  animation-duration: 0.52585657s;
  animation-delay: 0.4960597s;
}
.spiral.one .light-wrapper.light-wrapper-27 {
  transform: translate3d(-70.07597763px, 20.09396324px, 121.5px) rotateX(90deg) rotateZ(0deg) rotateY(-286deg);
  width: 8.79069767px;
  height: 8.79069767px;
}
.spiral.one .light-wrapper.light-wrapper-27 .light {
  animation-duration: 1.08620232s;
  animation-delay: 0.40585942s;
}
.spiral.one .light-wrapper.light-wrapper-28 {
  transform: translate3d(-69.8549115px, 35.59285518px, 130.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-297deg);
  width: 9.11627907px;
  height: 9.11627907px;
}
.spiral.one .light-wrapper.light-wrapper-28 .light {
  animation-duration: 0.37613937s;
  animation-delay: 0.98378475s;
}
.spiral.one .light-wrapper.light-wrapper-29 {
  transform: translate3d(-66.27170438px, 51.77713007px, 140.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-308deg);
  width: 9.44186047px;
  height: 9.44186047px;
}
.spiral.one .light-wrapper.light-wrapper-29 .light {
  animation-duration: 0.65701839s;
  animation-delay: 0.47536742s;
}
.spiral.one .light-wrapper.light-wrapper-30 {
  transform: translate3d(-59.04531261px, 67.92386222px, 150px) rotateX(90deg) rotateZ(0deg) rotateY(-319deg);
  width: 9.76744186px;
  height: 9.76744186px;
}
.spiral.one .light-wrapper.light-wrapper-30 .light {
  animation-duration: 0.74128145s;
  animation-delay: 0.34848668s;
}
.spiral.one .light-wrapper.light-wrapper-31 {
  transform: translate3d(-48.05px, 83.2250413px, 160.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-330deg);
  width: 10.09302326px;
  height: 10.09302326px;
}
.spiral.one .light-wrapper.light-wrapper-31 .light {
  animation-duration: 0.79609585s;
  animation-delay: 0.40052403s;
}
.spiral.one .light-wrapper.light-wrapper-32 {
  transform: translate3d(-33.33817902px, 96.82110214px, 170.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-341deg);
  width: 10.41860465px;
  height: 10.41860465px;
}
.spiral.one .light-wrapper.light-wrapper-32 .light {
  animation-duration: 0.86202955s;
  animation-delay: 0.90270988s;
}
.spiral.one .light-wrapper.light-wrapper-33 {
  transform: translate3d(-15.15595069px, 107.84019269px, 181.5px) rotateX(90deg) rotateZ(0deg) rotateY(-352deg);
  width: 10.74418605px;
  height: 10.74418605px;
}
.spiral.one .light-wrapper.light-wrapper-33 .light {
  animation-duration: 0.55503974s;
  animation-delay: 0.89105151s;
}
.spiral.one .light-wrapper.light-wrapper-34 {
  transform: translate3d(6.05003654px, 115.44157422px, 192.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-363deg);
  width: 11.06976744px;
  height: 11.06976744px;
}
.spiral.one .light-wrapper.light-wrapper-34 .light {
  animation-duration: 0.742694s;
  animation-delay: 1.20733575s;
}
.spiral.one .light-wrapper.light-wrapper-35 {
  transform: translate3d(29.63543221px, 118.86122647px, 204.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-374deg);
  width: 11.39534884px;
  height: 11.39534884px;
}
.spiral.one .light-wrapper.light-wrapper-35 .light {
  animation-duration: 0.87890837s;
  animation-delay: 0.72620914s;
}
.spiral.one .light-wrapper.light-wrapper-36 {
  transform: translate3d(54.77132672px, 117.4574892px, 216px) rotateX(90deg) rotateZ(0deg) rotateY(-385deg);
  width: 11.72093023px;
  height: 11.72093023px;
}
.spiral.one .light-wrapper.light-wrapper-36 .light {
  animation-duration: 1.00236651s;
  animation-delay: 0.36329384s;
}
.spiral.one .light-wrapper.light-wrapper-37 {
  transform: translate3d(80.46780104px, 110.75442653px, 228.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-396deg);
  width: 12.04651163px;
  height: 12.04651163px;
}
.spiral.one .light-wrapper.light-wrapper-37 .light {
  animation-duration: 0.53648547s;
  animation-delay: 0.54627176s;
}
.spiral.one .light-wrapper.light-wrapper-38 {
  transform: translate3d(105.60747451px, 98.48056319px, 240.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-407deg);
  width: 12.37209302px;
  height: 12.37209302px;
}
.spiral.one .light-wrapper.light-wrapper-38 .light {
  animation-duration: 0.98084824s;
  animation-delay: 0.89506937s;
}
.spiral.one .light-wrapper.light-wrapper-39 {
  transform: translate3d(128.98811543px, 80.60072009px, 253.5px) rotateX(90deg) rotateZ(0deg) rotateY(-418deg);
  width: 12.69767442px;
  height: 12.69767442px;
}
.spiral.one .light-wrapper.light-wrapper-39 .light {
  animation-duration: 0.95031661s;
  animation-delay: 0.70434011s;
}
.spiral.one .light-wrapper.light-wrapper-40 {
  transform: translate3d(149.37286824px, 57.33887193px, 266.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-429deg);
  width: 13.02325581px;
  height: 13.02325581px;
}
.spiral.one .light-wrapper.light-wrapper-40 .light {
  animation-duration: 0.65724461s;
  animation-delay: 0.60459971s;
}
.spiral.one .light-wrapper.light-wrapper-41 {
  transform: translate3d(165.54618328px, 29.19025867px, 280.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-440deg);
  width: 13.34883721px;
  height: 13.34883721px;
}
.spiral.one .light-wrapper.light-wrapper-41 .light {
  animation-duration: 0.8871413s;
  animation-delay: 1.09298013s;
}
.spiral.one .light-wrapper.light-wrapper-42 {
  transform: translate3d(176.37313343px, -3.0786045px, 294px) rotateX(90deg) rotateZ(0deg) rotateY(-451deg);
  width: 13.6744186px;
  height: 13.6744186px;
}
.spiral.one .light-wrapper.light-wrapper-42 .light {
  animation-duration: 0.55760081s;
  animation-delay: 1.20028901s;
}
.spiral.one .light-wrapper.light-wrapper-43 {
  transform: translate3d(180.85949138px, -38.44287163px, 308.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-462deg);
  width: 14px;
  height: 14px;
}
.spiral.one .light-wrapper.light-wrapper-43 .light {
  animation-duration: 0.85026948s;
  animation-delay: 0.34198169s;
}
.spiral.two .light-wrapper.light-wrapper-1 {
  transform: translate3d(0px, 0.1px, 0.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(0deg);
  width: 0.48837209px;
  height: 0.48837209px;
}
.spiral.two .light-wrapper.light-wrapper-1 .light {
  animation-duration: 0.57996831s;
  animation-delay: 0.37719478s;
}
.spiral.two .light-wrapper.light-wrapper-2 {
  transform: translate3d(0.0763236px, 0.39265087px, 0.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-11deg);
  width: 0.97674419px;
  height: 0.97674419px;
}
.spiral.two .light-wrapper.light-wrapper-2 .light {
  animation-duration: 1.15483947s;
  animation-delay: 0.94349167s;
}
.spiral.two .light-wrapper.light-wrapper-3 {
  transform: translate3d(0.33714593px, 0.83446547px, 1.5px) rotateX(90deg) rotateZ(0deg) rotateY(-22deg);
  width: 1.46511628px;
  height: 1.46511628px;
}
.spiral.two .light-wrapper.light-wrapper-3 .light {
  animation-duration: 0.85940918s;
  animation-delay: 0.74193917s;
}
.spiral.two .light-wrapper.light-wrapper-4 {
  transform: translate3d(0.87142246px, 1.34187291px, 2.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-33deg);
  width: 1.95348837px;
  height: 1.95348837px;
}
.spiral.two .light-wrapper.light-wrapper-4 .light {
  animation-duration: 0.8064015s;
  animation-delay: 0.34375826s;
}
.spiral.two .light-wrapper.light-wrapper-5 {
  transform: translate3d(1.73664593px, 1.7983495px, 4.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-44deg);
  width: 2.44186047px;
  height: 2.44186047px;
}
.spiral.two .light-wrapper.light-wrapper-5 .light {
  animation-duration: 0.36819159s;
  animation-delay: 0.42319679s;
}
.spiral.two .light-wrapper.light-wrapper-6 {
  transform: translate3d(2.94894736px, 2.06487517px, 6px) rotateX(90deg) rotateZ(0deg) rotateY(-55deg);
  width: 2.93023256px;
  height: 2.93023256px;
}
.spiral.two .light-wrapper.light-wrapper-6 .light {
  animation-duration: 0.35141119s;
  animation-delay: 0.39755256s;
}
.spiral.two .light-wrapper.light-wrapper-7 {
  transform: translate3d(4.47637274px, 1.99300955px, 8.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-66deg);
  width: 3.41860465px;
  height: 3.41860465px;
}
.spiral.two .light-wrapper.light-wrapper-7 .light {
  animation-duration: 1.23123757s;
  animation-delay: 0.71855889s;
}
.spiral.two .light-wrapper.light-wrapper-8 {
  transform: translate3d(6.23596841px, 1.43968675px, 10.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-77deg);
  width: 3.90697674px;
  height: 3.90697674px;
}
.spiral.two .light-wrapper.light-wrapper-8 .light {
  animation-duration: 1.23501392s;
  animation-delay: 1.09652241s;
}
.spiral.two .light-wrapper.light-wrapper-9 {
  transform: translate3d(8.0950657px, 0.28268592px, 13.5px) rotateX(90deg) rotateZ(0deg) rotateY(-88deg);
  width: 4.39534884px;
  height: 4.39534884px;
}
.spiral.two .light-wrapper.light-wrapper-9 .light {
  animation-duration: 0.8067299s;
  animation-delay: 0.74965659s;
}
.spiral.two .light-wrapper.light-wrapper-10 {
  transform: translate3d(9.87688341px, -1.56434465px, 16.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-99deg);
  width: 4.88372093px;
  height: 4.88372093px;
}
.spiral.two .light-wrapper.light-wrapper-10 .light {
  animation-duration: 0.81218686s;
  animation-delay: 0.8286639s;
}
.spiral.two .light-wrapper.light-wrapper-11 {
  transform: translate3d(11.37028071px, -4.13844373px, 20.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-110deg);
  width: 5.37209302px;
  height: 5.37209302px;
}
.spiral.two .light-wrapper.light-wrapper-11 .light {
  animation-duration: 0.98830276s;
  animation-delay: 0.78853018s;
}
.spiral.two .light-wrapper.light-wrapper-12 {
  transform: translate3d(12.34320913px, -7.41654828px, 24px) rotateX(90deg) rotateZ(0deg) rotateY(-121deg);
  width: 5.86046512px;
  height: 5.86046512px;
}
.spiral.two .light-wrapper.light-wrapper-12 .light {
  animation-duration: 0.87069285s;
  animation-delay: 1.03810213s;
}
.spiral.two .light-wrapper.light-wrapper-13 {
  transform: translate3d(12.55914755px, -11.30830725px, 28.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-132deg);
  width: 6.34883721px;
  height: 6.34883721px;
}
.spiral.two .light-wrapper.light-wrapper-13 .light {
  animation-duration: 0.89897683s;
  animation-delay: 0.48492526s;
}
.spiral.two .light-wrapper.light-wrapper-14 {
  transform: translate3d(11.79557445px, -15.653256px, 32.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-143deg);
  width: 6.8372093px;
  height: 6.8372093px;
}
.spiral.two .light-wrapper.light-wrapper-14 .light {
  animation-duration: 1.20203135s;
  animation-delay: 1.2733807s;
}
.spiral.two .light-wrapper.light-wrapper-15 {
  transform: translate3d(9.8633508px, -20.22286604px, 37.5px) rotateX(90deg) rotateZ(0deg) rotateY(-154deg);
  width: 7.3255814px;
  height: 7.3255814px;
}
.spiral.two .light-wrapper.light-wrapper-15 .light {
  animation-duration: 0.33927747s;
  animation-delay: 0.57167443s;
}
.spiral.two .light-wrapper.light-wrapper-16 {
  transform: translate3d(6.62576755px, -24.72770115px, 42.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-165deg);
  width: 7.81395349px;
  height: 7.81395349px;
}
.spiral.two .light-wrapper.light-wrapper-16 .light {
  animation-duration: 0.6653867s;
  animation-delay: 1.02143843s;
}
.spiral.two .light-wrapper.light-wrapper-17 {
  transform: translate3d(2.01596209px, -28.82960105px, 48.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-176deg);
  width: 8.30232558px;
  height: 8.30232558px;
}
.spiral.two .light-wrapper.light-wrapper-17 .light {
  animation-duration: 1.17732418s;
  animation-delay: 0.67179881s;
}
.spiral.two .light-wrapper.light-wrapper-18 {
  transform: translate3d(-3.94856673px, -32.15849531px, 54px) rotateX(90deg) rotateZ(0deg) rotateY(-187deg);
  width: 8.79069767px;
  height: 8.79069767px;
}
.spiral.two .light-wrapper.light-wrapper-18 .light {
  animation-duration: 1.10289846s;
  animation-delay: 0.64438619s;
}
.spiral.two .light-wrapper.light-wrapper-19 {
  transform: translate3d(-11.1555135px, -34.33314024px, 60.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-198deg);
  width: 9.27906977px;
  height: 9.27906977px;
}
.spiral.two .light-wrapper.light-wrapper-19 .light {
  animation-duration: 1.03340084s;
  animation-delay: 0.72478204s;
}
.spiral.two .light-wrapper.light-wrapper-20 {
  transform: translate3d(-19.39238481px, -34.98478829px, 66.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-209deg);
  width: 9.76744186px;
  height: 9.76744186px;
}
.spiral.two .light-wrapper.light-wrapper-20 .light {
  animation-duration: 0.77298004s;
  animation-delay: 0.97226459s;
}
.spiral.two .light-wrapper.light-wrapper-21 {
  transform: translate3d(-28.34693359px, -33.78255994px, 73.5px) rotateX(90deg) rotateZ(0deg) rotateY(-220deg);
  width: 10.25581395px;
  height: 10.25581395px;
}
.spiral.two .light-wrapper.light-wrapper-21 .light {
  animation-duration: 0.84844751s;
  animation-delay: 1.28818284s;
}
.spiral.two .light-wrapper.light-wrapper-22 {
  transform: translate3d(-37.61386453px, -30.45910693px, 80.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-231deg);
  width: 10.74418605px;
  height: 10.74418605px;
}
.spiral.two .light-wrapper.light-wrapper-22 .light {
  animation-duration: 0.55188937s;
  animation-delay: 0.86880454s;
}
.spiral.two .light-wrapper.light-wrapper-23 {
  transform: translate3d(-46.70792766px, -24.83504567px, 88.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-242deg);
  width: 11.23255814px;
  height: 11.23255814px;
}
.spiral.two .light-wrapper.light-wrapper-23 .light {
  animation-duration: 0.44472022s;
  animation-delay: 0.50366863s;
}
.spiral.two .light-wrapper.light-wrapper-24 {
  transform: translate3d(-55.08315394px, -16.84061019px, 96px) rotateX(90deg) rotateZ(0deg) rotateY(-253deg);
  width: 11.72093023px;
  height: 11.72093023px;
}
.spiral.two .light-wrapper.light-wrapper-24 .light {
  animation-duration: 0.78831277s;
  animation-delay: 0.37665451s;
}
.spiral.two .light-wrapper.light-wrapper-25 {
  transform: translate3d(-62.15761846px, -6.53302895px, 104.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-264deg);
  width: 12.20930233px;
  height: 12.20930233px;
}
.spiral.two .light-wrapper.light-wrapper-25 .light {
  animation-duration: 0.90608951s;
  animation-delay: 1.12045612s;
}
.spiral.two .light-wrapper.light-wrapper-26 {
  transform: translate3d(-67.34276159px, 5.89172821px, 112.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-275deg);
  width: 12.69767442px;
  height: 12.69767442px;
}
.spiral.two .light-wrapper.light-wrapper-26 .light {
  animation-duration: 0.31177697s;
  animation-delay: 0.43466109s;
}
.spiral.two .light-wrapper.light-wrapper-27 {
  transform: translate3d(-70.07597763px, 20.09396324px, 121.5px) rotateX(90deg) rotateZ(0deg) rotateY(-286deg);
  width: 13.18604651px;
  height: 13.18604651px;
}
.spiral.two .light-wrapper.light-wrapper-27 .light {
  animation-duration: 0.98149142s;
  animation-delay: 1.02498347s;
}
.spiral.two .light-wrapper.light-wrapper-28 {
  transform: translate3d(-69.8549115px, 35.59285518px, 130.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-297deg);
  width: 13.6744186px;
  height: 13.6744186px;
}
.spiral.two .light-wrapper.light-wrapper-28 .light {
  animation-duration: 1.09958282s;
  animation-delay: 0.88421718s;
}
.spiral.two .light-wrapper.light-wrapper-29 {
  transform: translate3d(-66.27170438px, 51.77713007px, 140.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-308deg);
  width: 14.1627907px;
  height: 14.1627907px;
}
.spiral.two .light-wrapper.light-wrapper-29 .light {
  animation-duration: 0.84195244s;
  animation-delay: 0.45263316s;
}
.spiral.two .light-wrapper.light-wrapper-30 {
  transform: translate3d(-59.04531261px, 67.92386222px, 150px) rotateX(90deg) rotateZ(0deg) rotateY(-319deg);
  width: 14.65116279px;
  height: 14.65116279px;
}
.spiral.two .light-wrapper.light-wrapper-30 .light {
  animation-duration: 0.88248084s;
  animation-delay: 1.13420247s;
}
.spiral.two .light-wrapper.light-wrapper-31 {
  transform: translate3d(-48.05px, 83.2250413px, 160.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-330deg);
  width: 15.13953488px;
  height: 15.13953488px;
}
.spiral.two .light-wrapper.light-wrapper-31 .light {
  animation-duration: 1.05294941s;
  animation-delay: 1.0926241s;
}
.spiral.two .light-wrapper.light-wrapper-32 {
  transform: translate3d(-33.33817902px, 96.82110214px, 170.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-341deg);
  width: 15.62790698px;
  height: 15.62790698px;
}
.spiral.two .light-wrapper.light-wrapper-32 .light {
  animation-duration: 0.93979099s;
  animation-delay: 1.12394172s;
}
.spiral.two .light-wrapper.light-wrapper-33 {
  transform: translate3d(-15.15595069px, 107.84019269px, 181.5px) rotateX(90deg) rotateZ(0deg) rotateY(-352deg);
  width: 16.11627907px;
  height: 16.11627907px;
}
.spiral.two .light-wrapper.light-wrapper-33 .light {
  animation-duration: 0.60759375s;
  animation-delay: 0.79890279s;
}
.spiral.two .light-wrapper.light-wrapper-34 {
  transform: translate3d(6.05003654px, 115.44157422px, 192.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-363deg);
  width: 16.60465116px;
  height: 16.60465116px;
}
.spiral.two .light-wrapper.light-wrapper-34 .light {
  animation-duration: 0.97316272s;
  animation-delay: 0.75530973s;
}
.spiral.two .light-wrapper.light-wrapper-35 {
  transform: translate3d(29.63543221px, 118.86122647px, 204.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-374deg);
  width: 17.09302326px;
  height: 17.09302326px;
}
.spiral.two .light-wrapper.light-wrapper-35 .light {
  animation-duration: 0.62207592s;
  animation-delay: 0.56453311s;
}
.spiral.two .light-wrapper.light-wrapper-36 {
  transform: translate3d(54.77132672px, 117.4574892px, 216px) rotateX(90deg) rotateZ(0deg) rotateY(-385deg);
  width: 17.58139535px;
  height: 17.58139535px;
}
.spiral.two .light-wrapper.light-wrapper-36 .light {
  animation-duration: 0.41629491s;
  animation-delay: 0.32861218s;
}
.spiral.two .light-wrapper.light-wrapper-37 {
  transform: translate3d(80.46780104px, 110.75442653px, 228.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-396deg);
  width: 18.06976744px;
  height: 18.06976744px;
}
.spiral.two .light-wrapper.light-wrapper-37 .light {
  animation-duration: 0.50185046s;
  animation-delay: 1.114597s;
}
.spiral.two .light-wrapper.light-wrapper-38 {
  transform: translate3d(105.60747451px, 98.48056319px, 240.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-407deg);
  width: 18.55813953px;
  height: 18.55813953px;
}
.spiral.two .light-wrapper.light-wrapper-38 .light {
  animation-duration: 0.56908315s;
  animation-delay: 0.62045415s;
}
.spiral.two .light-wrapper.light-wrapper-39 {
  transform: translate3d(128.98811543px, 80.60072009px, 253.5px) rotateX(90deg) rotateZ(0deg) rotateY(-418deg);
  width: 19.04651163px;
  height: 19.04651163px;
}
.spiral.two .light-wrapper.light-wrapper-39 .light {
  animation-duration: 1.14261264s;
  animation-delay: 0.54466288s;
}
.spiral.two .light-wrapper.light-wrapper-40 {
  transform: translate3d(149.37286824px, 57.33887193px, 266.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-429deg);
  width: 19.53488372px;
  height: 19.53488372px;
}
.spiral.two .light-wrapper.light-wrapper-40 .light {
  animation-duration: 0.99089692s;
  animation-delay: 0.76710829s;
}
.spiral.two .light-wrapper.light-wrapper-41 {
  transform: translate3d(165.54618328px, 29.19025867px, 280.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-440deg);
  width: 20.02325581px;
  height: 20.02325581px;
}
.spiral.two .light-wrapper.light-wrapper-41 .light {
  animation-duration: 1.21468713s;
  animation-delay: 1.0347632s;
}
.spiral.two .light-wrapper.light-wrapper-42 {
  transform: translate3d(176.37313343px, -3.0786045px, 294px) rotateX(90deg) rotateZ(0deg) rotateY(-451deg);
  width: 20.51162791px;
  height: 20.51162791px;
}
.spiral.two .light-wrapper.light-wrapper-42 .light {
  animation-duration: 1.25368212s;
  animation-delay: 1.11322101s;
}
.spiral.two .light-wrapper.light-wrapper-43 {
  transform: translate3d(180.85949138px, -38.44287163px, 308.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-462deg);
  width: 21px;
  height: 21px;
}
.spiral.two .light-wrapper.light-wrapper-43 .light {
  animation-duration: 1.14425039s;
  animation-delay: 0.94052782s;
}
.spiral.three .light-wrapper.light-wrapper-1 {
  transform: translate3d(0px, 0.1px, 0.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(0deg);
  width: 0.3255814px;
  height: 0.3255814px;
}
.spiral.three .light-wrapper.light-wrapper-1 .light {
  animation-duration: 1.09433256s;
  animation-delay: 1.13528753s;
}
.spiral.three .light-wrapper.light-wrapper-2 {
  transform: translate3d(0.0763236px, 0.39265087px, 0.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-11deg);
  width: 0.65116279px;
  height: 0.65116279px;
}
.spiral.three .light-wrapper.light-wrapper-2 .light {
  animation-duration: 0.45470756s;
  animation-delay: 0.84944477s;
}
.spiral.three .light-wrapper.light-wrapper-3 {
  transform: translate3d(0.33714593px, 0.83446547px, 1.5px) rotateX(90deg) rotateZ(0deg) rotateY(-22deg);
  width: 0.97674419px;
  height: 0.97674419px;
}
.spiral.three .light-wrapper.light-wrapper-3 .light {
  animation-duration: 0.94148468s;
  animation-delay: 0.57964179s;
}
.spiral.three .light-wrapper.light-wrapper-4 {
  transform: translate3d(0.87142246px, 1.34187291px, 2.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-33deg);
  width: 1.30232558px;
  height: 1.30232558px;
}
.spiral.three .light-wrapper.light-wrapper-4 .light {
  animation-duration: 0.35232303s;
  animation-delay: 0.50297687s;
}
.spiral.three .light-wrapper.light-wrapper-5 {
  transform: translate3d(1.73664593px, 1.7983495px, 4.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-44deg);
  width: 1.62790698px;
  height: 1.62790698px;
}
.spiral.three .light-wrapper.light-wrapper-5 .light {
  animation-duration: 0.97366291s;
  animation-delay: 1.14561869s;
}
.spiral.three .light-wrapper.light-wrapper-6 {
  transform: translate3d(2.94894736px, 2.06487517px, 6px) rotateX(90deg) rotateZ(0deg) rotateY(-55deg);
  width: 1.95348837px;
  height: 1.95348837px;
}
.spiral.three .light-wrapper.light-wrapper-6 .light {
  animation-duration: 0.52763785s;
  animation-delay: 0.76825801s;
}
.spiral.three .light-wrapper.light-wrapper-7 {
  transform: translate3d(4.47637274px, 1.99300955px, 8.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-66deg);
  width: 2.27906977px;
  height: 2.27906977px;
}
.spiral.three .light-wrapper.light-wrapper-7 .light {
  animation-duration: 0.96595354s;
  animation-delay: 0.35625123s;
}
.spiral.three .light-wrapper.light-wrapper-8 {
  transform: translate3d(6.23596841px, 1.43968675px, 10.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-77deg);
  width: 2.60465116px;
  height: 2.60465116px;
}
.spiral.three .light-wrapper.light-wrapper-8 .light {
  animation-duration: 0.93300532s;
  animation-delay: 0.41512929s;
}
.spiral.three .light-wrapper.light-wrapper-9 {
  transform: translate3d(8.0950657px, 0.28268592px, 13.5px) rotateX(90deg) rotateZ(0deg) rotateY(-88deg);
  width: 2.93023256px;
  height: 2.93023256px;
}
.spiral.three .light-wrapper.light-wrapper-9 .light {
  animation-duration: 0.9064576s;
  animation-delay: 1.09154217s;
}
.spiral.three .light-wrapper.light-wrapper-10 {
  transform: translate3d(9.87688341px, -1.56434465px, 16.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-99deg);
  width: 3.25581395px;
  height: 3.25581395px;
}
.spiral.three .light-wrapper.light-wrapper-10 .light {
  animation-duration: 0.7004178s;
  animation-delay: 0.62380273s;
}
.spiral.three .light-wrapper.light-wrapper-11 {
  transform: translate3d(11.37028071px, -4.13844373px, 20.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-110deg);
  width: 3.58139535px;
  height: 3.58139535px;
}
.spiral.three .light-wrapper.light-wrapper-11 .light {
  animation-duration: 1.02782932s;
  animation-delay: 0.8761207s;
}
.spiral.three .light-wrapper.light-wrapper-12 {
  transform: translate3d(12.34320913px, -7.41654828px, 24px) rotateX(90deg) rotateZ(0deg) rotateY(-121deg);
  width: 3.90697674px;
  height: 3.90697674px;
}
.spiral.three .light-wrapper.light-wrapper-12 .light {
  animation-duration: 0.6950982s;
  animation-delay: 0.3086092s;
}
.spiral.three .light-wrapper.light-wrapper-13 {
  transform: translate3d(12.55914755px, -11.30830725px, 28.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-132deg);
  width: 4.23255814px;
  height: 4.23255814px;
}
.spiral.three .light-wrapper.light-wrapper-13 .light {
  animation-duration: 0.49355236s;
  animation-delay: 0.53074998s;
}
.spiral.three .light-wrapper.light-wrapper-14 {
  transform: translate3d(11.79557445px, -15.653256px, 32.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-143deg);
  width: 4.55813953px;
  height: 4.55813953px;
}
.spiral.three .light-wrapper.light-wrapper-14 .light {
  animation-duration: 0.73000403s;
  animation-delay: 0.63274704s;
}
.spiral.three .light-wrapper.light-wrapper-15 {
  transform: translate3d(9.8633508px, -20.22286604px, 37.5px) rotateX(90deg) rotateZ(0deg) rotateY(-154deg);
  width: 4.88372093px;
  height: 4.88372093px;
}
.spiral.three .light-wrapper.light-wrapper-15 .light {
  animation-duration: 0.69467726s;
  animation-delay: 1.09628557s;
}
.spiral.three .light-wrapper.light-wrapper-16 {
  transform: translate3d(6.62576755px, -24.72770115px, 42.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-165deg);
  width: 5.20930233px;
  height: 5.20930233px;
}
.spiral.three .light-wrapper.light-wrapper-16 .light {
  animation-duration: 1.09412999s;
  animation-delay: 0.91172173s;
}
.spiral.three .light-wrapper.light-wrapper-17 {
  transform: translate3d(2.01596209px, -28.82960105px, 48.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-176deg);
  width: 5.53488372px;
  height: 5.53488372px;
}
.spiral.three .light-wrapper.light-wrapper-17 .light {
  animation-duration: 0.82094746s;
  animation-delay: 1.25075451s;
}
.spiral.three .light-wrapper.light-wrapper-18 {
  transform: translate3d(-3.94856673px, -32.15849531px, 54px) rotateX(90deg) rotateZ(0deg) rotateY(-187deg);
  width: 5.86046512px;
  height: 5.86046512px;
}
.spiral.three .light-wrapper.light-wrapper-18 .light {
  animation-duration: 0.53176242s;
  animation-delay: 0.67085166s;
}
.spiral.three .light-wrapper.light-wrapper-19 {
  transform: translate3d(-11.1555135px, -34.33314024px, 60.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-198deg);
  width: 6.18604651px;
  height: 6.18604651px;
}
.spiral.three .light-wrapper.light-wrapper-19 .light {
  animation-duration: 1.1303743s;
  animation-delay: 0.30768029s;
}
.spiral.three .light-wrapper.light-wrapper-20 {
  transform: translate3d(-19.39238481px, -34.98478829px, 66.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-209deg);
  width: 6.51162791px;
  height: 6.51162791px;
}
.spiral.three .light-wrapper.light-wrapper-20 .light {
  animation-duration: 0.86867542s;
  animation-delay: 1.08752968s;
}
.spiral.three .light-wrapper.light-wrapper-21 {
  transform: translate3d(-28.34693359px, -33.78255994px, 73.5px) rotateX(90deg) rotateZ(0deg) rotateY(-220deg);
  width: 6.8372093px;
  height: 6.8372093px;
}
.spiral.three .light-wrapper.light-wrapper-21 .light {
  animation-duration: 1.02048022s;
  animation-delay: 1.2199622s;
}
.spiral.three .light-wrapper.light-wrapper-22 {
  transform: translate3d(-37.61386453px, -30.45910693px, 80.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-231deg);
  width: 7.1627907px;
  height: 7.1627907px;
}
.spiral.three .light-wrapper.light-wrapper-22 .light {
  animation-duration: 1.17609577s;
  animation-delay: 0.43032183s;
}
.spiral.three .light-wrapper.light-wrapper-23 {
  transform: translate3d(-46.70792766px, -24.83504567px, 88.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-242deg);
  width: 7.48837209px;
  height: 7.48837209px;
}
.spiral.three .light-wrapper.light-wrapper-23 .light {
  animation-duration: 0.99873705s;
  animation-delay: 0.30594107s;
}
.spiral.three .light-wrapper.light-wrapper-24 {
  transform: translate3d(-55.08315394px, -16.84061019px, 96px) rotateX(90deg) rotateZ(0deg) rotateY(-253deg);
  width: 7.81395349px;
  height: 7.81395349px;
}
.spiral.three .light-wrapper.light-wrapper-24 .light {
  animation-duration: 0.65482479s;
  animation-delay: 1.0604287s;
}
.spiral.three .light-wrapper.light-wrapper-25 {
  transform: translate3d(-62.15761846px, -6.53302895px, 104.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-264deg);
  width: 8.13953488px;
  height: 8.13953488px;
}
.spiral.three .light-wrapper.light-wrapper-25 .light {
  animation-duration: 1.08045016s;
  animation-delay: 0.90054466s;
}
.spiral.three .light-wrapper.light-wrapper-26 {
  transform: translate3d(-67.34276159px, 5.89172821px, 112.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-275deg);
  width: 8.46511628px;
  height: 8.46511628px;
}
.spiral.three .light-wrapper.light-wrapper-26 .light {
  animation-duration: 0.56682947s;
  animation-delay: 0.41811832s;
}
.spiral.three .light-wrapper.light-wrapper-27 {
  transform: translate3d(-70.07597763px, 20.09396324px, 121.5px) rotateX(90deg) rotateZ(0deg) rotateY(-286deg);
  width: 8.79069767px;
  height: 8.79069767px;
}
.spiral.three .light-wrapper.light-wrapper-27 .light {
  animation-duration: 0.67374585s;
  animation-delay: 1.26464845s;
}
.spiral.three .light-wrapper.light-wrapper-28 {
  transform: translate3d(-69.8549115px, 35.59285518px, 130.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-297deg);
  width: 9.11627907px;
  height: 9.11627907px;
}
.spiral.three .light-wrapper.light-wrapper-28 .light {
  animation-duration: 0.82168494s;
  animation-delay: 1.15234743s;
}
.spiral.three .light-wrapper.light-wrapper-29 {
  transform: translate3d(-66.27170438px, 51.77713007px, 140.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-308deg);
  width: 9.44186047px;
  height: 9.44186047px;
}
.spiral.three .light-wrapper.light-wrapper-29 .light {
  animation-duration: 0.53597222s;
  animation-delay: 0.64868024s;
}
.spiral.three .light-wrapper.light-wrapper-30 {
  transform: translate3d(-59.04531261px, 67.92386222px, 150px) rotateX(90deg) rotateZ(0deg) rotateY(-319deg);
  width: 9.76744186px;
  height: 9.76744186px;
}
.spiral.three .light-wrapper.light-wrapper-30 .light {
  animation-duration: 0.71060115s;
  animation-delay: 1.16174692s;
}
.spiral.three .light-wrapper.light-wrapper-31 {
  transform: translate3d(-48.05px, 83.2250413px, 160.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-330deg);
  width: 10.09302326px;
  height: 10.09302326px;
}
.spiral.three .light-wrapper.light-wrapper-31 .light {
  animation-duration: 0.96396607s;
  animation-delay: 0.32138494s;
}
.spiral.three .light-wrapper.light-wrapper-32 {
  transform: translate3d(-33.33817902px, 96.82110214px, 170.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-341deg);
  width: 10.41860465px;
  height: 10.41860465px;
}
.spiral.three .light-wrapper.light-wrapper-32 .light {
  animation-duration: 1.24590378s;
  animation-delay: 1.22979874s;
}
.spiral.three .light-wrapper.light-wrapper-33 {
  transform: translate3d(-15.15595069px, 107.84019269px, 181.5px) rotateX(90deg) rotateZ(0deg) rotateY(-352deg);
  width: 10.74418605px;
  height: 10.74418605px;
}
.spiral.three .light-wrapper.light-wrapper-33 .light {
  animation-duration: 0.80130319s;
  animation-delay: 0.5665702s;
}
.spiral.three .light-wrapper.light-wrapper-34 {
  transform: translate3d(6.05003654px, 115.44157422px, 192.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-363deg);
  width: 11.06976744px;
  height: 11.06976744px;
}
.spiral.three .light-wrapper.light-wrapper-34 .light {
  animation-duration: 1.1060219s;
  animation-delay: 1.21588134s;
}
.spiral.three .light-wrapper.light-wrapper-35 {
  transform: translate3d(29.63543221px, 118.86122647px, 204.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-374deg);
  width: 11.39534884px;
  height: 11.39534884px;
}
.spiral.three .light-wrapper.light-wrapper-35 .light {
  animation-duration: 0.67013298s;
  animation-delay: 0.45035808s;
}
.spiral.three .light-wrapper.light-wrapper-36 {
  transform: translate3d(54.77132672px, 117.4574892px, 216px) rotateX(90deg) rotateZ(0deg) rotateY(-385deg);
  width: 11.72093023px;
  height: 11.72093023px;
}
.spiral.three .light-wrapper.light-wrapper-36 .light {
  animation-duration: 0.57981003s;
  animation-delay: 1.2446399s;
}
.spiral.three .light-wrapper.light-wrapper-37 {
  transform: translate3d(80.46780104px, 110.75442653px, 228.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-396deg);
  width: 12.04651163px;
  height: 12.04651163px;
}
.spiral.three .light-wrapper.light-wrapper-37 .light {
  animation-duration: 0.67240882s;
  animation-delay: 1.1913153s;
}
.spiral.three .light-wrapper.light-wrapper-38 {
  transform: translate3d(105.60747451px, 98.48056319px, 240.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-407deg);
  width: 12.37209302px;
  height: 12.37209302px;
}
.spiral.three .light-wrapper.light-wrapper-38 .light {
  animation-duration: 1.08949656s;
  animation-delay: 1.00848499s;
}
.spiral.three .light-wrapper.light-wrapper-39 {
  transform: translate3d(128.98811543px, 80.60072009px, 253.5px) rotateX(90deg) rotateZ(0deg) rotateY(-418deg);
  width: 12.69767442px;
  height: 12.69767442px;
}
.spiral.three .light-wrapper.light-wrapper-39 .light {
  animation-duration: 0.51982364s;
  animation-delay: 0.92759135s;
}
.spiral.three .light-wrapper.light-wrapper-40 {
  transform: translate3d(149.37286824px, 57.33887193px, 266.66666667px) rotateX(90deg) rotateZ(0deg) rotateY(-429deg);
  width: 13.02325581px;
  height: 13.02325581px;
}
.spiral.three .light-wrapper.light-wrapper-40 .light {
  animation-duration: 0.40438271s;
  animation-delay: 0.40079988s;
}
.spiral.three .light-wrapper.light-wrapper-41 {
  transform: translate3d(165.54618328px, 29.19025867px, 280.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-440deg);
  width: 13.34883721px;
  height: 13.34883721px;
}
.spiral.three .light-wrapper.light-wrapper-41 .light {
  animation-duration: 0.41394656s;
  animation-delay: 0.77407718s;
}
.spiral.three .light-wrapper.light-wrapper-42 {
  transform: translate3d(176.37313343px, -3.0786045px, 294px) rotateX(90deg) rotateZ(0deg) rotateY(-451deg);
  width: 13.6744186px;
  height: 13.6744186px;
}
.spiral.three .light-wrapper.light-wrapper-42 .light {
  animation-duration: 0.54628541s;
  animation-delay: 0.98097502s;
}
.spiral.three .light-wrapper.light-wrapper-43 {
  transform: translate3d(180.85949138px, -38.44287163px, 308.16666667px) rotateX(90deg) rotateZ(0deg) rotateY(-462deg);
  width: 14px;
  height: 14px;
}
.spiral.three .light-wrapper.light-wrapper-43 .light {
  animation-duration: 1.28477589s;
  animation-delay: 1.13579335s;
}
@keyframes pulsate {
  0% {
    transform: scale(0.5);
    opacity: 0.4;
  }
  100% {
    transform: scale(1);
  }
}
@keyframes pulsate-star {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes rotate-tree {
  0% {
    transform: rotateX(-90deg) rotateZ(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(-90deg) rotateZ(360deg) rotateY(0deg);
  }
}
.wrap {
  margin: 0 auto;
  width: 500px;
  color: white;
  text-align: center;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}
.player {
  margin-top: 50px;
  width: 500px;
  height: 75px;
  background: rgba(255, 255, 255, 0.1);
  border-bottom: 4px #ccc solid;
  position: relative;
  color: black;
  text-align: left;
  text-shadow: none;
}
.player .album-art {
  position: absolute;
  left: 0;
  width: 15%;
  height: 100%;
  box-shadow: 3px 0 3px 0 rgba(0, 0, 0, 0.4);
  padding: 5px;
}
.player .album-art .cover {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.25);
  background: url("/static/img/kosides-trio.jpg");
  background-size: cover;
}
.player .description {
  position: relative;
  width: 60%;
  height: 50px;
  top: 20%;
  left: 20%;
  overflow: hidden;
}
.player .description .title {
  color: #fff;
  font-size: 1.1em;
  font-weight: 100;
}
.player .description .sub-title {
  font-size: 0.9em;
  font-weight: 100;
  color: #fff;
}
.player .play-button {
  position: absolute;
  width: 55px;
  height: 55px;
  right: 10%;
  border-radius: 50%;
  top: -25px;
  background: white;
  box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.35);
  text-align: center;
  line-height: 57px;
  font-size: 26px;
  color: #D32F2F;
  cursor: pointer;
}
.player .play-button .lp-background {
  transition: all 0.35s ease;
  background: url("/static/img/vynil.png");
  background-size: cover;
  animation: spin 1s infinite linear;
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
}
.player .play-button i {
  z-index: 100;
}
.player .play-button .mdi-pause {
  z-index: 100;
  position: absolute;
  right: 17.5px;
  top: 17.4px;
  color: white;
  font-size: 20px;
}
.player .play-button:hover {
  box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.5);
}
.player .time-indicator {
  position: absolute;
  right: 11%;
  top: 60%;
  font-size: 0.9em;
  font-weight: 100;
  color: #fff;
}
.player .time-indicator i {
  line-height: 1rem;
}
.player .progress-bar {
  width: 100%;
  top: 100%;
  opacity: 0;
  height: 0;
  position: absolute;
  cursor: pointer;
}
.player .progress-bar .runner {
  height: 4px;
  background: #F44336;
}
.player .visualizer {
  position: absolute;
  top: 25%;
  left: 37.5%;
  width: 0%;
  height: 50%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  overflow: hidden;
}
.player .visualizer div {
  width: 2px;
  background: #fff;
  float: left;
  height: 0%;
  margin-right: 5px;
  transition: all 0.1s ease;
}
.player.paused {
  border-bottom: none;
}
.player.paused .visualizer {
  opacity: 0;
}
.player.paused .lp-background {
  opacity: 0;
}
.player.paused .play-button .mdi-pause {
  opacity: 0;
}
.player.playing .description {
  left: 0%;
  opacity: 0;
}
.player.playing .album-art {
  width: 0px;
  opacity: 0;
}
.player.playing .visualizer {
  left: 5%;
  width: 65%;
}
.player.playing .progress-bar {
  height: 4px;
  margin: 0;
  opacity: 1;
}
.player.playing .play-button {
  background: transparent;
}
.player.playing .play-button .mdi-play {
  opacity: 0;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}