apeiro

1
html, body{margin: 0;min-height: 100vh;background-color: black;overflow-x: hidden}*, body{scrollbar-width: thin;scrollbar-color: #FCFCFC rgba(0, 0, 0, 0)}*::-webkit-scrollbar{width: 15px}*::-webkit-scrollbar-track{background: rgba(0, 0, 0, 0)}*::-webkit-scrollbar-thumb{background-color: #FCFCFC;border-radius: 20px;border: 3px solid rgba(0, 0, 0, 0)}canvas{width: 100%;height: 100vh;object-fit: contain}.stop{overflow: hidden;touch-action: none}.body{opacity: 0}.hyper{position: fixed;width: 100vw;height: 100vh;top: 0;left: 0;z-index: 5}.preloader{z-index: 6;position: fixed;filter: drop-shadow(0 0 20px #E5E7E7);transform: translate(-50%, -50%);top: 50%;left: 50%;text-align: center}.preloader > h1{color: white;font-family: sans-serif}.ip{width: 16em;height: 8em;animation: moveApeiro 5s infinite}.ip__track{stroke: hsl(var(--hue),90%,15%);transition: stroke 1.2s}.ip__worm1, .ip__worm2{animation: worm1 1.2s linear infinite}.ip__worm2{animation-name: worm2}@keyframes worm1{from{stroke-dashoffset: 0}50%{animation-timing-function: steps(1);stroke-dashoffset: -358}50.01%{animation-timing-function: linear;stroke-dashoffset: 358}to{stroke-dashoffset: 0}}@keyframes worm2{from{stroke-dashoffset: 358}50%{stroke-dashoffset: 0}to{stroke-dashoffset: -358}}@keyframes moveSide1{0%{transform: translate(-150px, -5%)}50%{transform: translate(-155px, -5%)}100%{transform: translate(-150px, -5%)}}@keyframes moveSide2{0%{transform: translate(200px, -150%)}50%{transform: translate(205px, -150%)}100%{transform: translate(200px, -150%)}}