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

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

/* 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 {
    text-decoration:none;
    font-family:atari, serif;
    margin:0.5em
    }    
    
  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 highlight + prepend/append quotes */
  code {
  background-color:var(--mid);
  }
  code::before { content:"`"; }
  code::after { content:"`"; }
    /* remove `code` midtones for block */
    pre code {
      background-color:var(--bg);
      }
  
  hr { 
    border-color:var(--fg); 
  }
   
h1 {   margin:0; }
  h1, h2, h3, h4, h5 { 
                     font-family:atari, serif;
                     color:var(--bg);
                     background-color:var(--fg);                     
                     }
                     h6 {                     
                       font-family:atari, serif;
                       color:var(--bg);
                       background-color:var(--acc);
                       }
  p {
    max-width:640px;
    font-family:jetbrains, sans-serif;
    margin:1em;
    }
    
    
blockquote {
  max-width:560px;
  margin: 2em;
  border:4px dashed;
  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:""; }
}                

  h1 {
     font-style:italic;
     font-size:2.5em;
     padding:0.5em;
     }
      h2 {
      font-size:2.5em;
      padding:0.25em;
      padding-left:4%;
      padding-right:4%;
      }
        h3 {
           font-size:2em;
           padding:0.25em;
           padding-left:8%;
           padding-right:8%;
           }
            h4 {
               font-size:1.5em;
               padding:0.25em;
               padding-left:12%;
               padding-right:12%;
               }
                h5 {
                  font-size:1em;
                  padding:0.25em;
                  padding-left:16%;
                  padding-right:16%;
                  }
                    h6 {
                      font-size:1em;
                      padding:0.25em;                      
                      padding-left:20%;
                      padding-right:20%;
                      }
                    
  img {
    max-width:80vw; height:auto;
    border: 0.5em solid var(--fg);
    border-right: 2em solid var(--fg);
    border-bottom: 2em 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.5em solid var(--acc);
    border-right: 2em solid var(--acc);
    border-bottom: 2em solid var(--acc);
    margin:1em;
  }
      iframe {
        width:40vmax; height:30vmax;
        border: 0.5em solid var(--acc);
        border-right: 2em solid var(--acc);
        border-bottom: 2em solid var(--acc);
        margin:1em;
        }