/* Global variables. */

  @font-face {
    font-family:"TT2020";
    src: url("/css/fonts/TT2020Base-Regular.woff2") format("woff2");
    font-style:normal;
    font-display:block
  }
  @font-face {
    font-family:"TT2020";
    src: url("/css/fonts/TT2020Base-Italic.woff2") format("woff2");
    font-style:italic;
    font-display:block
  }
  @font-face {
    font-family:"TT2020";
    src: url("/css/fonts/TT2020StyleE-Italic.woff2") format("woff2");
    font-weight:600;
    font-style:italic;
    font-display:block
  }

  :root {
    --font-mono: "TT2020";
    --font-italic: "TT2020"; 
  
    /* Default (light) theme */

    --bg: #fff0f5;
    --accent-bg: #fffcfd;
    --text: #333;
    --text-light: #494949;
    --border: #d8dae1;
    --accent: #ff0069;
  
  }

  ::selection {
    background: #ffc4d8;
  }

 /* Dark theme */

  @media (prefers-color-scheme: dark) {
  :root {
    --bg: #3d121f;
    --accent-bg: #6e0a2a;
    --text: #ffc4d8;
    --text-light: #ff91b6;
    --border: #794a59;
    --accent: #ff398b;

  ::selection {
    background: #6e0a2a;
  }
  }

  img {
    opacity: 85%;
  }
  }

  * {
    box-sizing: border-box;
  }

  
  html {

  /* Set the font globally */

  font-family: var(--font-mono);
  scroll-behavior: smooth;
  }
  
  /* Make the body a nice central block */

  body {
    color: var(--text);
    background: var(--bg);
    font-size: 1.3rem;
    line-height: 1.5;
    margin: auto;
    margin-top: -5.5rem;
    max-width: 43em;
    padding: 0 1em;
    letter-spacing: 0.01rem;
  }
  
  body > header {
    text-align: left;
    text-decoration: none;
    padding: 2rem 0.5rem 0rem 0.5rem;
    margin: 0 -12rem;
    box-sizing: border-box;
  }
  
  body > header h1 {
    max-width: 100%;
    margin: 5rem auto;
    text-decoration: none;
    color: var(--text-light);
  }

  #keename a{
    color: var(--text-light);
    text-decoration: none;
    transition: color .25s;
    position: static;
    max-width: fit-content;
  }

  #keename a:hover {
    color: var(--accent);
    transition: color .25s;
  }

  body > main {
    margin: -16.5rem 0 0 5rem;
  }

  body a {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1.5px;
    color: var(--text);
    transition: ease .15s;
  }

  body a:hover {
    color: var(--accent);
    transition: ease .15s;
  }

  .bloglist {
  list-style: none;
  margin-left: -2.5rem;
  position: relative;
  top: -10rem;
  }

  .audiobloglist {
    list-style: none;
    margin-left: -2.5rem;
  }

  h6.post-meta {
    display: block;
    margin-top: 10px;
    margin-bottom: 40px;
  }

  .kofiframe {
    display: block;
    justify-content: center;
  }

  blockquote {
    border-left: 2px solid var(--accent);
    padding-left: 1.5rem;
    margin-left: 2rem;
  }

  .footnotes {
    padding-top: 0.5rem;
  }

  .tip {
    border: solid 2px var(--accent);
    background-color: var(--bg);
    border-radius: 10px;
    max-width: 80%;
    margin: 2rem auto 2rem auto;
    padding: 1rem 1rem 1rem 1rem;
    text-align: center;
    box-shadow: 3.3px 10.1px 10.1px hsl(0deg 0% 0% / 0.30);
    transition: .3s ease-in-out;
  }

  .tip:hover {
    border: solid 2px #ff86b8;
    background-color: var(--accent-bg);
    transition: .3s ease-in-out;
    box-shadow: 6.6px 13.1px 13.1px hsl(0deg 0% 0% / 0.30);
  }

  .kofibutton {
    display: block;
    text-align: center;
  }

  .subnav {
    display: flex;
    justify-content: center;
    margin-top: -5rem;
    margin-bottom: 1rem;
  }

  .subnav ul {
    padding-left: 0px;
  }

  .subnav li{
    display: inline;
    list-style: none;
  }

  sup {
    line-height: 1;
  }
  
  /* Format navigation */

  aside {
    font-size: 1rem;
    max-width: 25%;
    margin: auto;
    border: solid 2px var(--accent);
    padding: 1rem;
    border-radius: 10px;
    position: relative;
    left: -33.5rem;
    top: 3.5rem;
    box-shadow: 3.3px 10.1px 10.1px hsl(0deg 0% 0% / 0.30);
    transition: .3s ease-in-out;
  }

  aside:hover {
    border: solid 2px #ff86b8;
    background-color: var(--accent-bg);
    transition: .3s ease-in-out;
    box-shadow: 6.6px 13.1px 13.1px hsl(0deg 0% 0% / 0.30);
  }

  #navprime {
    font-size: 1.1rem;
    position: relative;
    line-height: .5;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    border-right: 1px solid var(--border);
    padding-bottom: 15px;
    top: -4rem;
    left: -51.5rem;
  }

  #navprime a {
    margin: 1rem 1rem 0 0;
    text-decoration: underline;
  }

  /* Add a little padding to ensure spacing is correct between content and nav */

  main {
    padding-top: 1.5rem;
  }
  
  body > footer {
    margin: 4rem 0 0 5rem;
    padding: 2rem 0 0 0;
    color: var(--text-light);
    font-size: 0.9rem;
    text-align: center;
    border-top: 1px solid var(--border);
  }
  
  /* Format text */

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight:600;
    margin:1.5rem 0;
    font-style:italic;
    font-family:var(--font-italic);
    color: var(--text-light);
  }

  #keename {
    font-size: 3.6rem;
  }

  h1 {
    font-size: 3rem;
  }
  
  h2 {
    font-size: 2.6rem;
    margin-top: 3rem;
    margin-bottom: 5rem;
    text-wrap: balance;
  }

  .post-title {
    margin-bottom: 1rem;
  }

  h3 {
    font-size: 1.6rem;
  }

  h4 {
    padding-bottom: 2rem;
    margin-top: -3rem;
  }

  h6 {
    font-size: 1rem;
  }

  p em {
    line-height: 1.2;
    font-size: 1.2rem;
  }

  ul em {
    line-height: 1;
    font-size: 1.2rem;
  }

  ol em {
    line-height: 1;
    font-size: 1.2rem;
  }

  code {
    font-size: 1rem;
    background-color: var(--accent-bg);
    border: 2px solid var(--accent-bg);
    border-radius: 3px;
  }
  
  .metadate {
    margin-bottom: 5rem;
    font-style:italic;
    font-family:var(--font-italic);
    font-weight: 600;
    font-size: 1rem;
  }

  .postlist-meta {
    margin-bottom: 3.5rem;
    font-style:italic;
    font-family:var(--font-italic);
    font-weight: 600;
    font-size: 1rem;
  }

  .footnotes {
    font-size: 1rem;
  }

  .footnote-ref a{
    font-size: 0.8rem;
    text-decoration: none;
    color: var(--accent);
  }

  .footnote-ref a:hover{
    text-decoration: underline;
  }

  .footnotes em{
    font-size: 0.9rem;
  }

  a.footnote-backref {
    font-size: 0.8rem;
    text-decoration: none;
    color: var(--accent);
  }

  a.footnote-backref:hover{
    text-decoration: underline;
  }

  .imgcap {
    font-weight:600;
    font-size: 1rem;
    margin:1.5rem 0;
    font-style:italic;
    font-family:var(--font-italic);
    color: var(--text-light);
    text-align: center;
  }

  hr {
    border: 1px solid var(--border);
  }

  /* Images!!! */

  img {
    display: block;
    margin: 0 auto;
    padding: 1rem 0 0 0;
    max-width: 75%;
  }

  /* Embeds!!!!!!!!!!!!!!! */

  iframe.youtube {
    padding-top: 1rem;
    padding-bottom: 1rem;
    aspect-ratio: 16 /9 ;
    width: 100%;
  }

  iframe.mastodon-embed {
    display: block;
    margin: 0 auto;
    padding: 1rem 0 1rem 0;
  }

  audio {
    filter: sepia(100%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 100%;
    height: 40px;
    border-radius: 5px;
  }

  /* EDGE CASE SCREEN RESOLUTIONS */
  
  @media only screen and (max-width: 1250px) {
    main {
      width: 100%;
      margin: 0 !important;
      padding-top: 0.5rem !important;
      }
  
    footer {
      width: 100%;
      margin: 0 !important;
      margin-top: 4rem !important;
      }
  
    body > header {
      position: static;
      width: 100%;
      padding-top: 2rem;
      margin: -1rem;
      }
  
    #keename {
      position: static;
      display: flex;
      align-items: flex-start;
      margin: 5rem 0 2rem 0;
      }
  
    #navprime {
      position: static;
      display: flex;
      flex-direction: row;
      border-right: 0;
      border-bottom: 1px solid var(--border);
      padding-bottom: 25px;
      width: 100%;
      }

    .bloglist {
        top: 2rem
      }

    aside {
        font-size: 1rem;
        max-width: 25%;
        text-wrap: wrap;
        position: relative;
        left: 0rem;
        top: 1rem;
      }
  }

  
  
  /* FOR ALL THE FUCKIN' SMALL SCREENS. PLEASE DETACH FROM YOUR PHONE (this is advice for me) */
  
  @media only screen and (max-width: 720px) {
    #keename {
      font-size: 2.8rem;
    }

    #navprime {
      position: static;
      margin-top: -5rem;
      font-size: 1rem;
      display: flex;
      flex-direction: column;
    }
    
    h1 {
      font-size: 2.6rem;
    }
  
    h2 {
      font-size: 1.9rem;
    }

    h3 {
      font-size: 1.3rem;
    }

    h6 {
      font-size: 0.8rem;
    }

    body {
      font-size: 1.1rem;
    }

    p em {
      font-size: 1rem;
    }

    ul em {
      font-size: 1rem;
    }

    ol em {
      font-size: 1rem;
    }

    code {
      font-size: 0.9rem;
    }

    .footnotes {
      font-size: 1rem;
    }

    img {
      max-width: 80%;
    }

    .imgcap {
      font-size: 0.8rem;
    }

    .postlist-meta {
      margin-bottom: 3.5rem;
      font-style:italic;
      font-family:var(--font-italic);
      font-weight: 600;
      font-size: 0.9rem;
    }

    .metadate {
      margin-bottom: 5rem;
      font-style:italic;
      font-family:var(--font-italic);
      font-weight: 600;
      font-size: 0.9rem;
    }

    ul {
      margin-left: -1rem;
    }

    aside {
      font-size: 1rem;
      max-width: 50%;
    }
    
  }
  
  /* Format links (maybe? Am I even gonna use this???)*/