/* Global variables. */
/* font import */
@import url('https://fonts.googleapis.com/css2?family=Cossette+Titre:wght@400;700&family=Jersey+10&family=Libre+Barcode+128+Text&family=Libre+Barcode+39+Text&family=Patrick+Hand&family=Roboto+Flex:opsz,wght,XOPQ,XTRA,YOPQ,YTDE,YTFI,YTLC,YTUC@8..144,100..1000,96,468,79,-203,738,514,712&family=Silkscreen:wght@400;700&family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@font-face {
  font-family: "Nintendo DS-BIOS";
  src: url("/_includes/fonts/Nintendo-DS-BIOS.woff") format('woff');

  font-family: "w95fa";
  src: url("/_includes/fonts/w95fa.woff") format('woff');
}
:root {

    /* Set sans-serif & mono fonts */
    --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
      "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica,
      "Helvetica Neue", sans-serif;
    --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  
    /* Default (light) theme */
    --bg: rgb(243, 155, 155);
    --accent-bg: #f5f7ff;
    --text: black;
    --text-light: #585858;
    --border: #black;
    --accent: #4f5274;
  }
  
  /* Dark theme */
  /* @media (prefers-color-scheme: dark) {
    :root {
      --bg: #212121;
      --accent-bg: #2b2b2b;
      --text: #dcdcdc;
      --text-light: #ababab;
      --border: #666;
      --accent: #ffb300;
    }
  } */
  
  * {
    box-sizing: border-box;
  }
  
  html {
    /* Set the font globally */
    font-family: "w95fa";
    scroll-behavior: smooth;
  }

  /* Make the body a nice central block */
  body {
    color: var(--text);
    background: var(--bg);
    background-image: url(/_includes/img/textures/cartographer2.png);
    font-size: 1rem;
    line-height: 1.1;
    /* margin: 0 auto; */
    /* padding: 0 1em; */
    display: flex;
    gap: 20px;
    justify-content: center;
  }

  aside {
    font-family: "Silkscreen";
    background: var(--bg);
    height: min-content;
    width: fit-content;
    top: 60px;
    position: sticky; 
    padding: 8px;
  }

  body img,
  iframe {
    max-width: 100%;
  }

  /* body > header {
    text-align: center;
    padding: 0 0.5rem 2rem 0.5rem;
    box-sizing: border-box;
  }
  
  body > header h1 {
    max-width: 100%;
    margin: 1rem auto;
  } */
  
  /* Format navigation */
  nav {
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
    line-height: 2;
    padding: 1rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    padding-bottom: 2rem;
  }
  
  nav a {
    margin: 1rem 1rem 0 0;
    color: var(--text) !important;
    padding: 0.1rem 1rem;
  }
  
  nav a:hover {
    color: var(--accent) !important;
  }
  
  nav a:last-child {
    margin-right: 0;
  }
  
  /* Reduce nav side on mobile */
  @media only screen and (max-width: 750px) {
    nav a {
      border: none;
      padding: 0;
      color: var(--accent);
      text-decoration: underline;
      line-height: 1;
    }
  }
  
  /* Add a little padding to ensure spacing is correct between content and nav */
  main {
    padding-top: 20px;
    max-width: 700px;
    background: var(--bg);
    background-image: url(/_includes/img/textures/celltower.png);
    padding: 35px;
  }
  
  body > footer {
    margin-top: 4rem;
    padding: 2rem 1rem 1.5rem 1rem;
    color: var(--text-light);
    font-size: 0.9rem;
    text-align: center;
    border-top: 1px solid var(--border);
  }
  
  /* Format headers */
  
  h1 {
    font-size: 5rem;
    font-family: "Libre Barcode 128 Text";
    text-align: center;
    margin-bottom: 0px;
    margin-top: 30px;
  }
  
  h2 {
    font-size: 2.6rem;
    margin-top: 3rem;
  }
  
  /* Reduce header size on mobile */
  @media only screen and (max-width: 720px) {
    h1 {
      font-size: 2.5rem;
    }
  
    h2 {
      font-size: 2.1rem;
    }
  }
  
  /* Format links */
  a,
  a:visited {
    color: var(--accent);
  }
  
  a:hover {
    text-decoration: none;
  }
  .navigation {
    display: flex;
    flex-direction: column;
    background-color: var(--bg)
  }

  @media all and (max-width: 1100px) {
    body {
      flex-direction: column-reverse;
      justify-content: start;
      align-items: center;
      gap: 20px;
      width: 100%;
      padding-left: 8px;
      padding-right: 8px;
    }

    main {
      width: 100%;
    }

    aside {
      width: 100%;
      position: relative;
      top: 0;
    }

    .navigation {
      flex-direction: row;
      gap: 13px;
    }
  }