/* --- CSS Variables --- */
:root {
    --primary-color: #00d8ff;
    --primary-hover-color: #00b3cc;
    --dark-background: #1a1a1a;
    --light-background: #0d0d0d;
    --card-background: #222;
    --text-color: #fff;
    --subtle-text-color: #ccc;
    --divider-color: rgba(176, 176, 176, 0.5);

    --card-shadow-color: rgba(0, 230, 230, 0.4);
    --card-border-color: #00d8ff;
}

/* --- Reset --- */
/* Consistent box model and no default spacing */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style: none;
}

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

/* Form elements inherit the page font */
input,
button,
textarea,
select {
    font: inherit;
}

/* Only show focus outlines for keyboard focus */
:focus:not(:focus-visible) {
    outline: none;
}

html {
    scroll-behavior: smooth;
}

/* Keep anchored sections clear of the sticky nav */
[id] {
    scroll-margin-top: 5rem;
}

/* --- Body --- */
body {
    /* Roboto is loaded via the HTML <link> tag */
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(135deg, var(--dark-background), var(--light-background));
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    align-items: center;
    text-align: center;
}

a {
    text-decoration: none;
    color: inherit;
}