@media print {
  header, footer {
    display: none;
  }

  #content {
    max-width: 100%;
  }

  article {
    padding: 0;
  }
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --blue: rgb(62, 66, 67);
    --linkblue: rgb(95, 186, 205);
    --cleanblue: rgb(95, 139, 169);
    --borderblue: rgb(65, 85, 99);
    --headerborderblue: rgb(81, 83, 82);
    --black: rgb(205, 197, 187);
    --white: rgb(51, 51, 50);
    --red: rgb(104, 50, 41);
    --orange: rgb(125, 89, 47);
    --yellow: rgb(141, 128, 55);
    --green: rgb(62, 107, 67);
    --grey: #aaa;
    --me-border: rgb(81, 83, 82);
    --blog-link: rgb(220, 95, 89);
  }

  header, footer {
    color: var(--black);
  }

  code {
    background-color: rgb(36, 36, 35);
  }

  .pub li {
    border-color: rgb(68, 67, 64);
    border-left-color: var(--green);
  }

  .pub em, .date {
    color: rgb(147, 141, 129);
  }

  #post-list .post {
    background-color: #1a1a1a;
    box-shadow: rgb(36, 36, 35) 1px 1px 3px 3px;
    border-top-color: var(--borderblue);
  }

  #post-list .date {
    background-color: rgb(34, 34, 33);
  }

  #post-list .date a, #post-list .date a:hover {
    color: var(--black);
  }

  blockquote, pre {
    color: rgb(171, 161, 150);
    background-color: rgb(36, 36, 35);
  }

  pre .syntax-comment, pre .comment {
    color: rgb(151, 161, 171);
  }

  pre .syntax-string, pre .string {
    color: rgb(204, 150, 141);
  }

  pre .syntax-special, pre .special {
    color: rgb(225, 189, 147);
  }

  p.warning {
    background-color: rgb(55,44,40);
    border-color: var(--red);
  }

  h1 {
    color: var(--borderblue);
  }

  div.theorem, div.property {
    background-color: #1a1a1a;
    box-shadow: rgb(36, 36, 35) 1px 1px 3px 3px;
  }

  div.theorem .statement, div.property .name {
    background: rgb(86, 86, 84);
  }

  table.even-odd tr:nth-child(2n) td, thead, tfoot {
    background: rgb(86, 86, 84);
  }

  td, th, table {
    border-color: rgb(88, 87, 84);
  }

  p.important {
    background-color: #655545;
  }
}

@media screen and (max-width: 980px) { 
  #page {
    display: block;
  }
  header {
    margin-bottom: 0;
  }
  #menu {
    border: none;
    background: #9ebed9;
    width: auto;
    margin: 0;
  }
  #menu ul {
    text-align: center;
  }
  #menu ul li {
    display: inline-block;
    margin: 0 5px;
  }
  #menu ul li:first-child {
    display: none;
  }
  #icon-holder {
    margin: 0;
  }
  #menu ul a:hover {
    color: inherit;
    background: none;
  }
  .pub li {
    width: auto;
  }
}

@media screen and (max-width: 800px) {
  header {
    text-align: right;
    background: none;
    border: none;
    padding: 0;
  }
  #space-holder {
    display: block;
    background-color: var(--blue);
    background-image: url('/images/chibi.png');
    background-repeat: no-repeat;
    background-size: 103px 214px;
    border-bottom: 10px solid var(--borderblue);
    margin: 0;
    height: 120px;
  }
  #hamburger-label {
    display: block;
    color: var(--black);
    position: absolute;
    right: 2em;
    /* put in the middle */
    top: 44px;
  }
  #hamburger-label img {
    height: 32px;
  }
  #hamburger ~ p {
    display: none;
  }
  #hamburger:checked ~ p {
    display: block;
  }
  header p {
    text-align: center;
  }
  header p a {
    display: block;
    background: #ddd;
    color: var(--black);
  }
  header p a:hover {
    background: var(--white);
  }
  header p#lang a {
    display: inline;
  }
  header p#lang {
    text-align: center;
    font-size: 1em;
  }
  #button a {
    margin: 0;
  }
  #button {
    border-bottom: 5px solid #ddd;
  }
  #icon-holder img {
    background: none;
  }
}

@media screen and (max-width: 800px) and (prefers-color-scheme: dark) { 
  #button {
    border-bottom: none;
  }

  header p a {
    background: var(--white);
  }
}