/*
Different shades of brown that I use:
    #292524 (Base)
    #443e3c (Macro Base)
    #625a58 (Neutral)
    #756c69 (Highlight)

Whites:
    #FFFFFF
    #F3F3F3 (Accent)

Positive/Negative:
    #57bb8a (Green)
    #e67c73 (Red)

Political:
    #006391 (Democrat Blue)
    #E24A38 (Republican Red)

OTT Yellow:
    #FCBA04

Fonts (from Substack):
    Classic Serif (Text) - Googling reveals this is either Georgia or Spectral
    Inconsolata (Headings)
*/

  html {
    scrollbar-width: 4px;
    scrollbar-color: #f3f3f3, #ffffff;
  }

  body {
    background-color: #292524;
    color: #ffffff;
    font-family: Georgia;
    font-size: 16px;
    margin: 0px;
    text-align: center;
  }

  #header {
    border-bottom: 0.5px solid #443e3c;
    padding-top: 2px;
    text-align: center;
    font-size: 12px;
  }

  #content {
    padding: 10px;
  }

  #logo {
    background-color: #ffffff;
    border-radius: 20%;
    height: 40px;
    width: 40px;
    margin: 15px 25px;
    padding: 0px;
    position: absolute;
    float: left;
  }

  a {
    color: #FCBA04;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }
  
  h1, h1 a, h1 a:hover {
    font-family: "Inconsolata";    
    color: #ffffff;
    text-decoration: none;
    font-size: 29px;
  }

  .button {
    font-family: Georgia;
    text-align: center;
    display: inline-block;
    color: #ffffff;
    background-color: #FCBA04;
    border-radius: 15%;
    width: max-content;
    margin-top: 15px;
    margin-bottom: 5px;
    padding: 4px;
    border: none;
    font-size: 16px;
  }

  .button:hover {
    text-decoration: none;
    background-color: #e3a703;
    cursor: pointer;
  }

  .button + .button {
    margin-left: 15px; 
  }

  @font-face {
    font-family: "Inconsolata";
    src: url(../fonts/Inconsolata.ttf) format(truetype);
  }