/* Font Size */
html {
    font-size: 14pt;
  }
  
  /* Themes */
  body {
    --bg: #1f2427;
    --primary: #f0f2f3;
    --muted: #c6c6c6;
    --accent: #ec1a62;
    --tag-bg: rgb(60, 62, 71);
    --card-bg: #4f5a61;
    --shadow: #11111180;
    --headline: rgb(251, 225, 76);
    --footer: #c6c6c6;
  }
  
  body.light-theme {
    --bg: #f8f8f8;
    --primary: #333;
    --muted: #969696;
    --accent: #ba0d37;
    --tag-bg: rgb(230, 230, 230);
    --card-bg: rgb(248, 248, 248);
    --shadow: #9e9e9e38;
    --headline: #ba0d37;
    --footer: #5c5c5c;
  }
  
  /* Font and Colors */
  body {
    font-family: "Source Sans Pro", sans-serif;
    background-color: var(--bg);
    color: var(--primary);
  }
  
  /* Link styling */
  a {
    outline: none;
    color: var(--primary);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    transition: color 0.25s, text-decoration-color 0.25s;
  }
  
  a:focus,
  a:hover {
    color: var(--accent);
  }
  
  a:active {
    text-decoration-color: transparent;
  }
  
  /* Horizontal Rules */
  hr {
    border-top-color: var(--primary);
  }
  
  /* Tags */
  .tag {
    font-size: 0.8rem;
    background-color: var(--tag-bg);
    padding: 0.2rem;
    border-radius: 0.3rem;
  }
  
  /* Navigation buttons */
  .btn:focus,
  .btn:active {
    outline: none !important;
    box-shadow: none;
  }
  
  .button {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--accent);
    padding: 1.2rem;
  
    transition-duration: 0.25s;
    transition-property: transform, color, text-decoration-color;
    transition-timing-function: ease-out;
  }
  
  .button:visited {
    color: var(--primary);
  }
  
  .button:focus,
  .button:hover {
    text-decoration-color: transparent;
    color: var(--accent);
    transform: translateY(-8px);
  }
  
  .button:active {
    transform: translateY(-4px);
  }
  
  h1 {
    margin-top: 1rem;
    font-weight: 700;
  }
  
  h2 {
    font-weight: 600;
  }
  
  hr {
    border: none;
    height: 1px;
    background-color: var(--primary);
  }