html,body{margin:0;padding:0}body{height:100vh;width:100vw}*{margin:0;padding:0;box-sizing:border-box}canvas{position:absolute;z-index:2}.gradient-background{position:absolute;height:100%;width:100%;background:linear-gradient(290deg,#1b2100,#002115,#001321,#0e0021,#21001e,#211200,#172100);background-size:420% 420%;animation:gradient-animation 70s ease infinite}@keyframes gradient-animation{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.rounder{--s: 100%;--b: 1.5px;--n: 15;--c: #ffffff;width:var(--s);height:var(--s);aspect-ratio:1.2;object-fit:cover;--_p:calc(var(--b)*var(--n));--_d:calc(var(--s)/(4*var(--n)) + var(--b));padding:var(--_p);border-radius:calc(var(--_p) + var(--b)/4);border-image:repeating-radial-gradient(var(--c) 0,#0000 2px calc(var(--_d)/2 - 2px),var(--c) calc(var(--_d)/2) var(--_d)) 49.8%/var(--_p);clip-path:inset(0 round var(--_p))}
