:root {
    /* Font weights */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-bold: 700;

    /* Colors */
    --color-text: #313337;
    --color-black: #313337;
    --color-white: #F8F9FB;
    --color-light-gray: #E9E9E9;
    --color-gray: #ddd;
    --color-dark-gray: #838587;
    --color-very-light-purple: #f8f6fc;
    --color-light-purple: #9674CC;
    --color-purple: #764ABC;
    --color-purple-1: #6233AE;
    --color-dark-purple: #202473;
    --color-red: #bd4147;
    --color-green: #1C9963;
    --color-transparent: rgba(0, 0, 0, 0);

    /* Type scale. fs = "font size" */
    --fs-1: 3rem;
    --fs-2: 2.25rem;
    --fs-3: 1.5rem;
    --fs-4: 1.25rem;
    --fs-5: 1rem;
    --fs-6: .875rem;
    --fs-7: .75rem;

    --content-max-width: 80rem;

    --min-post-card-width: 240px;
    --min-feat-post-card-width: 340px;
    --min-post-card-width-sm: 220px; 
    --min-feat-post-card-width-sm: 320px; 
    /* This should be set to the maximum size a thumbnail can be */
    --max-post-card-width: 420px;
}

* {
    box-sizing: border-box;
}

html {

    font-family: 'Proxima Nova', sans-serif;
    font-weight: 500;
    font-size: 16px;
}

/* monospaced elements should be styled everywhere except in h1s */
:not(h1) > :is(code, kbd, pre, samp) {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8em;
    padding: 0.2rem 0.4rem;
    background-color: var(--color-very-light-purple);
    border-radius: 8px;
}


body {
    line-height: 1.5;
    color: var(--color-text);
    background-color: white;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--weight-bold);
}

h1 { 
    font-size: var(--fs-1);
}

h2 { 
    font-size: var(--fs-2);
}

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

h4 { 
    font-size: var(--fs-4);
}

h5 { 
    font-size: var(--fs-5);
}

h6 { 
    font-size: var(--fs-6);
}