:root {
    --light-foreground-color: #1c1a19;
    --light-background-color: #f4f1eb;

    --dark-foreground-color: #f4f1eb;
    --dark-background-color: #1c1a19;

    --accent-color: #a67873; /* faded rose */
    --accent-color: #c7a98b; /* soft champagne gold */
    --code-normal: var(--text-normal);
    --bold-color: var(--color-muted);
    --italic-color: var(--text-normal);

    --light-color-red: #ba5c53; /* rose clay */
    --light-color-orange: #d78a5a; /* terracotta blush */
    --light-color-yellow: #d7b968; /* antique gold */
    --light-color-green: #6da78a; /* eucalyptus leaf */
    --light-color-cyan: #7fb4c5; /* soft seaglass */
    --light-color-blue: #5a87a3; /* vintage denim */
    --light-color-purple: #8a79a4; /* faded lilac */
    --light-color-pink: #c48ca6; /* rosewater blush */

    --dark-color-red: #e68c82; /* ember blush */
    --dark-color-orange: #f0a573; /* glowing clay light */
    --dark-color-yellow: #eacd7f; /* soft candlelight */
    --dark-color-green: #90c2a8; /* sage in moonlight */
    --dark-color-cyan: #9ed0e0; /* pale glacial blue */
    --dark-color-blue: #82aac4; /* dusk lake */
    --dark-color-purple: #b8a3c8; /* cloudy lavender */
    --dark-color-pink: #ebb1d2; /* faded peony glow */

    --font-text: "Montserrat";
    --font-header: "Magnite";
    --font-header-weight: 400;
    --font-ratio: 1.614;
    --font-header-letter-spacing: normal;
    --font-header-line-height: 1.2em;

    --font-density: 1.8;

    --h1-size: 5rem;
    --h2-size: 4rem;
    --h3-size: 3rem;
    --h4-size: 3rem;
}
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
    text-align: center;
}
/*
h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
    letter-spacing: 0em;
}
body { -webkit-font-smoothing: antialiased; }
.dark body { -webkit-font-smoothing: antialiased; }

article h1,
article h2,
article h3,
article h4,
article h5,
article h6,
article table th,
article table td { text-align:center; }

article p {margin:auto;}
*/

@font-face {
    font-family: "Montserrat";
    /* Add other properties here, as needed. For example: */
    font-weight: 100 900;
    font-style: normal;
    src: url("https://cdn.ffp.co/Montserrat-VariableFont_wght.ttf");
}
@font-face {
    font-family: "Montserrat";
    /* Add other properties here, as needed. For example: */
    font-weight: 100 900;
    font-style: italic;
    src: url("https://cdn.ffp.co/Montserrat-Italic-VariableFont_wght.ttf");
}

@font-face {
    font-family: "Magnite";
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url("https://cdn.ffp.co/Magnite.otf");
}
@font-face {
    font-family: "Magnite";
    font-weight: normal;
    font-style: italic;
    font-display: swap;
    src: url("https://cdn.ffp.co/Magnite%20Italic.otf");
}