* {
  font-display: swap;
}

:root {
  --light-primary-background-color: #FFFFFF;
  --light-secondary-background-color: #F7F7F7;
  --light-primary-text-color: #34495E;
  --light-secondary-text-color: #555555;
  --light-link-color: #007070;
  --light-link-visited-color:  #007070;
  --light-link-hover-color: #2fa582;
  --light-code-text-color:  #FFFFFF;
  --light-code-background-color:  #4D5B7C;
  --light-code-mark-color:  #637DB9;

  --dark-primary-background-color: #1f2028;
  --dark-secondary-background-color: #23252f;
  --dark-primary-text-color: #FFFFFF;
  --dark-secondary-text-color: #A9ACD1;
  --dark-link-color: #FFFFFF;
  --dark-link-visited-color:  #FFFFFF;
  --dark-link-hover-color: #04cefb;
  --dark-code-text-color:  #FFFFFF;
  --dark-code-background-color:  #4D5B7C;
  --dark-code-mark-color:  #637DB9;
}

body {
  padding: 0px 0px;
  margin: 0px 0px;
  background-color: var(--light-primary-background-color);
}

.container {
  max-width: 1200px;
  margin: 0px auto;
  padding: 0px 20px;
}

.top-spacer {
  min-height: 75px;
}

h1, h2, h3, h4  {
  color: var(--light-primary-text-color);
  font-family: "Montserrat", sans-serif;
}

p, li {
  color: var(--light-primary-text-color);
  line-height: 22px;
  letter-spacing: 0.1px;
  font-family: "Roboto", sans-serif;
}

a {
  color: var(--light-link-color);
  text-decoration: none;
}

a:visited {
  color: var(--light-link-visited-color)
}

a:hover {
  color: var(--light-link-hover-color)
}


/* handle dark theme */
@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--dark-primary-background-color);
  }

  h1, h2, h3, h4  {
    color: var(--dark-primary-text-color);
  }
  
  p, li {
    color: var(--dark-primary-text-color);
  }
  
  a {
    color: var(--dark-link-color);
  }
  
  a:visited {
    color: var(--dark-link-visited-color)
  }
  
  a:hover {
    color: var(--dark-link-hover-color)
  }
}