@font-face{font-family:Times New Roman}a,span{font-family:JackInput;font-weight:500;color:#fff;text-shadow:1px 1px #000}a:hover{color:#fff}#audio-container{position:fixed;top:60%;margin-left:16px;z-index:3}#play-container{display:flex;flex-direction:column;align-items:flex-start}#play-button{text-decoration:underline;cursor:pointer;font-size:60px;mix-blend-mode:difference}#visualizers{position:absolute;height:100vh;width:100vw;z-index:1;background-color:#000}#animated-background,#animated-background-2{position:absolute;height:100%;width:100%}body{height:100vh;width:100vw;margin:0}h1{font-size:3.2em;line-height:1.1}#footer{position:fixed;bottom:16px;right:16px;z-index:3}.footer-link{padding:0 12px;font-size:24px}.track-info{margin:6px}#test{position:absolute;width:100vw;height:100vh;background-color:#fff;z-index:10000;mix-blend-mode:difference}#test2{position:absolute;background-color:#fff;mix-blend-mode:color-burn}#test3{position:absolute;background-color:#fff;mix-blend-mode:difference}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#trippy-frame{position:absolute;height:100%;width:100%}.display-frame,.video-frame,.display-frame-container{position:absolute;width:100%;height:100%;left:0;top:0;object-fit:cover}.display-frame-container{opacity:0;transition:opacity 1.2s}.display-frame-container.visible{opacity:1}#help-button{position:fixed;font-size:36px;right:36px;top:12px;color:#fff;z-index:2;cursor:pointer}h3{font-family:sans-serif}#help{padding:16px;border-radius:12px;position:fixed;max-height:70vh;width:70vw;left:15vw;top:15vh;z-index:5;overflow:auto;color:#fff;background-color:#212121cc}#help .question{font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none}#help p:last-of-type{margin-bottom:36px}#volume{background:transparent}#volume{position:relative;margin:24px 12px;width:160px;z-index:3;outline:none;opacity:.7}#volume::-webkit-slider-runnable-track{background-color:#000}input[type=range]{width:100%;margin:11.95px 0;background-color:transparent;-webkit-appearance:none}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{background:rgba(255,255,255,.7);border:.2px solid #010101;width:100%;height:13.1px;cursor:pointer}input[type=range]::-webkit-slider-thumb{margin-top:-12.15px;width:9px;height:37px;background:#ffffff;border:1px solid #000000;border-radius:1px;cursor:pointer;-webkit-appearance:none}input[type=range]:focus::-webkit-slider-runnable-track{background:#ffffff}input[type=range]::-moz-range-track{background:rgba(255,255,255,.7);border:.2px solid #010101;width:100%;height:13.1px;cursor:pointer}input[type=range]::-moz-range-thumb{width:9px;height:37px;background:#ffffff;border:1px solid #000000;border-radius:1px;cursor:pointer}input[type=range]::-ms-track{background:transparent;border-color:transparent;border-width:11.95px 0;color:transparent;width:100%;height:13.1px;cursor:pointer}input[type=range]::-ms-fill-lower{background:#dedede;border:.2px solid #010101}input[type=range]::-ms-fill-upper{background:rgba(255,255,255,.7);border:.2px solid #010101}input[type=range]::-ms-thumb{width:9px;height:37px;background:#ffffff;border:1px solid #000000;border-radius:1px;cursor:pointer;margin-top:0}input[type=range]:focus::-ms-fill-lower{background:rgba(255,255,255,.7)}input[type=range]:focus::-ms-fill-upper{background:#ffffff}@supports (-ms-ime-align: auto){input[type=range]{margin:0}}.volume-icon{color:#fff;height:42px;width:42px}#volume-container{display:flex;flex-direction:row;align-items:center;justify-content:center;position:fixed;bottom:0;left:16px}#volume-label{font-size:24px;cursor:pointer;-webkit-user-select:none;user-select:none}#volume-label.muted{text-decoration:line-through}#trippy-container{position:absolute;width:100vw;height:100vh;z-index:4;mix-blend-mode:difference;overflow:hidden;pointer-events:auto;opacity:0;animation:trippy-pulse 90s ease-in-out 5s infinite;transition:opacity 1s}.trippy-box{background-color:#fff;position:absolute;mix-blend-mode:difference}.animate-trippy-box{animation:path-trippy 12s linear none infinite alternate-reverse,trippy-shape 72s ease-in-out none infinite normal;overflow:hidden}.animate-trippy-box:nth-of-type(2){animation-delay:3s,3s,5s}.animate-trippy-box:nth-of-type(3){animation-delay:6s,6s,10s}.animate-trippy-box:nth-of-type(4){animation-delay:9s,9s,15s}@keyframes path-trippy{0%{top:50vh;left:50vw;height:0vh;width:0vw}80%{left:0;top:0;height:100vh;width:100vw}to{left:-10vw;top:-10vh;height:130vh;width:130vw}}@keyframes trippy-shape{0%{border-radius:0}49%{border-radius:0}50%{border-radius:100%}83%{border-radius:100%}84%{border-radius:0}to{border-radius:0}}@keyframes trippy-color-pulse{0%{background-color:#fff}25%{background-color:#fff}37.5%{background-color:red}50%{background-color:#0f0}62.5%{background-color:#00f}75%{background-color:#fff}to{background-color:#fff}}@keyframes trippy-pulse{0%{opacity:0}8%{opacity:0}10%{opacity:1}73%{opacity:1}75%{opacity:0}98%{opacity:0}to{opacity:0}}#triangles-container{position:absolute;width:100vw;height:100vh;z-index:4;isolation:isolate;mix-blend-mode:difference;overflow:hidden;pointer-events:auto;animation:triangle-pulse 100s ease-in-out none infinite}.trippy-triangle{background-color:red;position:absolute;height:216.506350945px;top:calc(50vh - 135.3164693406px);width:250px;left:calc(50vw - 125px);mix-blend-mode:lighten;clip-path:polygon(0% 100%,50% 0%,100% 100%);transform-origin:50% 66%;border:0;margin:0;padding:0;box-sizing:border-box;overflow:hidden}.trippy-triangle:nth-of-type(2){background-color:#0f0}.trippy-triangle:nth-of-type(3){background-color:#00f}.animate-triangle{animation:triangle-rotate 45s linear 10s infinite normal;overflow:hidden}.animate-triangle:nth-of-type(2){animation-delay:5s;animation-duration:30s}.animate-triangle:nth-of-type(3){animation-delay:0s;animation-duration:15s}@keyframes triangle-rotate{0%{transform:rotate(0) translateZ(0) skewY(.001deg)}to{transform:rotate(360deg) translateZ(0) skewY(.001deg)}}@keyframes triangle-pulse{0%{opacity:0}30%{opacity:0}35%{opacity:1}75%{opacity:1}80%{opacity:0}to{opacity:0}}@keyframes triangle-color-pulse{0%{background-color:#fff}25%{background-color:#fff}37.5%{background-color:red}50%{background-color:#0f0}62.5%{background-color:#00f}75%{background-color:#fff}to{background-color:#fff}}#triangle-2-container{position:absolute;width:100vw;height:100vh;z-index:4;isolation:isolate;mix-blend-mode:difference;overflow:hidden;pointer-events:auto}.trippy-triangle-2{background-color:red;position:absolute;height:250px;width:250px;top:0;left:0;mix-blend-mode:lighten;border:0;margin:0;padding:0;box-sizing:border-box;overflow:hidden}.trippy-triangle-2:nth-of-type(2){background-color:#0f0}.trippy-triangle-2:nth-of-type(3){background-color:#00f}.trippy-triangle-2:nth-of-type(2){height:216.506350945px;top:calc(50vh - 135.3164693406px);left:calc(50vw - 125px);clip-path:polygon(0% 100%,50% 0%,100% 100%);transform-origin:50% 66%}.animate-triangle-2{overflow:hidden}.animate-triangle-2:nth-of-type(2){animation-delay:5s;animation-duration:30s}.animate-triangle-2:nth-of-type(3){animation-delay:0s;animation-duration:15s}.animate-triangle-2:nth-of-type(2){animation:triangle-2-rotate 45s linear 10s infinite normal}@keyframes triangle-2-rotate{0%{transform:rotate(0) translateZ(0) skewY(.001deg)}to{transform:rotate(360deg) translateZ(0) skewY(.001deg)}}@keyframes triangle-2-pulse{0%{opacity:0}30%{opacity:0}35%{opacity:1}75%{opacity:1}80%{opacity:0}to{opacity:0}}@keyframes triangle-2-color-pulse{0%{background-color:#fff}25%{background-color:#fff}37.5%{background-color:red}50%{background-color:#0f0}62.5%{background-color:#00f}75%{background-color:#fff}to{background-color:#fff}}#backslash-test{position:absolute;top:10vh;left:10vw;width:80vw;height:80vh;background-color:#000;z-index:10000;mix-blend-mode:color-dodge}.path-backslash{animation-duration:10s;animation-name:path-backslash;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate}@keyframes path-backslash{0%{clip-path:polygon(80% 0,100% 0,84% 24%,57% 57%,34% 89%,24% 100%,0 100%,20% 77%,46% 43%,68% 17%)}20%{clip-path:polygon(86% 12%,74% 28%,60% 49%,42% 69%,24% 96%,4% 95%,24% 59%,35% 39%,49% 24%,63% 7%)}40%{clip-path:polygon(81% 2%,100% 2%,66% 21%,53% 53%,26% 85%,22% 96%,1% 95%,27% 74%,42% 58%,53% 26%)}to{clip-path:polygon(80% 0,100% 0,84% 24%,57% 57%,34% 89%,24% 100%,0 100%,20% 77%,46% 43%,68% 17%)}}