html {
  font-size: 14px; /* Set the root font size */
}

/* 
  define color variables for b/w theme switch 
*/
:root {
  --bg: #ffffff;  /* background */
  --fg: #000000;  /* foreground */
  --acc: #ff0000;  /* accent */
  --mid: #ddd;  /* midtone */
}

.darkmode{
  --bg: #000;
  --fg: #fff;
  --acc: #ff0000;
  --mid: #333;
}

/* Sortable tables */
table.sortable thead {
    background-color:var(--acc);
    color:var(--fg);
    font-weight: bold;
    cursor: pointer;
}

tr:nth-child(even) { background-color: var(--mid); }

table {
  width: 96%;
  margin: 2%;
  border: 2px solid var(--fg);
  border-collapse: separate;
}

th {
  padding: 2px;
  border-right: 4px solid var(--fg);
  border-bottom: 4px solid var(--fg);
  color: var(--bg);
  text-align: right;
}

td, tr {
  padding: 0px;
  border-top: 1px solid var(--fg);
}

/* import custom fonts */
@font-face {
	font-family: atari;
	src: url('AtariST8x16SystemFont.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: jetbrains;
	src: url('JetBrainsMono-Regular.woff2') format('woff2');
	font-display: swap;
}

/* custom text select color */
::selection {
  color:var(--bg);
  background:var(--acc);
}
::-moz-selection { /* Code for Firefox */
  color:var(--bg);
  background:var(--acc);
}

  /* set class for header nav bar (prevents visited link style) */
  a.header:link {
    text-decoration:none;
  }

  a:link {
    color:var(--fg);
    text-decoration:underline;
    text-decoration-color:var(--acc);
    text-underline-offset:20%;
    text-decoration-thickness:2px;
    box-shadow: 0.1em 0.1em var(--acc);
    }
    
  a:visited {
    color:var(--fg);
    text-decoration-color:var(--fg);
  }
 
  a:hover {
    color:var(--acc);
    text-decoration: none;
    box-shadow: 0.2em 0.2em var(--fg);
    }
    
  nav {  
    font-size:2em;
    text-decoration:none;
    font-family:atari, serif;
    margin:0.4em;
    }    
    
  body { 
  /*full width on everything (removes header stripe margins)*/
  margin:0;
       color:var(--fg);
       background-color:var(--bg);
       font-family: jetbrains;
       }

  button {
    border-color:var(--fg);
    background-color:var(--bg);
    color:var(--fg);
    box-shadow: 0em 0.2em var(--fg);
    cursor: pointer;
    text-align:center;
    margin:0.5em
    }
  button:hover {
    border-color:var(--bg);
    background-color:var(--fg);
    color:var(--bg);
    box-shadow: 0em 0.2em var(--bg),
    0em 0.4em var(--fg);
    ;
  }
  
  /* inline code outline */
  code {
  border:1px solid;
  
  }

    /* remove `code` outlines inside block */
    pre code {
      background-color:var(--bg);
      border:none;
      }
  
  hr { 
    border-color:var(--fg); 
  }
   

  h1, h2, h3, h4 { margin:0;
                     font-family:atari, serif;
                     color:var(--bg);
                     background-color:var(--fg);                     
                     }                 
                  h5 { margin:0;
                       border-left:4vw solid;
                       border-right:40vw solid;
                       border-top:0.2em solid;
                       border-bottom:0.2em solid;
                       font-family:atari, serif;
                     }                       
                  h6 { margin:0;                
                       font-family:atari, serif;
                       color:var(--bg);
                       background-color:var(--acc);
                       }
  h1 {
     font-style:italic;
     font-size:2em;
     padding:0.4em;
     }
      h2 {
      font-size:1.8em;
      padding:0.2em;
      padding-left:4%;
      padding-right:4%;
      }
        h3 {
           font-size:1.6em;
           padding:0.2em;
           padding-left:8%;
           padding-right:8%;
           }
            h4 {
               font-size:1.4em;
               padding:0.2em;
               padding-left:12%;
               padding-right:12%;
               }
                h5 {
                  font-size:1.2em;
                  padding:0em;
                  }
                    h6 {
                      font-size:1.2em;
                      padding:0.2em;                      
                      padding-left:16%;
                      padding-right:16%;
                      }
  p {
    max-width:640px;
    font-family:jetbrains, sans-serif;
    font-size:1em;
    
    margin-top:0.8em;
    margin-bottom:0.8em;
    margin-left:1em;
    margin-right:1em;
    }
    
    
blockquote {
  border-left:4px solid;
  max-width:560px;
  margin: 1em;
  padding: 0.5em;
  font-style:italic;

  }

pre {
  border:8px double;
  max-width:80vw;
  max-height:80vh;
  margin: 1em;
  padding: 1em;
  font-family: Consolas, monospace;
  overflow: auto;
  
  code::before { content:""; }
  code::after { content:""; }
}                

  img {
    width:100% height:100%; max-width:80vw; max-height:64vh;
    border: 0.2em solid var(--fg);
    border-right: 0.8em solid var(--fg);
    border-bottom: 0.8em solid var(--fg);
    
    }
  
  figure {
    inline-size: fit-content;
    margin:1em;
    }
    figcaption {
      width:80%;
      padding:1%;
      padding-left:2%;
      contain: inline-size;
      position: relative;
      left: 1em;
      bottom: 2em;
      font-family:atari, serif;
      color:var(--bg);
      background-color:var(--fg);                     
}

    audio {
      margin:1em;
      }
      
  video {
    width:40vmax; height:30vmax;
    border: 0.2em solid var(--acc);
    border-right: 0.8em solid var(--acc);
    border-bottom: 0.8em solid var(--acc);
    margin:1em;
  }
      iframe {
        width:40vmax; height:30vmax;
        border: 0.2em solid var(--acc);
        border-right: 0.8em solid var(--acc);
        border-bottom: 0.8em solid var(--acc);
        margin:1em;
        }