@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,700;1,400;1,700&family=Spectral:ital,wght@0,400;0,600;1,400;1,600&display=swap');

/* Scaling font size: https://www.youtube.com/watch?v=wARbgs5Fmuw&t=225s&ab_channel=KevinPowell */
:root {
	color: white;
    --fs-h1: clamp(3rem, 5vw + 1rem, 5rem);
    --fs-h2: 3rem;
    --fs-h3: 1.5rem;
    --fs-h4: 1.25rem;
    --fs-p: 1rem;
}

@media (max-width: 1000px) {
    :root {
        --fs-h2: 2rem;
        --fs-h3: 1.25rem;
        --fs-h4: 1.15rem;
        --fs-p: 1rem;       
    }
}

@media (max-width: 420px) {
    :root {
        --fs-h2: 1.75rem;
        --fs-h3: 1rem;
        --fs-h4: 1rem;
        --fs-p: 0.9rem;
    }
}

h1 {
    font-family:'Spectral', serif;
    font-weight:400;
    font-size: var(--fs-h1);
    line-height: clamp(3rem, 5vw + 1rem, 6rem);
}

h2 {
    font-family:'Spectral', serif;
    font-weight:600;
    font-size: var(--fs-h2);
    line-height: clamp(2rem, 5vw + 1rem, 5rem);
}

h3 {
    font-family:'Source Sans 3', sans-serif;
    font-weight:700;
    font-size: var(--fs-h3);
}

h4 {
    font-family:'Source Sans 3', sans-serif;
    font-weight:400;
    font-size: var(--fs-h4);
}

p {
    font-family:'Source Sans 3', sans-serif;
    font-size: var(--fs-p);
    font-weight:400;
    line-height: clamp(1rem, 3vw + 0.75rem, 1.5rem);
}