:root {
    --color-one: #180e27;
    --color-one-rgb: 24, 14, 39;
    --color-two: #9cefff;
    --color-two-rgb: 156, 239, 255;
    --color-three: #e0b6ff;
    --color-three-rgb: 224, 182, 255;
    --color-four: #ecdcff;
    --color-four-rgb: 236, 220, 255;
    --color-five: #00daf3;
    --color-five-rgb: 0, 218, 243;
}

/* Custom Styles */
body {
    font-family: "Noto Serif", serif;
    scroll-behavior: smooth;
}

.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

.stage-gradient {
    background: linear-gradient(135deg, var(--color-two) 0%, var(--color-five) 100%);
}

.aura-noise {
    position: relative;
}

.aura-noise::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.03;
    pointer-events: none;
    background-image: url("noise.png");
}

.glass-nav {
    background: rgba(var(--color-one-rgb), 0.6);
    backdrop-filter: blur(20px);
}