:root {
  --color-primary: #993600;
  --color-bg: #000;
  --color-fg: #fff;
  --color-anchor: #FFA500;
  --color-primary: #e67200;
  --color-anchor-hover: #e67200;
  --mark-bg: #e5a50a;
  --gray-95: #f2f2f2;
  --gray-90: #e5e5e5;
  --gray-85: #d9d9d9;
  --gray-80: #cccccc;
  --gray-75: #bfbfbf;
  --gray-70: #b3b3b3;
  --gray-65: #a6a6a6;
  --gray-60: #999999;
  --gray-55: #8c8c8c;
  --gray-50: #7f7f7f;
  --gray-45: #737373;
  --gray-40: #666666;
  --gray-35: #595959;
  --gray-30: #4d4d4d;
  --gray-25: #404040;
  --gray-20: #333333;
  --gray-15: #262626;
  --gray-10: #1a1a1a;
  --gray-05: #0f0f0f;
}


@font-face {
  font-family: "sans-regular";
  font-weight: 400;
  src: url("/fonts/Open_Sans/OpenSans-Regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "sans-bold";
  font-weight: 700;
  src: url("/fonts/Open_Sans/OpenSans-Bold.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "mono-regular";
  font-weight: 400;
  src: url("/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "mono-bold";
  font-weight: 700;
  src: url("/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.woff2") format("woff2");
  font-display: swap;
}

/* serif, sans-serif, monospace, cursive and fantasy */
body {
  margin: 0;
  font-family: 'sans-regular', sans;
  font-size: 16px;
  line-height: 1.5;
  background-color: var(--color-bg);
  color: var(--color-fg);
}

pre {
  word-wrap: normal;
  overflow-x: auto;
  white-space: pre;
}

code, kbd, samp {
  font-family: 'mono-regular', monospace;
  /*white-space: pre-wrap*/
}
code b, kbd b, samp b {
  font-family: 'mono-bold', monospace;
}

b, strong {
  font-family: "sans-bold";
}

dt {
  margin: 1rem auto;
  font-family: 'sans-bold';
}


h1, h2, h3, h4, h5, h6 {
  color: var(--color-primary);
}

ul {
  padding-left: 1rem;
}

mark {
  background-color: var(--mark-bg);
  padding: 0 .2rem;
}

a,
a:visited,
a:focus {
  color: var(--color-anchor);
}
a:hover {
  color: var(--color-anchor-hover);
}

p {
  /*line-height: 1.5rem;*/
}

li {
  /*margin-top: .5rem;*/
}

label {
  display: block;
}

fieldset {
  padding: 1rem;
  border-color: var(--gray-45);
}

legend {
  padding: .8rem;
}

textarea {
  padding: .8rem;
  background: var(--gray-15);
  font-family: 'mono', monospace;
  border: 1px solid var(--gray-25);
  width: 100%;
  color: white;
}

button {
  border-radius: .5rem;
  padding: .5rem;
}

table,
td,
th,
tr {
  border: 1px solid var(--gray-95);
}

table {
  border-collapse: collapse;
}

td, th {
  padding: 1rem;
}

th {
  background-color: var(--gray-15);
}

/*id and classes*/

#page-header,
#page-main,
#page-footer {
  margin: 0;
  /*border: 1px solid red;*/
}

#page-header {
  /*background-color: green;*/
}

#main-content {
  padding: 1.5rem;
}


#page-footer {
  color: var(--gray-25);
  border-top: 2px solid var(--gray-30);
  /*margin-top: 1rem;*/
  padding-top: 2rem;
  text-align: center;
}

#page-footer .toco-auto {
  margin: 1rem auto;
}

#site-name {
  /*padding: 0.7rem;*/
  color: var(--gray-85);
  font-family: "mono-bold";
  display: inline-block;
  margin: .4rem 0;
  padding: 0;
}


#first-line {
  background-color: black;
  padding: .3rem 1.5rem;
}

#main-menu {
  width: 100%;
  padding: .3rem 1.5rem;
}

/* hamburger menu */

.menu-icon {
  color: #000;
  margin-top: .5rem;
  margin-right: .5rem;
  position: absolute;
  padding: 0;
  right:0;
}
.menu-icon a {
  text-decoration: none;
  display: none;
}

/* main navigation */


.main-nav {
  margin: 0;
  padding: 0;
}
.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  /*flex-grow: initial;*/
}


.main-nav ul li {
  padding: .4rem 0;
  display: block;
  flex: 1 1 100%;
  text-align: left;
}

.main-nav {
  display: none;
}
.main-nav.expand {
  display: block;
}

.main-nav.expand a {
  text-align: left;
  display: block;
  flex: 1 1 100%;
}

.gut > * {
  padding: 0 .5rem;
}

article code {
  background-color: var(--gray-75);
}

#article-footer {
  margin-top: 3rem;
  border-top: 1px solid var(--gray-30);
}

@media only screen and (min-width: 80em) { /* min-width 1280px, large screens */
  body {
    font-size: 1.2rem;
    line-height: 2rem;
  }

  #page-aside {
    position: sticky;
  }
  a.menu-icon {
    display: none;
  }

  #first-line {
    padding: .5rem 3rem;
  }

  #main-menu {
    padding: .5rem 3rem;
  }

  .main-nav ul li:first-child {
    padding-left: 0;
    margin-left: 0;
  }

  .main-nav ul li {
    font-size: 1.6rem;
    flex: 0 1 auto;
    align-items: flex-start;
    padding: 1.2rem 2rem;
  }

  .main-nav {
    /*flex-wrap: nowrap;*/
    display: block;
  }
  .main-nav.expand a {
    text-align: left;
    display: inline-block;
    flex: 0 1 auto;
  }
  #page-sidebar {
    border-left: 2px solid var(--color-primary);
  }

  #main-content {
    padding: 3rem;
  }

}


@media (prefers-color-scheme: dark) {

  :root {
    --color-bg: #000;
    --color-fg: #fff;
    --color-primary: #e67200;
    --color-anchor: #FFA500;
    --color-anchor-hover: #e67200;
  }
  body {
    background-color: var(--gray-10);
  }

  #page-main {
  }
  #page-footer {
    color: var(--gray-60);
  }
  #site-name {
    color: var(--gray-85);
  }


  article code {
    background-color: var(--gray-25);
  }

}

body {
  background-color: var(--gray-10);
}

#page-main {
}
#page-footer {
  color: var(--gray-60);
}
#site-name {
  color: var(--gray-85);
}


article code {
  background-color: var(--gray-25);
}