.christmas-lights li{--christmas-lights-1: #057d70;--christmas-lights-2: #d41a21;--christmas-lights-3: #ffd27c;position:relative;display:inline-block;width:20px;height:20px;margin:25px 20px;border-radius:50%;-webkit-animation-name:flash-1;animation-name:flash-1;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-fill-mode:both;animation-fill-mode:both}.christmas-lights{position:fixed;top:-15px;right:0;left:0;z-index:8000;width:100%;margin:0;white-space:nowrap;pointer-events:none}.christmas-lights[data-position=bottom]{top:auto;bottom:-15px;-webkit-transform:scale(-1);-ms-transform:scale(-1);transform:scale(-1)}.christmas-lights[data-position=right],.christmas-lights[data-position=left]{inset:0 auto 0 -10px;width:100vh;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.christmas-lights[data-position=right]{right:-15px;left:auto;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.christmas-lights li::before{position:absolute;top:-9px;left:5px;width:10px;height:10px;content:"";background:#505050;border-top-left-radius:5px;border-top-right-radius:5px}.christmas-lights li::after{position:absolute;top:-23px;left:10px;width:60px;height:20px;content:"";border-bottom:solid #505050 2px;border-radius:50%}.christmas-lights li:last-child::after{content:none}.christmas-lights li:first-child{margin-left:-40px}.christmas-lights li:nth-child(2n+1){background:var(--christmas-lights-1);-webkit-box-shadow:0 5px 24px 3px #f9d481;box-shadow:0 5px 24px 3px #f9d481;-webkit-animation-name:flash-2;animation-name:flash-2;-webkit-animation-duration:.4s;animation-duration:.4s}.christmas-lights li:nth-child(4n+2){background:var(--christmas-lights-2);-webkit-box-shadow:0 5px 24px 3px var(--christmas-lights-2);box-shadow:0 5px 24px 3px var(--christmas-lights-2);-webkit-animation-name:flash-3;animation-name:flash-3;-webkit-animation-duration:1.1s;animation-duration:1.1s}.christmas-lights li:nth-child(odd){-webkit-animation-duration:1.8s;animation-duration:1.8s}.christmas-lights li:nth-child(3n+1){-webkit-animation-duration:1.4s;animation-duration:1.4s}@-webkit-keyframes flash-1{0%,100%{background:var(--christmas-lights-1);-webkit-box-shadow:0 5px 24px 3px var(--christmas-lights-1);box-shadow:0 5px 24px 3px var(--christmas-lights-1)}50%{background:var(--christmas-lights-2);-webkit-box-shadow:0 5px 24px 3px var(--christmas-lights-2);box-shadow:0 5px 24px 3px var(--christmas-lights-2)}}@keyframes flash-1{0%,100%{background:var(--christmas-lights-1);-webkit-box-shadow:0 5px 24px 3px var(--christmas-lights-1);box-shadow:0 5px 24px 3px var(--christmas-lights-1)}50%{background:var(--christmas-lights-2);-webkit-box-shadow:0 5px 24px 3px var(--christmas-lights-2);box-shadow:0 5px 24px 3px var(--christmas-lights-2)}}@-webkit-keyframes flash-2{0%,100%{background:var(--christmas-lights-2);-webkit-box-shadow:0 5px 24px 3px var(--christmas-lights-2);box-shadow:0 5px 24px 3px var(--christmas-lights-2)}50%{background:var(--christmas-lights-3);-webkit-box-shadow:0 5px 24px 3px var(--christmas-lights-3);box-shadow:0 5px 24px 3px var(--christmas-lights-3)}}@keyframes flash-2{0%,100%{background:var(--christmas-lights-2);-webkit-box-shadow:0 5px 24px 3px var(--christmas-lights-2);box-shadow:0 5px 24px 3px var(--christmas-lights-2)}50%{background:var(--christmas-lights-3);-webkit-box-shadow:0 5px 24px 3px var(--christmas-lights-3);box-shadow:0 5px 24px 3px var(--christmas-lights-3)}}@-webkit-keyframes flash-3{0%,100%{background:var(--christmas-lights-3);-webkit-box-shadow:0 5px 24px 3px var(--christmas-lights-3);box-shadow:0 5px 24px 3px var(--christmas-lights-3)}50%{background:var(--christmas-lights-1);-webkit-box-shadow:0 5px 24px 3px var(--christmas-lights-1);box-shadow:0 5px 24px 3px var(--christmas-lights-1)}}@keyframes flash-3{0%,100%{background:var(--christmas-lights-3);-webkit-box-shadow:0 5px 24px 3px var(--christmas-lights-3);box-shadow:0 5px 24px 3px var(--christmas-lights-3)}50%{background:var(--christmas-lights-1);-webkit-box-shadow:0 5px 24px 3px var(--christmas-lights-1);box-shadow:0 5px 24px 3px var(--christmas-lights-1)}}@media(width <= 1024px){.christmas-lights[data-position=left]{left:-14px}.christmas-lights[data-position=right]{right:-14px}.christmas-lights[data-position=left],.christmas-lights[data-position=right]{height:100vh}}