:root {
    --background: #171616;
    --background2: #0f0d0d;

    --foreground: #b1b1b1;
    --foreground2: #666565;
    --foreground-link: #9951d5;

    --body-margins: 25%;

    --font: Kode Mono;
    --font-size: 14px;
  }

body {
  background-color: var(--background);
  color: var(--foreground);
  margin: 0px;
  margin-left: var(--body-margins);
  margin-right: var(--body-margins);
  font-family: var(--font);
  font-size: var(--font-size);
  
}

img {
  max-width: 100%;
}

.flex {
    display: flex;
  }

hr {
  color: var(--foreground);
}

a {
  color: var(--foreground-link);
  font-style: italic;
}

.cdblk {
  padding: 10px;
  background-color: var(--background2);
  width: 100%;
}

.cdblk-m {
  padding: 3px;
  color: var(--foreground2);
  background-color: var(--background2);
  width: 100%;
  font-style: italic;
}

/* content */

.nav {
  padding-left: 0px;
}

.nav li {
  display: inline-flex;
}

.nav a {
  text-decoration: none;
  font-style: normal;
}

.dhid {
  display: none;
}


.systems {
  width: 50%;
}



/* mobile scaling */

@media only screen and (device-width: 1280px),
only screen and (max-width:1280px) {
  
  :root {
    --body-margins: 10%;
  }

  .flex {
    display: block;
    word-wrap: normal;
  }
  
  .dhid {
    display: inherit;
  }

  .mhid {
    display: none;
  }

  .m-codeblock {
    font-size: 9px;
  }

  .systems {
    width: 100%;
  }




}


/* Font  */

@font-face {
  font-family: "Kode Mono";
  src: url('assets/fonts/kode-mono-fonts/fonts/ttf/KodeMono-Regular.ttf');

}

@font-face {
  font-family: "Kode Mono";
  src: url('assets/fonts/kode-mono-fonts/fonts/ttf/KodeMono-Bold.ttf');
       font-weight: bold;
}