:root {
    --bg: #0b0e13;
    --surface: #13161c;
    --surface-2: #1a1e27;
    --border: #272c38;
    --text: #f7f8fb;
    --muted: #a4a9b6;
    --subtle: #727987;
    --primary: #6c5ce7;
    --primary-dark: #5645cb;
    --accent: #4a9fb5;
    --success: #4caf7e;
    --danger: #e15567;
    --discord: #5865f2;
    --text-gray: var(--muted);
    --success-green: var(--success);
    --radius: 1rem;
    --shadow: 0 18px 50px rgba(0, 0, 0, .3);
    --container: 87.5rem;
    --gutter: 1.5rem;
    font-family: Poppins, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color-scheme: dark;
}

*, *::before, *::after { 
    box-sizing: border-box; 
}

html { 
    scroll-behavior: smooth; 
}

body { 
    min-width: 20rem; 
    min-height: 100vh; 
    margin: 0; 
    background: var(--bg); 
    color: var(--text); 
    line-height: 1.6; 
}

body, button, input, textarea, select { 
    font: inherit; 
}

h1, h2, h3, h4, p { 
    margin-top: 0; 
}

a { 
    color: inherit; 
}

img { 
    display: block; 
    max-width: 100%; 
}

button { 
    color: inherit; 
}
:focus-visible { 
    outline: 3px solid var(--accent); 
    outline-offset: 3px; 
}
::selection { 
    background: var(--primary); 
    color: #fff; 
}

.container { 
    width: min(
            calc(100% - 2 * var(--gutter)), 
            var(--container)
        ); 
    margin-inline: auto; 
}

.is-hidden { 
    display: none !important; 
}

.sr-only { 
    position: absolute; 
    width: 1px; 
    height: 1px; 
    padding: 0; 
    overflow: hidden; 
    clip: rect(0, 0, 0, 0); 
    white-space: nowrap; 
    border: 0; 
}

@media (max-width: 680px) {
    :root { 
        --gutter: 1rem; 
    }
}