/* --- global variables --- */
:root {
    /* colors, used for light/dark mode switching */
    --bg-color: white;
    --text-color: black;
    --border-color: black;
    --box-bg: white;
    --accent-color: hsl(205, 82%, 56%);

    /* spacing */
    --spacing-xs: 6px;
    --spacing-sm: 12px;
    --spacing-md: 18px;
    --spacing-lg: 24px;
    --spacing-xl: 48px;
    --spacing-2xl: 128px;

    /* transitions */
    --transition-fast: 0.2s ease-out;
    --transition-normal: 0.3s ease-out;

    /* effects */
    --shadow-offset: 4px;
    --shadow-offset-sm: 2px;
    --border-width: 2px;
    --border-width-thick: 8px;
}

html.dark-mode {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --border-color: #e0e0e0;
    --box-bg: #1e1e1e;
    --accent-color: hsl(205, 82%, 65%);
}

html.dark-mode img[src*="github"] {
    filter: invert(1);
}

/* --- overall page setup --- */
html {
    scroll-behavior: smooth;
    background-color: var(--bg-color);

    background-size: 20px 20px;
    background-image:
        linear-gradient(
            to right,
            rgba(128, 128, 128, 0.2) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            rgba(128, 128, 128, 0.2) 1px,
            transparent 1px
        );

    transition: background-color var(--transition-normal);
}

body {
    margin: var(--spacing-lg);
    font-family: "Courier New", Courier, monospace;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--spacing-xl));
}

main {
    flex: 1;
}

.mobile-only {
    display: none;
}