@font-face {
  font-family: "Fungal";
  src: url("../fonts/FungalVF.woff2");
}
@font-face {
  font-family: "Commissioner";
  src: url("../fonts/Commissioner.ttf");
}

/*
Commisioner has the following axes:

    Weight (wght) - 100 to 900. (Default 100) Controls the darkness of the composed text. Thin, UltraLight, ExtraBold, and Black are ideally used for display sizes, while Light, Regular, Medium, Semibold, Bold can be used for both display and text sizes.

    Slant (slnt) - 0 to -12 degrees. (Default 0) Controls the slant of the letters. A stronger slant creates more emphasis and contrast to upright styles.

    Flair (FLAR) - 0 to 100. (Default 0) The values are arbitrary and the length of the axis could be narrower (i.e. 0 to 10). As the flair axis grows the straight grotesque terminals develop a swelling and joints become more idiosyncratic. The flair axis was originally called Flare, referring to the flaring of the stems, but at some point I decided to name it flair, as in stylisness and panache.

    Volume (VOLM) - 0 to 100. (Default 0) The values are arbitrary and the length of the axis could be narrower (i.e. 0 to 10). The volume axis works only in combination with the Flair axis. It transforms the glyphic serifs to wedge-like ones and add a little more edge to details.
*/


:root {
    --white: #FFF;
    --light: #e9e9e9;
    --dark: #2a2a2a;
    --body: "Commissioner";
    --display: "Fungal";
}


body {
    background-color: var(--light);
    color: var(--dark);
    font-family: var(--body);
}


.content-fixed {
    display: grid;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1em;
}
.tightText {
    margin: 0 auto;
    max-width: 600px;
}
p {
    font-family: var(--body);
    font-weight: 300;
    line-height: 1.5;
    font-size: 20px;
    font-variation-settings: 'FLAR' 100, 'VOLM' 100;
}