:root {
    /* MAIN-COLORS */
    --color-bg: #0d1117;
    --color-text: #e6edf3;

    /* PARAGRAPH */
    --color-text-muted: #8b949e;
    --color-text-faint: #484f58;

    /* DOT COLORS */
    --green-dim: #1a4a1a;
    --green-lit: #22dd44;
    --green-glow: rgba(34, 221, 68, 0.6);
    --green-btn-hover: #79ff82;

    --red-dim: #4a1a1a;
    --red-lit: #ff3333;
    --red-glow: rgba(255, 51, 51, 0.6);

    --yellow-dim: #4a3d00;
    --yellow-lit: #ffdd00;
    --yellow-glow: rgba(255, 221, 0, 0.6);

    --blue-dim: #0a1a4a;
    --blue-lit: #3388ff;
    --blue-glow: rgba(51, 136, 255, 0.6);
    --blue-btn-hover: #79c0ff;

    --color-surface: #161b22;
    --color-surface-2: #1c2128;
    --color-border: rgba(255, 255, 255, 0.08);

    --transition-game: 120ms ease-out;
    --transition: 220ms cubic-bezier(0.16, 1, 0.3, 1);

    /* TOGGLE COLORS */
    --color-success: #3fb950;
    --color-success-glow: rgba(63, 185, 80, 0.35);


    /* MAIN-FONT */
    --font-game: 'Orbitron', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* SPACES */
    --letter-space: 0.2rem;

    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* RADIUS */
    --radius-full: 9999px;
    --radius-lg: 1rem;

    /* BUTTON ROUNDINGS SIMON BOARD */
    --r-outer: 48%;
    --r-inner: 8%;

    /* SHADOW SIMON BUTTONS */
    --shadow-btn: inset 0 4px 20px rgba(0, 0, 0, 0.4);

}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text);
    padding: var(--space-6);
}

.game-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
}