@property --blink-opacity{syntax:"<number>";inherits:false;initial-value:1}@keyframes blink-animation{0%,to{opacity:var(--blink-opacity,1)}50%{opacity:0}}:root{--stripe-color:#fff;--bg:var(--stripe-color);--maincolor:var(--bg)}@keyframes smoothBg{0%{background-position:50%,50%}to{background-position:350%,350%}}.wrapper{width:100%;height:auto;position:relative}.rainbow{--stripes:repeating-linear-gradient(100deg, var(--stripe-color) 0%, var(--stripe-color) 7%, transparent 10%, transparent 12%, var(--stripe-color) 16%);--rainbow:repeating-linear-gradient(100deg, #60a5fa 10%, #e879f9 15%, #60a5fa 20%, #5eead4 25%, #60a5fa 30%);background-image:var(--stripes), var(--rainbow);filter:blur(10px)invert();background-position:50%,50%;background-size:300%,200%;place-content:center;place-items:center;width:100%;height:100%;min-height:100vh;display:flex;position:relative;-webkit-mask-image:radial-gradient(at 100% 0,#000 40%,#0000 70%);mask-image:radial-gradient(at 100% 0,#000 40%,#0000 70%)}.rainbow:after{content:"";background-image:var(--stripes), var(--rainbow);mix-blend-mode:difference;background-size:200%,100%;background-attachment:fixed;animation:60s linear infinite smoothBg;position:absolute;inset:0}.rainbow{opacity:.4}:has(:checked){--stripe-color:#000}:has(:checked) .rainbow{filter:blur(10px)opacity(50%)saturate(200%)}:has(:checked) .rainbow:after{filter:blur(10px)opacity(50%)saturate(200%)}.content{flex-flow:column;gap:4.5%;width:100%;height:100%;padding:20px;display:flex;position:absolute;inset:0}@media (max-width:600px){.rainbow{background-image:none;-webkit-mask-image:none;mask-image:none}.rainbow:after{background-image:none}}