:root {
    --MNMLUI-ACCENT: #ff0080;
}

* {
    margin: 0;
    border: 0;
    padding: 0;
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
    color: #000000;
    scrollbar-width: none;
}

body {
    background-color: #F2F2F2;
    padding-top: env(safe-area-inset-top);
}

.glassy {
    --glassy-glow-color: rgba(255, 255, 255, 0.25);
    --glassy-highlight-color: rgba(255, 255, 255, 0.5);

    --glassy-glow-top: inset 0px -2px 0.5px -1px var(--glassy-glow-color);
    --glassy-glow-bottom: inset 0px 2px 0.5px -1px var(--glassy-glow-color);
    --glassy-highlight-top: inset 0px -1px 0px -0.75px var(--glassy-highlight-color);
    --glassy-highlight-bottom: inset 0px 1px 0px -0.75px var(--glassy-highlight-color);


    background-color: rgba(255, 255, 255, 0.5);
    box-shadow:
        0 0 64px 0 rgba(0, 0, 0, 0.10),
        var(--glassy-glow-top),
        var(--glassy-glow-bottom),
        var(--glassy-highlight-top),
        var(--glassy-highlight-bottom);
    backdrop-filter: blur(2px);
    border-radius: 32px;
    transition: background-color 0.25s ease-in-out, transform 0.25s cubic-bezier(0.25, 1.00, 0.25, 1.50);
    will-change: transform;
}

.glassy::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;

    background:
        repeating-radial-gradient(#000 0 0.0001%, #fff 0 0.0002%) 60% 60%/3000px 3000px,
        repeating-conic-gradient(#000 0 0.0001%, #fff 0 0.0002%) 40% 40%/3000px 3000px;
    background-blend-mode: difference;

    opacity: 0.025;
}

.glassy:active {
    background-color: rgba(255, 255, 255, 0.75);
    transform: scale(1.1);
}

.glassy.sc-m:active {
    transform: scale(1.05);
}

.glassy.sc-l:active {
    transform: scale(1.01);
}

.tinted {
    background-color: color-mix(in srgb, var(--MNMLUI-ACCENT) 50%, transparent 50%);
}

.tinted:active {
    background-color: color-mix(in srgb, var(--MNMLUI-ACCENT) 75%, transparent 25%);
}

.clearer {
    background-color: rgba(255, 255, 255, 0.25);
}

.clearer:active {
    background-color: rgba(255, 255, 255, 0.5);
}

.clear {
    background-color: rgba(255, 255, 255, 0.0);
}

.clear:active {
    background-color: rgba(255, 255, 255, 0.25);
}





body.permDark {
    background-color: #000000;
}

.glassy.permDark {
    --glassy-glow-color: rgba(128, 128, 128, 0.25);

    background-color: rgba(64, 64, 64, 0.5);
}

.glassy.permDark:active {
    background-color: rgba(64, 64, 64, 0.75);
}

.clearer.permDark {
    background-color: rgba(64, 64, 64, 0.25);
}

.clearer.permDark:active {
    background-color: rgba(64, 64, 64, 0.5);
}

.clear.permDark {
    background-color: rgba(64, 64, 64, 0.00);
}

.clear.permDark:active {
    background-color: rgba(64, 64, 64, 0.25);
}

@media (prefers-color-scheme: dark) {
    * {
        color: #ffffff;
    }

    body {
        background-color: #000000;
    }

    .glassy {
        --glassy-glow-color: rgba(128, 128, 128, 0.25);

        background-color: rgba(64, 64, 64, 0.5);
    }

    .glassy:active {
        background-color: rgba(64, 64, 64, 0.75);
    }

    .tinted {
        background-color: color-mix(in srgb, var(--MNMLUI-ACCENT) 50%, transparent 50%);
    }

    .tinted:active {
        background-color: color-mix(in srgb, var(--MNMLUI-ACCENT) 75%, transparent 25%);
    }

    .clearer {
        background-color: rgba(64, 64, 64, 0.25);
    }

    .clearer:active {
        background-color: rgba(64, 64, 64, 0.5);
    }

    .clear {
        background-color: rgba(64, 64, 64, 0.00);
    }

    .clear:active {
        background-color: rgba(64, 64, 64, 0.25);
    }





    body.permLight {
        background-color: #F2F2F2;
    }

    .glassy.permLight {
        --glassy-glow-color: rgba(255, 255, 255, 0.25);

        background-color: rgba(255, 255, 255, 0.5);
    }

    .glassy.permLight:active {
        background-color: rgba(255, 255, 255, 0.75);
    }

    .clearer.permLight {
        background-color: rgba(255, 255, 255, 0.25);
    }

    .clearer.permLight:active {
        background-color: rgba(255, 255, 255, 0.5);
    }

    .clear.permLight {
        background-color: rgba(255, 255, 255, 0.0);
    }

    .clear.permLight:active {
        background-color: rgba(255, 255, 255, 0.25);
    }
}

.removed {
    display: none !important;
}

.transparent {
    opacity: 0 !important;
    pointer-events: none !important;
}