:root {
                --border: black;
                --text: black;
                --links: purple;
                --linkshov: violet;
                --exit: red;
                --bg: lightgrey;
                --bodybg: orange;
            }

            body {
                font-family: 'Leander';
                background-color: var(--bodybg);
                color: var(--text);
                background-image: url();
                background-size: 150px;
                background-attachment: fixed;
                padding: 5% 20% 5% 20%;
                display: flex; 
                justify-content: center; 
                align-items: center; 
                height: 100vh; 
                margin: 0;
            }
            
            a {
              color: var(--links);
              text-decoration: underline;
              text-decoration-style: dashed;
            }
            
            a:hover {
              color: var(--linkshov);
              text-decoration: underline;
              text-decoration-style: dashed;
            }
            
            #main {
              margin: 0 auto;
              background-color: var(--bg);
              border: 1px solid var(--border);
              width: 600px;
              height: 400px;
             
            }
            
            #nav {
              margin: 0 auto;
              border: 1px solid var(--border);
            }
            
            .content {
              margin: 0 auto;
              border: 1px solid var(--border);
              height: 356px;
              padding: 20px;
              overflow: auto;
            }

            * {
                box-sizing: border-box;
            }
            
            .nav {
             text-decoration: none;
             color: var(--links);
            }
            
            .thispage {
             text-decoration: none;
             color: var(--linkshov);
             font-weight: bold;
            }
            
            .navright {
             text-decoration: none;
             color: var(--exit);
             
            }

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

            /* this is just a cool box, it's the darker colored one */
            .box {
                background-color: var(--navbar);
                border: 1px solid var(--border);
                padding: 10px;
            }
            
            
            
            


.column {
  overflow-wrap: break-word;
  float: left;
  width: 50%;
  padding: 0 10px 0 10px;
  text-align: left;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.split-navigation {
    /* Content is centered horizontally */
    align-items: center;
    display: flex;
    border: 1px solid var(--border);
    height: 40px;

    /* Reset styles */
    list-style-type: none;
    margin: 0;
    padding: 20px;
}

.split-navigation__item {
    margin-right: 10px;

}

.split-navigation__item--right {
    /* Sticks to the right */
    margin-left: auto;
    margin-right: 0;
}