:root {
    /* TODO: Pick Colors */
    /* Colors Base */
    --color-neutral-50: hsl(200, 20%, 99%);
    --color-neutral-100: hsl(200, 15%, 95%);
    --color-neutral-200: hsl(200, 17%, 91%);
    --color-neutral-300: hsl(200, 20%, 84%);
    --color-neutral-400: hsl(200, 23%, 65%);
    --color-neutral-500: hsl(200, 18%, 47%);
    --color-neutral-600: hsl(200, 22%, 35%);
    --color-neutral-700: hsl(200, 28%, 27%);
    --color-neutral-800: hsl(200, 36%, 18%);
    --color-neutral-900: hsl(200, 48%, 11%);
    --color-neutral-950: hsl(200, 85%, 5%);

    --color-primary-50: hsl(200, 76%, 97%);
    --color-primary-100: hsl(200, 82%, 95%);
    --color-primary-150: hsl(200, 84%, 93%);
    --color-primary-200: hsl(200, 82%, 85%);
    --color-primary-300: hsl(200, 81%, 71%);
    --color-primary-400: hsl(200, 95%, 45%);
    --color-primary-500: hsl(200, 100%, 39%);
    --color-primary-600: hsl(200, 100%, 33%);
    --color-primary-700: hsl(200, 100%, 25%);
    --color-primary-800: hsl(200, 96%, 20%);
    --color-primary-900: hsl(200, 73%, 19%);
    --color-primary-950: hsl(200, 88%, 10%);

    --color-contrast-50: hsl(0, 86%, 97%);
    --color-contrast-100: hsl(0, 100%, 94%);
    --color-contrast-200: hsl(0, 100%, 89%);
    --color-contrast-300: hsl(0, 100%, 82%);
    --color-contrast-400: hsl(359, 100%, 70%);
    --color-contrast-500: hsl(357, 96%, 58%);
    --color-contrast-600: hsl(357, 100%, 45%);
    --color-contrast-700: hsl(358, 100%, 38%);
    --color-contrast-800: hsl(356, 92%, 33%);
    --color-contrast-900: hsl(359, 69%, 30%);
    --color-contrast-950: hsl(359, 79%, 15%);

    /* Colors Background */
    --color-bg-light: var(--color-neutral-50);
    --color-bg: var(--color-neutral-100);
    --color-bg-dark: var(--color-primary-800);

    /* Colors Text */
    --color-text: var(--color-primary-950);
    --color-text-muted: hsl(from var(--color-primary-950) h s l / .6);
    --color-text-inverse: var(--color-primary-100);
    --color-text-inverse-muted: hsl(from var(--color-primary-100) h s l / .7);
    --color-text-btn: var(--color-primary-800);

    /* Colors Button */
    --color-btn-primary: var(--color-contrast-600);
    --color-btn-primary-hover: var(--color-contrast-500);
    --color-btn-secondary: var(--color-primary-400);
    --color-btn-secondary-hover: var(--color-primary-300);

    /* TODO: Make font responsive with clamp(min, scaling, max) and a Responsive Font Calculator*/
    /* Font Typescale */
    --fs-1: 2.25rem;
    --fs-2: 1.875rem;
    --fs-3: 1.5rem;
    --fs-4: 1.25rem;
    --fs-5: 1.125rem;
    --fs-6: 1rem;
    --fs-7: .875rem;
    --fs-8: .75rem;

    /* Font Weights */
    --fw-emphasis: 700;
    --fw-normal: 400;

    /* Scaling Base 4px Spacing System. Using Pixels for Responsiveness */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;

    /* TODO: Pick a Border Radius. Less Radius For Serious and More for Fun */
    --border-radius: 10px;

    /* Default Transition Duration */
    --trans-default: .2s ease-out;

    /* TODO: Change these as you see fit */
    --shadow-def: 3px 4px 3px hsl(from var(--color-primary-950) h s l / 20%);

    /* Pleasent number of characters for the eye */
    --max-characters-per-line: 60ch;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100vh;
    display: flex;
    background-color: var(--color-bg-dark);
    flex-direction: column;
    color: var(--color-text);
}

img {
    display: block; /* This removes the tiny gap at the bottom of image elements */
}

.header {
    padding: var(--sp-3) var(--sp-3);
    display: flex;
    align-items: baseline;
    background-color: var(--color-bg);

    .header__links {
        margin-inline-start: auto;
        display: flex;
        gap: var(--sp-2);

        @media (width < 1000px) { /* TODO: Replace this with actual media querries this is just an example */
            display: none;
        }
    }

    .header__link {
        text-decoration: none;
        color: var(--color-text-muted);

        &.header__link--active {
            color: var(--color-text); /* TODO: Replace this with a Primary Color Variant */
        }
    }
}

.main {
    padding: 0 var(--sp-4);
}

.footer {
    padding: var(--sp-3) var(--sp-3);
    margin-top: auto;
    display: flex;
    align-items: baseline;
    background-color: var(--color-bg);
}

.hero {
    min-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* REMEMER : If you keep repeating Spacing, Flex and Typography - Add Utility Classes */