:root {
    
    --font-family: "Reddit Sans";
    --p-family: var(--font-family);
    --base-font-size: 16;

    --h1-size: clamp(1.688rem, 1.688rem + ((1vw - .2rem) * 1.25), 2.188rem);
    --h1-line-height: 1.15em;
    --h1-weight: 700;
    
    --h2-size: clamp(1.438rem, 1.438rem + ((1vw - .2rem) * .625), 1.688rem);
    --h2-line-height: 1.3;
    --h2-weight: 700;
    
    --h3-size: clamp(1.875rem, 1.875rem + ((1vw - .2rem) * .417), 2.125rem);
    --h3-line-height: 1.15em;
    --h3-weight: 600;

    --h4-size: clamp(1.55rem, 1.55rem + ((1vw - .2rem) * .3), 2rem);
    --h4-line-height: 1.15em;
    --h4-weight: 500;

    --h5-size: 1rem;
    --h5-line-height: 1.15em;
    --h5-weight: 500;

    --p-size: 1rem;
    --p-line-height: 1.28;
    --p-weight: 400;

    --p-s-size: .8rem;
    --p-s-line-height: .8em;

    --p-xs-size: 0.688rem;
    --p-xs-line-height: 0.688em;

    --p-l-size: 1.125rem;
    --p-l-line-height: 1.4em;
}

body {
    -moz-osx-font-smoothing: grayscale;
}

.page-home {
    --h2-size: 1.688rem;
}

@font-face {
    font-family: "Reddit Sans";
    font-style: normal;
    src: url("../../fonts/RedditSans-VariableFont_wght-99e133a0c296850a2666d9bca3a22165.ttf") format('truetype');
    font-weight: 300 700;
}

h1,
.h1 {
    font-family: var(--h1-family);
    font-size: var(--h1-size);
    font-weight: var(--h1-weight);
    line-height: var(--h1-line-height);
    letter-spacing: var(--h1-letter-spacing, 0);
    color: var(--primary);
}

h2,
.h2 {
    font-family: var(--h2-family);
    font-size: var(--h2-size);
    font-weight: var(--h2-weight);
    line-height: var(--h2-line-height);
    letter-spacing: var(--h2-letter-spacing, 0);
    color: var(--primary);
}

h3,
.h3 {
    font-family: var(--h3-family);
    font-size: var(--h3-size);
    font-weight: var(--h3-weight);
    line-height: var(--h3-line-height);
    letter-spacing: var(--h3-letter-spacing, 0);
    color: var(--primary);
}

h4,
.h4 {
    font-family: var(--h4-family);
    font-size: var(--h4-size);
    font-weight: var(--h4-weight);
    line-height: var(--h4-line-height);
    letter-spacing: var(--h4-letter-spacing, 0);
    color: var(--blue-800);
}

h5,
.h5 {
    font-size: var(--h5-size);
    font-weight: var(--h5-weight);
    line-height: var(--h5-line-height);
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
}

p {
    font-family: var(--p-family);
    font-size: var(--p-size);
    font-weight: var(--p-weight);
    line-height: var(--p-line-height);
    letter-spacing: var(--p-letter-spacing, 0);
}

.p-l {
    font-family: var(--p-family);
    font-size: var(--p-l-size);
    line-height: var(--h4-line-height);
    letter-spacing: var(--h4-letter-spacing, 0);
}

li {
    list-style-type: none;
}

p strong {
    font-weight: 700;
}

main p + p {
    margin-top: 1em;
}