/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  max-width:50em;

}

 @font-face {
   font-family: vagra;
   src: url('vagra-pixel-large.otf');
 }
  @font-face {
   font-family: VictorMono;
   src: url('VictorMono-Italic.otf');
   
 }
  @font-face{
    font-family: victormonobold;
    src: url('VictorMono-Bold.otf');
  }
  @font-face{
    font-family: Nighthawk;
    src: url('Nighthawk.otf');
  }
  @font-face{
    font-family: Centaury;
    src: url('Centaury-Display.otf');
  }
  @font-face{
    font-family: Nightingale;
    src: url('DTNightingale-Light.otf');
  }
  a {
    color: black;
  }
 a[href]:hover, a[href]:active{
  color: #0060ff;
}
a[href][aria-current=page]{
  font-weight: bold;
  color:green !important;
}
a:visited{
  color: dimgrey;
  text-decoration: none;
}
  header{
            display:inline;
            margin:0;
            padding:0;
            gap:.5em;
            flex-wrap:wrap;
            text-align: center;
            padding:0em;
            
            }
 h1 {
    color: #0060ff;
   font-family: VictorMono;
   margin:0;
   font-size:2.75em;
   text-align: center !important;
    }

/* nav bar */
 @media screen and (max-width: 1024px) {
    li {
        width: 100% !important;
        float:none !important;
    }
    .home-link{letter-spacing:-.01em}
    footer>p{letter-spacing:-.01em}
    a{
      text-decoration: none;
    }
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-bottom:1px solid black;
}
li {
    float: left;
    line-height:1.5;
    width: 33%;
    /* Split width appropriately */
}
a.Nav_Links:link, a.Nav_Links:visited {
    display: block;
    font-family: Centaury;
    font-size: 1.5em;
    text-align: center;
    padding: 4px;
}
a.Nav_Links:hover, a.Nav_Links:active {
    color: #0060ff;
    font-weight: bold;
}
a.Nav_Links:visited {
}
/*-- end nav bar */
p {
  color: black;
  font-family: Nightingale;
  font-stretch: ultra-condensed;
  line-height:1.5
  
}
h2{margin-bottom:0}
@media only screen and (min-width: 1025px) {
link {
position: relative;
transition: clip-path 275ms ease;
display: inline-block; /* Or inline-flex */
 width: fit-content; 
}
.link:hover span::before, .link:focus span::before {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.link span {
position: relative;
display: inline-block;
}
.link span::before {
position: absolute;
content: attr(data-content);
text-decoration: underline;
clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
transition: clip-path 275ms ease;
}
}
:root{--font-family:Atkinson Hyperlegible;--font-family-monospace:Courier Prime,Courier New,Courier,monospace}
    @media (prefers-color-scheme:dark){
      :root{--color-gray-20:#eee;--color-gray-50:#ddd;--color-gray-90:dimgrey;--text-color-link-light:#FF4500;--text-color-link:#008080;--text-color-link-active:#006060;--text-color-link-visited:var(--text-color-link);--background-color:white}}
    *{box-sizing:border-box}

      body,html{
          padding:.25em;
          margin:0 auto;
          font-family:var(--font-family);
          color:var(--text-color);
          background-color:var(--background-color)
          }
      html{overflow-y:scroll} 
      p:last-child{margin-bottom:0}
      img{width:100%;max-width:90vw!important;height:auto!important}
      img.postimg{
          display:block;
          margin:0 auto;
          max-width:400px!important;
          max-height:200px
          }
      /*a[href]{color:var(--text-color-link)}
      a[href]:visited{color:var(--text-color-link-visited)}
      a[href]:active,a[href]:hover{
        text-decoration: none;} */
      main{padding:1rem}
      main :first-child{margin-top:0}
      header:after{content:"";display:table;clear:both}
      time{font-style:italic;font-family:Courier Prime,Courier New,Courier,monospace}
      footer{border-top:1px solid var(--color-gray-20)}
      .links-nextprev{
        list-style:none;
        border-top:1px solid var(--color-gray-20);
        padding:1em 0
        }
      blockquote{
        padding:.25em 1em;
        border-left:1px solid var(--color-gray-20);
        }
        table{margin:1em 0}
        table td,table th{padding-right:1em}
        code{
          font-family:var(--font-family-monospace);
          font-size:.8em
          }
        pre{
          font-family:var(--font-family-monospace);
          margin:1.5em;
          padding:1.5em;
          border:1px solid;
          overflow-x:scroll
          }
         pre:not([class*=language-]){
           margin:.5em 0;
           line-height:1.375;
           -moz-tab-size:var(--syntax-tab-size);
           -o-tab-size:var(--syntax-tab-size);
           tab-size:var(--syntax-tab-size);
           -webkit-hyphens:none;
           -ms-hyphens:none;
           hyphens:none;
           direction:ltr;
           text-align:left;
           white-space:pre;
           word-spacing:normal;
           word-break:normal
           }
          aside{padding:1em 0!important}
          code{word-break:break-all}
          .home-link{
            font-size:1.75em;
            font-weight:700;
            margin-right:0em;
            }
          .home-link:link:not(:hover){text-decoration:none}
          .header-anchor{
          text-decoration:none;
          font-style:normal;
          font-size:1em;
          margin-left:0em
          }
        a[href].header-anchor,a[href].header-anchor:visited{color:transparent}
        a[href].header-anchor:focus,a[href].header-anchor:hover{text-decoration:underline}
        :hover>a[href].header-anchor,a[href].header-anchor:focus{color:#aaa}
        h2+.header-anchor{font-size:1.5em}