html, body {
    overscroll-behavior: none; 
    
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    background-color: #fff;
    position:fixed;
    width: 100%;
    height: 100%;
}

#app {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    touch-action: none;
}

canvas {
    display: block;
    touch-action: none;
}

#loader{
    color:#000;
    font-family: monospace;
    font-size: 1.5em;

    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* gap: 16px; */

    opacity: 1;
    transition: opacity 0.5s ease;
}

#loader.hidden{
    opacity: 0;
    pointer-events: none;
}

.loader-spinner {
    width: 40px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #000;
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
    animation: l1 1.5s infinite cubic-bezier(0.3,1,0,1);
  }
  @keyframes l1 {
    33% {
        border-radius: 0;
        clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
        transform: rotate(90deg);
    }
    66% {
        border-radius: 0;
        clip-path: polygon(50% 0,50% 0,100% 100%,0 100%);
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
  }