/* Circularity CSS */

    /* Fonts */
    @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
   
    /* Variables */
    :root {
        /* Fonts */
        --default-font: "Nunito Sans", sans-serif;
        
        /* Z-Index */
        --z-above: 15;

        /* Backgrounds */
        --backdrop-background: #25252570;

        /* Effects */
        --backdrop-blur: blur(16px) saturate(125%);

        /* Transitions */
        --default-transition: all 800ms ease-out;
    }

 /* Content */
body {
    font-family: var(--default-font);
    margin: 0;
    transition: background 800ms ease-out;
    -webkit-transition: background 800ms ease-out;
}

    /* Navigation */
    nav {
        position: fixed;
        display: flex;

        left: 0;
        top: 24px;

        width: calc(100vw);
        scroll-behavior: smooth;

        justify-content: center;
        align-items: center;
        flex-direction: row;
        padding: 8px 32px;
        /* padding-left: 32px; */

        overflow-x: scroll;

        gap: 16px;

        transform: scale(115%);
        -webkit-transform: scale(115%);
        filter: blur(8px);
        -webkit-filter: blur(8px);
        opacity: 0;

        z-index: 50;

        transition: var(--default-transition);
        -webkit-transition: var(--default-transition);
    }

        /* Scroll Bar */
        ::-webkit-scrollbar {
            width: 10px;
            border-radius: 2px;
            height: 6px;
            background-color: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background-color: transparent;
            border: 1px solid transparent;

            width: 10px;
            margin-left: 32px;
            height: 100%;
            border-radius: 4px;

            transition: all 250ms ease-out;
            -webkit-transition: all 250ms ease-out;
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: transparent;
            transform: scale(125%);
            -webkit-transform: scale(125%);
        }


        /* Nav assets */
        nav div, nav button {
            background-color: var(--backdrop-background);
            padding: 8px 16px;

            color: #fff;
            font-weight: 800;
            font-size: 1.8rem;
            border-radius: 32px;

            border: 1px solid #25252520;
            
            backdrop-filter:  blur(16px) saturate(125%);
            -webkit-backdrop-filter:  blur(16px) saturate(125%);

            height: 48px;
            text-wrap: nowrap;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        nav button {
            background-color: #00000080;
            transition: var(--default-transition);
            -webkit-transition: var(--default-transition);
        }

            nav button:hover {
                transform: scale(105%);
                -webkit-transform: scale(105%);
                background-color: #000000;
                cursor: pointer;
            }

            nav button img {
                width: 24px;
                height: 24px;
                margin-right: 8px;
                margin-bottom: 2px;
            }

            nav .branding {
                height: 20px;
                object-fit: contain;
            }

            nav button.enabled {
                background-color: #000;
                transform: scale(95%);
                -webkit-transform: scale(95%);
            }

    /* Cursor */
    #cursor-boundry {
        display: block;
        position: fixed;
        width: 250px;
        height: 250px;

        left: 0;
        right: 0;
        margin: 0;
        padding: 0;

        border-radius: 100%;
        background-color: transparent;
        /* border: 0px solid #25252580; */

        box-shadow: 0 0 16px #00000020;
        z-index: 4;

        transform: translate(8px, 8px);
        opacity: 0;

        transition: var(--default-transition);
        -webkit-transition: var(--default-transition);
    
        transition-property: opacity;
        -webkit-transition-property: opacity;
    }

    #cursor-boundry.enabled {
        opacity: 1;
    }

    /* Containers */
        canvas {
            width: 100vw;
            max-width: 100vw;
            height: 100vh;
            max-height: 100vh;
            position: absolute;
            left: 0;
            top: 0;
            overflow: hidden;

            transform: scale(105%);
            -webkit-transform: scale(105%);
            filter: blur(32px);
            -webkit-filter: blur(32px);

            transition: var(--default-transition);
            -webkit-transition: var(--default-transition);
        }

        /* Loading */
        div.loading .branding {
            position: fixed;

            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) translateY(24px) rotateX(50deg) scale(98%);
            -webkit-transform: translate(-50%, -50%) translateY(24px) rotateX(50deg) scale(98%);

            filter: invert();
            -webkit-filter: invert();
            opacity: 0;

            z-index: 100;
            animation: 3s ease-out 0s 1 brandload;
        }

            @keyframes brandload {
                0% {
                    transform: translate(-50%, -50%) translateY(24px) rotateX(50deg) scale(98%);
                    -webkit-transform: translate(-50%, -50%) translateY(24px) rotateX(50deg) scale(98%);
                    filter: invert(0);
                }
                25% {
                    transform: translate(-50%, -50%) translateY(0) scale(102%);
                    -webkit-transform: translate(-50%, -50%) translateY(0) scale(102%);
                    opacity: 1;
                }
                90% {
                    transform: translate(-50%, -50%) translateY(0) scale(100%);
                    -webkit-transform: translate(-50%, -50%) translateY(0) scale(100%);
                    filter: invert(1);
                    opacity: 1;
                }
                100% {
                    transform: translate(-50%, -50) scale(100%, 80%);
                    -webkit-transform: translate(-50%, -50%) scale(100%, 80%);
                    filter: invert(1);
                    opacity: 0;
                }
            }

        div.loading h6 {
            color: #fff;
            font-weight: 800;

            position: fixed;
            left: 50%;
            top: 50%;

            transform: translate(-50%, -50%) translateY(32px) scale(90%);
            -webkit-transform: translate(-50%, -50%) translateY(32px) scale(90%);
            opacity: 0;

            transition: var(--default-transition);
            -webkit-transition: var(--default-transition);

            animation: 3s ease-out 0s 1 authorload;
        }

        @keyframes authorload {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) translateY(32px) scale(90%);
                -webkit-transform: translate(-50%, -50%) translateY(32px) scale(90%);
                color: #fff;
            }
            10% {
                opacity: 0;
                transform: translate(-50%, -50%) translateY(32px) scale(90%);
                -webkit-transform: translate(-50%, -50%) translateY(32px) scale(90%);
            }

            25% {
                opacity: 1;
                transform: translate(-50%, -50%) translateY(24px) scale(100%);
                -webkit-transform: translate(-50%, -50%) translateY(24px) scale(100%);
                color: #000;
                letter-spacing: normal;
            }
            90% {
                opacity: 1;
                transform: translate(-50%, -50%) translateY(24px) scale(100%);
                -webkit-transform: translate(-50%, -50%) translateY(24px) scale(100%);
                letter-spacing: .2px; 
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) translateY(16px) scale(80%);
                -webkit-transform: translate(-50%, -50%) translateY(16px) scale(80%);
                letter-spacing: 2px; 
                color: #000;
            }
        }

        



        body.loaded canvas {
            filter: blur(0);
            -webkit-filter: blur(0);
            transform: scale(100%);
            -webkit-transform: scale(100%);
        }

        nav.loaded {
            filter: blur(0);
            -webkit-filter: blur(0);
            transform: scale(100%);
            -webkit-transform: scale(100%);
            opacity: 1;
        }

        /* Debug */
        #edge-left, #edge-right {
            width: 16px;
            height: 16px;
            background: red;
            border-radius: 100%;
            position: fixed;

            display: none;
        }

        /* Night Mode */
        body.night {
            background-color: #000;
        }

        body.night nav div, body.night nav button {
            background-color: #ffffff25;
        }

        body.night nav button {
            background-color: #ffffff80;
            color: #000;
        }

        body.night nav button.enabled {
            background-color: #ffffff;
            transform: scale(95%);
            -webkit-transform: scale(95%);
        }

        body.night nav button img {
            filter: invert();
            -webkit-filter: invert();
        }

        body.night #cursor-boundry {
            box-shadow: 0 0 16px #ffffff20;
        }

        
a, a:hover, nav a {
    text-decoration: none;
}