@font-face { font-family: Charter; src: url(charter_regular.woff2) format('woff2-variations'); font-style: normal; } @font-face { font-family: Charter; src: url(charter_italic.woff2) format('woff2-variations'); font-style: italic; } @font-face { font-family: Charter; src: url(charter_bold.woff2) format('woff2-variations'); font-weight: bold; } @font-face { font-family: Charter; src: url(charter_bold_italic.woff2) format('woff2-variations'); font-style: italic; font-weight: bold; } @font-face { font-family: EBGaramond; src: url(EBGaramond-VariableFont_wght.ttf) format('woff2-variations'); font-style: normal; } @font-face { font-family: EBGaramond; src: url(EBGaramond-Italic-VariableFont_wght.ttf) format('woff2-variations'); font-style: italic; } @font-face { font-family: FiraMono; src: url(FiraMono-Regular.ttf); font-style: normal; } body { background: #fffaef; color: DarkSlateGrey; font-family: Charter, serif; font-size: 18px; } a { text-decoration: none; color: #dd1b26; } a:hover { text-decoration: underline; color: #dd1b26; } .container { margin: 4em; max-width: 40em; } .header { font-style: italic; font-size: x-large; } .title { font-weight: bold; letter-spacing: -0.5px; } hr { border: .1px DarkSlateGrey dashed; }