:root {
                --heading: #e4699e;
                --text: #ffbde0;
                --bold: #ff868e;
                --links: #ff3b8f;
                --linkshov: #e4699e;
                --main: #07050a;
                --aside: #000000;
                --navbar: #090116;
                --border: #e4699e;
            }

            body {
                font-family: 'Georgia';
                margin: 0;
                font-size: 18px;
                background-color: #000;
                color: var(--text);
                background-image: url();
                background-size: cover;
                background-attachment: fixed;
            }

            * {
                box-sizing: border-box;
            }

/* latin */
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/specialelite/v18/XLYgIZbkc4JPUL5CVArUVL0ntnAOSA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Georgia';
  src: url('/Georgia.ttf');
}

@font-face {
  font-family: 'sitelen pona';
  src: url('/linja-sike-5.otf');
}

            a {
                color: var(--links);
                font-weight: bold;
            }
            
            a:hover {
                color: var(--linkshov);
                font-weight: bold;
                text-decoration: underline;
                text-decoration-style: dotted;
            }

            #divider {
                width: 100%;
                height: 2px;
                background-color: var(--links);
            }
            
            #sitelenpona {
             font-family: "sitelen pona"; 
             }
             
             .navbar {
              background-color: var(--links); 
              color: var(--main);
              position: fixed;
              top: 0;
              height: 1.5em;
              width: 40vw;
              text-align: center;
              display: block;
              left: 50%;
              margin-left: -20vw;
             }
             
             .navbar a {
               color: var(--main);
               text-align: center;
               }

            main {
                background-color: var(--main);
                padding: 5em;
                height: 100vh;
                width: 40vw;
                overflow: auto;
                border-left: 4px solid var(--links);
                border-right: 4px solid var(--links);
                margin: 0 auto;
            }


            h1 {
                font-size: 2em;
                color: var(--heading);
            }
            
            h2 {
                font-size: 1.7em;
                color: var(--heading);
            }
            
            h3 {
                font-size: 1.4em;
                color: var(--heading);
            }
            
            h4 {
                font-size: 1.2em;
                color: var(--heading);
            }

            strong {
                /* this styles bold text */
                color: var(--bold);
            }