* {
  box-sizing: border-box;
}

html, body {
  background-color: white;
  color: #333;
  font-family: sans-serif;
  font-size: 16px;
}

@media (prefers-color-scheme: dark) {
  html, body {
    background-color: #333;
    color: white;
  }

  /* Dark mode overrides */
  a, a:visited { color: #2bcff4; }
  a:hover { color: #ddd; }

  code { background: inherit; }
  code.language-plaintext.highlighter-rouge { color: #ccc; border-color: #ccc; }
  pre { border-color: #333; }
  .highlight { background: #333; }
  .highlighter-rouge .highlight { background: #334; }
  .highlight { background: #fff; }
  .highlight .nt { color: #05adff; }

  .site-nav .page-link { color: inherit; }

  .site-header { border-bottom-color: #797979; }
  .site-title, .site-title:visited { color: #cacaca; }
}

body {
  padding: 10px;
  margin: 0;
  max-width: 100vw;
  max-height: 100vh;
}

/* Override main content wrapper width */
.wrapper {
  max-width: -webkit-calc(1440px - (30px * 2));
  max-width: calc(1440px - (30px * 2));
  /* Leave padding/margin etc. in place */
}