css.gmi

so your styles.css looks like this

:root {
    --text-color: black;
    --background-color: lavenderblush;
    --link-color: black;
    --font: Helvetica, Arial, monospace;
}

or something

Colors

colors can be hex values (like "#FF0000"), rgb values (like "rgb(255,0,0)", or one of a few hundred designated CSS color names (like "Red" or "lavenderblush")

google "hex color picker" or w/e if you want to pick your own

Fonts

Fonts take the form of a list separated by commas.

When you write a font name, the browser looks for a font by that name on your computer, and if it can't find it looks for the next name in the list.

So you can use any font you have on your computer. But if you want other people (who might not have that font downloaded) to see the same font, you need to load it from a url.

Steps:
1. Open font book (app), right click the font you want to use, and click show in finder
2. grab the font file and upload it. if it's over 32kb, it won't work– if you want me to up the limit lmk!
3. now it's uploaded, we need to load it in. add the following to the top of your styles.css:

@font-face {
  font-family: rumeur; /* this is whatever you want to call the font later on */
  src: url(rumeur.otf); /* this has to be the exact filename */
}

4. and then use the font like:

:root {
    ...
    --font: rumeur;
}

you could also specify a font just for links (written "=> [link]") like:

a {
    font-family: rumeur
}

or # headings like:

h1 { /* number = number of hashes -> "##" = "h2" */
    font-family: rumeur
}

or only use a certain font on hover like

a:hover {
    font-family: rumeur
}

or whatever!