/* ------ COLORS ------ */

    /* Color setting */
    :root {
        --bg: #faf4e9;
        --bg-two: black;
        --bg-overlay: url(./images/groovepaper.png);
        --text: black;
        --accent: black;
        --link: #054d09;
        --visited-link: #4b0562;
    }
    
    /* Dark mode  colors*/
    @media screen and (prefers-color-scheme: dark) {
        :root {
        --bg: black;
        --bg-two: #faf4e9;
        --text: white;
        --accent: #756752;
        --highlight: #221607;
        --link: #fcffe5;
        --visited-link: #f4e9ff;
        }
    }

/* ------ FONTS ------ */

    @font-face {
      font-display: swap; 
      font-family: 'Lora';
      font-style: normal;
      font-weight: 400;
      src: local('/font_lora-regular.woff2'); 
      src: url('/font_lora-regular.woff2') format('woff2'); 
    }
    @font-face {
      font-display: swap; 
      font-family: 'Lora';
      font-style: italic;
      font-weight: 400;
      src: local('/font_lora-italic.woff2'); 
      src: url('font_lora-italic.woff2') format('woff2'); 
    }
    @font-face {
      font-display: swap; 
      font-family: 'Lora';
      font-style: bold;
      font-weight: 700;
      src: local('/font_lora-bold.woff2'); 
      src: url('/font_lora-bold.woff2') format('woff2'); 
    }

    body {
        font-family: 'Lora', sans-serif;
        font-size: 1em;
    }
    
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Lora', sans-serif;
      word-spacing: 0.1em;
    }