*{margin:0;padding:0;box-sizing:border-box;font-weight:300}html{overscroll-behavior:none;scroll-behavior:smooth}body{--secondary-bg: #00ed4f;--secondary: #00ed4f;--primary: #9969ff;--dark-grey: #4a4a49;--light-grey: #ebedee;--black-grey: #262626;--padding-vertical: 8rem;width:100vw;overflow-x:hidden}canvas{display:block;position:fixed;z-index:-500}@font-face{src:url(/fonts/IBM_Plex_Mono/IBMPlexMono-Light.ttf);font-family:IBM Plex Mono;font-weight:100}@font-face{src:url(/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf);font-family:IBM Plex Mono;font-weight:300}@font-face{src:url(/fonts/IBM_Plex_Sans/IBMPlexSans-Light.ttf);font-family:IBM Plex Sans;font-weight:200}@font-face{src:url(/fonts/IBM_Plex_Sans/IBMPlexSans-Regular.ttf);font-family:IBM Plex Sans;font-weight:300}body{width:100vw;background:#9969ff}#params{position:fixed;top:20px;right:20px;background:var(--light-grey);padding:20px 25px;border-radius:8px;width:400px;display:flex;flex-direction:column;gap:25px}.param{display:flex;align-items:center;justify-content:space-between;font-family:IBM Plex Mono,monospace;font-size:.8rem;text-transform:uppercase;font-weight:100;letter-spacing:1.5px;color:var(--dark-grey);height:20px}label{margin-right:1rem}.swatch{width:16px;height:16px;border-radius:30px;border:solid 1px hsl(0,0%,75%);cursor:pointer}.selected,input[type=color].selected{position:relative;outline:solid 2px hsl(0,0%,75%)}input[type=color]{-webkit-appearance:none;border:solid 1px hsl(0,0%,75%);width:16px;height:16px;border-radius:50%;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{display:none}div#params .param input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:1px;outline:none;cursor:pointer;background:var(--dark-grey);width:160px}div#params .param input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;background:var(--dark-grey);border-radius:30px;outline:none}div.switch{text-align:center;width:50%;font-size:.7rem;padding:3px 10px;border-style:solid;border-color:#bfbfbf;border-width:1px;border-radius:30px;color:#bfbfbf;cursor:pointer}div.switch:hover{border-color:#8c8c8c;color:#8c8c8c}div.switch.on{border-color:var(--dark-grey);color:var(--dark-grey)}