*,*:after,*:before {  box-sizing: border-box;}:root {  --bg: #04050d;  --glow: rgba(246,213,143,0.5);  --sparkler-top: #4f4139;  --sparkler-bottom: #333;  --spark: #fff;}body {  min-height: 100vh;  background: var(--bg);  cursor: none;  display: flex;  align-items: center;  justify-content: center;  touch-action: none;  overflow: hidden;}span {  position: absolute;  border: 2px solid #008000;  border-radius: 100%;  opacity: 0.1;  width: calc((100 / 3) * 1vw);  height: 50vh;  z-index: 3;}span:nth-of-type(1) {  top: 0;  left: 0;}span:nth-of-type(1):hover ~ .sparkler {  --glow: rgba(134,226,213,0.5);}span:nth-of-type(1):hover ~ .sparkler .sparkler__spark {  box-shadow: 0 0 20px 4px var(--shadow-2);}span:nth-of-type(2) {  bottom: 0;  right: 0;}span:nth-of-type(2):hover ~ .sparkler {  --glow: rgba(213,184,255,0.5);}span:nth-of-type(2):hover ~ .sparkler .sparkler__spark {  box-shadow: 0 0 20px 4px var(--shadow-3);}span:nth-of-type(3) {  bottom: 0;  left: 0;}span:nth-of-type(3):hover ~ .sparkler {  --glow: rgba(236,100,75,0.5);}span:nth-of-type(3):hover ~ .sparkler .sparkler__spark {  box-shadow: 0 0 20px 4px var(--shadow-4);}span:nth-of-type(4) {  top: 0;  right: 0;}span:nth-of-type(4):hover ~ .sparkler {  --glow: rgba(82,179,217,0.5);}span:nth-of-type(4):hover ~ .sparkler .sparkler__spark {  box-shadow: 0 0 20px 4px var(--shadow-5);}span:nth-of-type(5),span:nth-of-type(6) {  left: 0;  right: 0;  height: 25vh;  width: 100vw;}span:nth-of-type(5):hover ~ .sparkler .sparkler__spark,span:nth-of-type(6):hover ~ .sparkler .sparkler__spark {  box-shadow: 0 0 20px 4px var(--shadow-6);}span:nth-of-type(5) {  top: 0;}span:nth-of-type(6) {  bottom: 0;}.sparkler {  position: absolute;  border-radius: 100%;  left: calc(var(--x) * 1px);  top: calc(var(--y) * 1px);  box-shadow: 0 0 25px 25px var(--glow);}.sparkler:after,.sparkler:before {  content: '';  height: 100px;  width: 5px;  background: var(--sparkler-top);  position: absolute;  top: 100%;  left: 50%;  border-radius: 2px;  -webkit-transform: translate(-50%, 0) rotate(-40deg);          transform: translate(-50%, 0) rotate(-40deg);  -webkit-transform-origin: top center;          transform-origin: top center;}.sparkler:before {  height: 160px;  width: 2px;  background: var(--sparkler-bottom);}.sparkler__spark {  height: 5px;  position: absolute;  width: 5px;  box-shadow: 0 0 20px 4px var(--shadow);  background: var(--spark);  border-radius: 100%;  -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 0);          transform: rotate(calc(var(--rotation) * 1deg)) translate(0, 0);  -webkit-animation: spark calc(var(--speed) * 1s) calc(var(--delay) * -1s) infinite ease;          animation: spark calc(var(--speed) * 1s) calc(var(--delay) * -1s) infinite ease;  z-index: 2;}@-webkit-keyframes spark {  to {    opacity: 0;    -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--travel) * 1px));            transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--travel) * 1px));  }}@keyframes spark {  to {    opacity: 0;    -webkit-transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--travel) * 1px));            transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--travel) * 1px));  }}