:root {
    /* TODO: Pick Colors */
    /* Colors Base */
    --color-neutral-50: hsl(0,0%,89.8%);
    --color-neutral-100: hsl(0,0%,79.61%);
    --color-neutral-200: hsl(0,0%,69.8%);
    --color-neutral-300: hsl(0,0%,60.39%);
    --color-neutral-400: hsl(0,0%,50.98%);
    --color-neutral-500: hsl(0,0%,42.35%);
    --color-neutral-600: hsl(0,0%,33.73%);
    --color-neutral-700: hsl(0,0%,25.1%);
    --color-neutral-800: hsl(0,0%,17.25%);
    --color-neutral-900: hsl(0,0%,10.2%);
    --color-neutral-950: hsl(0,0%,0%);

    --color-youtube: hsl(0, 100%, 50%);
    --color-spotify: hsl(141, 73%, 42%);

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

    /* Colors Text */
    --color-text: var(--color-neutral-50);
    --color-text-muted: hsl(from var(--color-neutral-50) h s l / .6);
    --color-text-inverse: var(--color-neutral-900);
    --color-text-inverse-muted: hsl(from var(--color-neutral-900) h s l / .7);

    /* 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: inset hsl(from var(--color-text-muted) h s l / 20%) 0 0 .5px .7px;

    /* 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-image: linear-gradient(#40E0D0, transparent), url(Resources/Images/1.jpg);
    background-color: rgba(0, 0, 0, 0.8);
    background-blend-mode: overlay;
    flex-direction: column;
    color: var(--color-text);
}

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

.card {
    background-color: var(--color-bg-dark);
    padding: var(--card-padding, var(--sp-5));
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-def);

    &[data-app="youtube"] {
        background-image: linear-gradient(to bottom, hsl(from var(--color-youtube) h s l / 50%), transparent);
        background-color: var(--color-bg-dark);
        background-blend-mode: overlay;
    }

    &[data-app="spotify"] {
        background-image: linear-gradient(to bottom, hsl(from var(--color-spotify) h s l / 50%), transparent);
        background-color: var(--color-bg-dark);
        background-blend-mode: overlay;
    }
}

.ipas {
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.hero {
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--sp-6);

    .hero__links {
        display: flex;
        gap: var(--sp-7);
    }

    .hero__link {
        --card-padding: var(--sp-6) var(--sp-8);

        font-size: var(--fs-1);
        color: var(--color-text);
        text-decoration: none;
    }
}

.youtube {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);

    .youtube__link {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--sp-2);

        color: var(--color-text);
        text-decoration: none;

        h3 {
            font-size: var(--fs-3);
        }

        p {
            color: var(--color-text-muted);
        }
    }
}

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