html {
  font-size: 128px;
  font-size: 30vmin;
}

body {
  margin: 0;
  overflow: hidden;
  background: #222;
  background: radial-gradient(circle, #333333, #111111);
  min-height: 100vh;
}

.rings {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  position: absolute;
  left: 50%;
  margin-left: -0.5rem;
  top: 50%;
  margin-top: -0.5rem;
  width: 1rem;
  height: 1rem;
  -webkit-animation: rotate 31s linear infinite;
          animation: rotate 31s linear infinite;
}
.rings.off-box-shadow > .ring {
  box-shadow: none;
}
.rings.off-outline > .ring {
  outline: none;
}
.rings.off-background > .ring {
  background: transparent;
}
.rings.off-border > .ring {
  border: 0;
}
.rings.funky {
  -webkit-perspective: 20px;
          perspective: 20px;
}
.rings.animation-pause {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

.ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
}
.ring:nth-of-type(1) {
  -webkit-transform: rotateX(11deg) rotateY(13deg) rotateZ(17deg);
          transform: rotateX(11deg) rotateY(13deg) rotateZ(17deg);
  box-shadow: 0 0 20px rgba(242, 17, 13, 0.9);
  outline: 10px dotted rgba(242, 17, 13, 0.1);
  background: rgba(242, 17, 13, 0.03);
  border: 1px inset rgba(255, 4, 0, 0.5);
}
.ring:nth-of-type(2) {
  -webkit-transform: rotateX(22deg) rotateY(26deg) rotateZ(34deg);
          transform: rotateX(22deg) rotateY(26deg) rotateZ(34deg);
  box-shadow: 0 0 20px rgba(242, 20, 13, 0.9);
  outline: 10px dotted rgba(242, 20, 13, 0.1);
  background: rgba(242, 20, 13, 0.03);
  border: 1px inset rgba(255, 9, 0, 0.5);
}
.ring:nth-of-type(3) {
  -webkit-transform: rotateX(33deg) rotateY(39deg) rotateZ(51deg);
          transform: rotateX(33deg) rotateY(39deg) rotateZ(51deg);
  box-shadow: 0 0 20px rgba(242, 24, 13, 0.9);
  outline: 10px dotted rgba(242, 24, 13, 0.1);
  background: rgba(242, 24, 13, 0.03);
  border: 1px inset rgba(255, 13, 0, 0.5);
}
.ring:nth-of-type(4) {
  -webkit-transform: rotateX(44deg) rotateY(52deg) rotateZ(68deg);
          transform: rotateX(44deg) rotateY(52deg) rotateZ(68deg);
  box-shadow: 0 0 20px rgba(242, 28, 13, 0.9);
  outline: 10px dotted rgba(242, 28, 13, 0.1);
  background: rgba(242, 28, 13, 0.03);
  border: 1px inset rgba(255, 17, 0, 0.5);
}
.ring:nth-of-type(5) {
  -webkit-transform: rotateX(55deg) rotateY(65deg) rotateZ(85deg);
          transform: rotateX(55deg) rotateY(65deg) rotateZ(85deg);
  box-shadow: 0 0 20px rgba(242, 32, 13, 0.9);
  outline: 10px dotted rgba(242, 32, 13, 0.1);
  background: rgba(242, 32, 13, 0.03);
  border: 1px inset rgba(255, 21, 0, 0.5);
}
.ring:nth-of-type(6) {
  -webkit-transform: rotateX(66deg) rotateY(78deg) rotateZ(102deg);
          transform: rotateX(66deg) rotateY(78deg) rotateZ(102deg);
  box-shadow: 0 0 20px rgba(242, 36, 13, 0.9);
  outline: 10px dotted rgba(242, 36, 13, 0.1);
  background: rgba(242, 36, 13, 0.03);
  border: 1px inset rgba(255, 26, 0, 0.5);
}
.ring:nth-of-type(7) {
  -webkit-transform: rotateX(77deg) rotateY(91deg) rotateZ(119deg);
          transform: rotateX(77deg) rotateY(91deg) rotateZ(119deg);
  box-shadow: 0 0 20px rgba(242, 40, 13, 0.9);
  outline: 10px dotted rgba(242, 40, 13, 0.1);
  background: rgba(242, 40, 13, 0.03);
  border: 1px inset rgba(255, 30, 0, 0.5);
}
.ring:nth-of-type(8) {
  -webkit-transform: rotateX(88deg) rotateY(104deg) rotateZ(136deg);
          transform: rotateX(88deg) rotateY(104deg) rotateZ(136deg);
  box-shadow: 0 0 20px rgba(242, 43, 13, 0.9);
  outline: 10px dotted rgba(242, 43, 13, 0.1);
  background: rgba(242, 43, 13, 0.03);
  border: 1px inset rgba(255, 34, 0, 0.5);
}
.ring:nth-of-type(9) {
  -webkit-transform: rotateX(99deg) rotateY(117deg) rotateZ(153deg);
          transform: rotateX(99deg) rotateY(117deg) rotateZ(153deg);
  box-shadow: 0 0 20px rgba(242, 47, 13, 0.9);
  outline: 10px dotted rgba(242, 47, 13, 0.1);
  background: rgba(242, 47, 13, 0.03);
  border: 1px inset rgba(255, 38, 0, 0.5);
}
.ring:nth-of-type(10) {
  -webkit-transform: rotateX(110deg) rotateY(130deg) rotateZ(170deg);
          transform: rotateX(110deg) rotateY(130deg) rotateZ(170deg);
  box-shadow: 0 0 20px rgba(242, 51, 13, 0.9);
  outline: 10px dotted rgba(242, 51, 13, 0.1);
  background: rgba(242, 51, 13, 0.03);
  border: 1px inset rgba(255, 43, 0, 0.5);
}
.ring:nth-of-type(11) {
  -webkit-transform: rotateX(121deg) rotateY(143deg) rotateZ(187deg);
          transform: rotateX(121deg) rotateY(143deg) rotateZ(187deg);
  box-shadow: 0 0 20px rgba(242, 55, 13, 0.9);
  outline: 10px dotted rgba(242, 55, 13, 0.1);
  background: rgba(242, 55, 13, 0.03);
  border: 1px inset rgba(255, 47, 0, 0.5);
}
.ring:nth-of-type(12) {
  -webkit-transform: rotateX(132deg) rotateY(156deg) rotateZ(204deg);
          transform: rotateX(132deg) rotateY(156deg) rotateZ(204deg);
  box-shadow: 0 0 20px rgba(242, 59, 13, 0.9);
  outline: 10px dotted rgba(242, 59, 13, 0.1);
  background: rgba(242, 59, 13, 0.03);
  border: 1px inset rgba(255, 51, 0, 0.5);
}
.ring:nth-of-type(13) {
  -webkit-transform: rotateX(143deg) rotateY(169deg) rotateZ(221deg);
          transform: rotateX(143deg) rotateY(169deg) rotateZ(221deg);
  box-shadow: 0 0 20px rgba(242, 62, 13, 0.9);
  outline: 10px dotted rgba(242, 62, 13, 0.1);
  background: rgba(242, 62, 13, 0.03);
  border: 1px inset rgba(255, 55, 0, 0.5);
}
.ring:nth-of-type(14) {
  -webkit-transform: rotateX(154deg) rotateY(182deg) rotateZ(238deg);
          transform: rotateX(154deg) rotateY(182deg) rotateZ(238deg);
  box-shadow: 0 0 20px rgba(242, 66, 13, 0.9);
  outline: 10px dotted rgba(242, 66, 13, 0.1);
  background: rgba(242, 66, 13, 0.03);
  border: 1px inset rgba(255, 60, 0, 0.5);
}
.ring:nth-of-type(15) {
  -webkit-transform: rotateX(165deg) rotateY(195deg) rotateZ(255deg);
          transform: rotateX(165deg) rotateY(195deg) rotateZ(255deg);
  box-shadow: 0 0 20px rgba(242, 70, 13, 0.9);
  outline: 10px dotted rgba(242, 70, 13, 0.1);
  background: rgba(242, 70, 13, 0.03);
  border: 1px inset rgba(255, 64, 0, 0.5);
}
.ring:nth-of-type(16) {
  -webkit-transform: rotateX(176deg) rotateY(208deg) rotateZ(272deg);
          transform: rotateX(176deg) rotateY(208deg) rotateZ(272deg);
  box-shadow: 0 0 20px rgba(242, 74, 13, 0.9);
  outline: 10px dotted rgba(242, 74, 13, 0.1);
  background: rgba(242, 74, 13, 0.03);
  border: 1px inset rgba(255, 68, 0, 0.5);
}
.ring:nth-of-type(17) {
  -webkit-transform: rotateX(187deg) rotateY(221deg) rotateZ(289deg);
          transform: rotateX(187deg) rotateY(221deg) rotateZ(289deg);
  box-shadow: 0 0 20px rgba(242, 78, 13, 0.9);
  outline: 10px dotted rgba(242, 78, 13, 0.1);
  background: rgba(242, 78, 13, 0.03);
  border: 1px inset rgba(255, 72, 0, 0.5);
}
.ring:nth-of-type(18) {
  -webkit-transform: rotateX(198deg) rotateY(234deg) rotateZ(306deg);
          transform: rotateX(198deg) rotateY(234deg) rotateZ(306deg);
  box-shadow: 0 0 20px rgba(242, 82, 13, 0.9);
  outline: 10px dotted rgba(242, 82, 13, 0.1);
  background: rgba(242, 82, 13, 0.03);
  border: 1px inset rgba(255, 77, 0, 0.5);
}
.ring:nth-of-type(19) {
  -webkit-transform: rotateX(209deg) rotateY(247deg) rotateZ(323deg);
          transform: rotateX(209deg) rotateY(247deg) rotateZ(323deg);
  box-shadow: 0 0 20px rgba(242, 85, 13, 0.9);
  outline: 10px dotted rgba(242, 85, 13, 0.1);
  background: rgba(242, 85, 13, 0.03);
  border: 1px inset rgba(255, 81, 0, 0.5);
}
.ring:nth-of-type(20) {
  -webkit-transform: rotateX(220deg) rotateY(260deg) rotateZ(340deg);
          transform: rotateX(220deg) rotateY(260deg) rotateZ(340deg);
  box-shadow: 0 0 20px rgba(242, 89, 13, 0.9);
  outline: 10px dotted rgba(242, 89, 13, 0.1);
  background: rgba(242, 89, 13, 0.03);
  border: 1px inset rgba(255, 85, 0, 0.5);
}
.ring:nth-of-type(21) {
  -webkit-transform: rotateX(231deg) rotateY(273deg) rotateZ(357deg);
          transform: rotateX(231deg) rotateY(273deg) rotateZ(357deg);
  box-shadow: 0 0 20px rgba(242, 93, 13, 0.9);
  outline: 10px dotted rgba(242, 93, 13, 0.1);
  background: rgba(242, 93, 13, 0.03);
  border: 1px inset rgba(255, 89, 0, 0.5);
}
.ring:nth-of-type(22) {
  -webkit-transform: rotateX(242deg) rotateY(286deg) rotateZ(374deg);
          transform: rotateX(242deg) rotateY(286deg) rotateZ(374deg);
  box-shadow: 0 0 20px rgba(242, 97, 13, 0.9);
  outline: 10px dotted rgba(242, 97, 13, 0.1);
  background: rgba(242, 97, 13, 0.03);
  border: 1px inset rgba(255, 94, 0, 0.5);
}
.ring:nth-of-type(23) {
  -webkit-transform: rotateX(253deg) rotateY(299deg) rotateZ(391deg);
          transform: rotateX(253deg) rotateY(299deg) rotateZ(391deg);
  box-shadow: 0 0 20px rgba(242, 101, 13, 0.9);
  outline: 10px dotted rgba(242, 101, 13, 0.1);
  background: rgba(242, 101, 13, 0.03);
  border: 1px inset rgba(255, 98, 0, 0.5);
}
.ring:nth-of-type(24) {
  -webkit-transform: rotateX(264deg) rotateY(312deg) rotateZ(408deg);
          transform: rotateX(264deg) rotateY(312deg) rotateZ(408deg);
  box-shadow: 0 0 20px rgba(242, 105, 13, 0.9);
  outline: 10px dotted rgba(242, 105, 13, 0.1);
  background: rgba(242, 105, 13, 0.03);
  border: 1px inset rgba(255, 102, 0, 0.5);
}
.ring:nth-of-type(25) {
  -webkit-transform: rotateX(275deg) rotateY(325deg) rotateZ(425deg);
          transform: rotateX(275deg) rotateY(325deg) rotateZ(425deg);
  box-shadow: 0 0 20px rgba(242, 108, 13, 0.9);
  outline: 10px dotted rgba(242, 108, 13, 0.1);
  background: rgba(242, 108, 13, 0.03);
  border: 1px inset rgba(255, 106, 0, 0.5);
}
.ring:nth-of-type(26) {
  -webkit-transform: rotateX(286deg) rotateY(338deg) rotateZ(442deg);
          transform: rotateX(286deg) rotateY(338deg) rotateZ(442deg);
  box-shadow: 0 0 20px rgba(242, 112, 13, 0.9);
  outline: 10px dotted rgba(242, 112, 13, 0.1);
  background: rgba(242, 112, 13, 0.03);
  border: 1px inset rgba(255, 111, 0, 0.5);
}
.ring:nth-of-type(27) {
  -webkit-transform: rotateX(297deg) rotateY(351deg) rotateZ(459deg);
          transform: rotateX(297deg) rotateY(351deg) rotateZ(459deg);
  box-shadow: 0 0 20px rgba(242, 116, 13, 0.9);
  outline: 10px dotted rgba(242, 116, 13, 0.1);
  background: rgba(242, 116, 13, 0.03);
  border: 1px inset rgba(255, 115, 0, 0.5);
}
.ring:nth-of-type(28) {
  -webkit-transform: rotateX(308deg) rotateY(364deg) rotateZ(476deg);
          transform: rotateX(308deg) rotateY(364deg) rotateZ(476deg);
  box-shadow: 0 0 20px rgba(242, 120, 13, 0.9);
  outline: 10px dotted rgba(242, 120, 13, 0.1);
  background: rgba(242, 120, 13, 0.03);
  border: 1px inset rgba(255, 119, 0, 0.5);
}
.ring:nth-of-type(29) {
  -webkit-transform: rotateX(319deg) rotateY(377deg) rotateZ(493deg);
          transform: rotateX(319deg) rotateY(377deg) rotateZ(493deg);
  box-shadow: 0 0 20px rgba(242, 124, 13, 0.9);
  outline: 10px dotted rgba(242, 124, 13, 0.1);
  background: rgba(242, 124, 13, 0.03);
  border: 1px inset rgba(255, 123, 0, 0.5);
}
.ring:nth-of-type(30) {
  -webkit-transform: rotateX(330deg) rotateY(390deg) rotateZ(510deg);
          transform: rotateX(330deg) rotateY(390deg) rotateZ(510deg);
  box-shadow: 0 0 20px rgba(242, 128, 13, 0.9);
  outline: 10px dotted rgba(242, 128, 13, 0.1);
  background: rgba(242, 128, 13, 0.03);
  border: 1px inset rgba(255, 128, 0, 0.5);
}
.ring:nth-of-type(31) {
  -webkit-transform: rotateX(341deg) rotateY(403deg) rotateZ(527deg);
          transform: rotateX(341deg) rotateY(403deg) rotateZ(527deg);
  box-shadow: 0 0 20px rgba(242, 131, 13, 0.9);
  outline: 10px dotted rgba(242, 131, 13, 0.1);
  background: rgba(242, 131, 13, 0.03);
  border: 1px inset rgba(255, 132, 0, 0.5);
}
.ring:nth-of-type(32) {
  -webkit-transform: rotateX(352deg) rotateY(416deg) rotateZ(544deg);
          transform: rotateX(352deg) rotateY(416deg) rotateZ(544deg);
  box-shadow: 0 0 20px rgba(242, 135, 13, 0.9);
  outline: 10px dotted rgba(242, 135, 13, 0.1);
  background: rgba(242, 135, 13, 0.03);
  border: 1px inset rgba(255, 136, 0, 0.5);
}
.ring:nth-of-type(33) {
  -webkit-transform: rotateX(363deg) rotateY(429deg) rotateZ(561deg);
          transform: rotateX(363deg) rotateY(429deg) rotateZ(561deg);
  box-shadow: 0 0 20px rgba(242, 139, 13, 0.9);
  outline: 10px dotted rgba(242, 139, 13, 0.1);
  background: rgba(242, 139, 13, 0.03);
  border: 1px inset rgba(255, 140, 0, 0.5);
}
.ring:nth-of-type(34) {
  -webkit-transform: rotateX(374deg) rotateY(442deg) rotateZ(578deg);
          transform: rotateX(374deg) rotateY(442deg) rotateZ(578deg);
  box-shadow: 0 0 20px rgba(242, 143, 13, 0.9);
  outline: 10px dotted rgba(242, 143, 13, 0.1);
  background: rgba(242, 143, 13, 0.03);
  border: 1px inset rgba(255, 145, 0, 0.5);
}
.ring:nth-of-type(35) {
  -webkit-transform: rotateX(385deg) rotateY(455deg) rotateZ(595deg);
          transform: rotateX(385deg) rotateY(455deg) rotateZ(595deg);
  box-shadow: 0 0 20px rgba(242, 147, 13, 0.9);
  outline: 10px dotted rgba(242, 147, 13, 0.1);
  background: rgba(242, 147, 13, 0.03);
  border: 1px inset rgba(255, 149, 0, 0.5);
}
.ring:nth-of-type(36) {
  -webkit-transform: rotateX(396deg) rotateY(468deg) rotateZ(612deg);
          transform: rotateX(396deg) rotateY(468deg) rotateZ(612deg);
  box-shadow: 0 0 20px rgba(242, 150, 13, 0.9);
  outline: 10px dotted rgba(242, 150, 13, 0.1);
  background: rgba(242, 150, 13, 0.03);
  border: 1px inset rgba(255, 153, 0, 0.5);
}
.ring:nth-of-type(37) {
  -webkit-transform: rotateX(407deg) rotateY(481deg) rotateZ(629deg);
          transform: rotateX(407deg) rotateY(481deg) rotateZ(629deg);
  box-shadow: 0 0 20px rgba(242, 154, 13, 0.9);
  outline: 10px dotted rgba(242, 154, 13, 0.1);
  background: rgba(242, 154, 13, 0.03);
  border: 1px inset rgba(255, 157, 0, 0.5);
}
.ring:nth-of-type(38) {
  -webkit-transform: rotateX(418deg) rotateY(494deg) rotateZ(646deg);
          transform: rotateX(418deg) rotateY(494deg) rotateZ(646deg);
  box-shadow: 0 0 20px rgba(242, 158, 13, 0.9);
  outline: 10px dotted rgba(242, 158, 13, 0.1);
  background: rgba(242, 158, 13, 0.03);
  border: 1px inset rgba(255, 162, 0, 0.5);
}
.ring:nth-of-type(39) {
  -webkit-transform: rotateX(429deg) rotateY(507deg) rotateZ(663deg);
          transform: rotateX(429deg) rotateY(507deg) rotateZ(663deg);
  box-shadow: 0 0 20px rgba(242, 162, 13, 0.9);
  outline: 10px dotted rgba(242, 162, 13, 0.1);
  background: rgba(242, 162, 13, 0.03);
  border: 1px inset rgba(255, 166, 0, 0.5);
}
.ring:nth-of-type(40) {
  -webkit-transform: rotateX(440deg) rotateY(520deg) rotateZ(680deg);
          transform: rotateX(440deg) rotateY(520deg) rotateZ(680deg);
  box-shadow: 0 0 20px rgba(242, 166, 13, 0.9);
  outline: 10px dotted rgba(242, 166, 13, 0.1);
  background: rgba(242, 166, 13, 0.03);
  border: 1px inset rgba(255, 170, 0, 0.5);
}
.ring:nth-of-type(41) {
  -webkit-transform: rotateX(451deg) rotateY(533deg) rotateZ(697deg);
          transform: rotateX(451deg) rotateY(533deg) rotateZ(697deg);
  box-shadow: 0 0 20px rgba(242, 170, 13, 0.9);
  outline: 10px dotted rgba(242, 170, 13, 0.1);
  background: rgba(242, 170, 13, 0.03);
  border: 1px inset rgba(255, 174, 0, 0.5);
}
.ring:nth-of-type(42) {
  -webkit-transform: rotateX(462deg) rotateY(546deg) rotateZ(714deg);
          transform: rotateX(462deg) rotateY(546deg) rotateZ(714deg);
  box-shadow: 0 0 20px rgba(242, 173, 13, 0.9);
  outline: 10px dotted rgba(242, 173, 13, 0.1);
  background: rgba(242, 173, 13, 0.03);
  border: 1px inset rgba(255, 179, 0, 0.5);
}
.ring:nth-of-type(43) {
  -webkit-transform: rotateX(473deg) rotateY(559deg) rotateZ(731deg);
          transform: rotateX(473deg) rotateY(559deg) rotateZ(731deg);
  box-shadow: 0 0 20px rgba(242, 177, 13, 0.9);
  outline: 10px dotted rgba(242, 177, 13, 0.1);
  background: rgba(242, 177, 13, 0.03);
  border: 1px inset rgba(255, 183, 0, 0.5);
}
.ring:nth-of-type(44) {
  -webkit-transform: rotateX(484deg) rotateY(572deg) rotateZ(748deg);
          transform: rotateX(484deg) rotateY(572deg) rotateZ(748deg);
  box-shadow: 0 0 20px rgba(242, 181, 13, 0.9);
  outline: 10px dotted rgba(242, 181, 13, 0.1);
  background: rgba(242, 181, 13, 0.03);
  border: 1px inset rgba(255, 187, 0, 0.5);
}
.ring:nth-of-type(45) {
  -webkit-transform: rotateX(495deg) rotateY(585deg) rotateZ(765deg);
          transform: rotateX(495deg) rotateY(585deg) rotateZ(765deg);
  box-shadow: 0 0 20px rgba(242, 185, 13, 0.9);
  outline: 10px dotted rgba(242, 185, 13, 0.1);
  background: rgba(242, 185, 13, 0.03);
  border: 1px inset rgba(255, 191, 0, 0.5);
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotateX(2turn) rotateY(3turn) rotateZ(5turn);
            transform: rotateX(2turn) rotateY(3turn) rotateZ(5turn);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotateX(2turn) rotateY(3turn) rotateZ(5turn);
            transform: rotateX(2turn) rotateY(3turn) rotateZ(5turn);
  }
}