html {
  color-scheme: light dark;
}

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  background-color: #ffffff;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 102px;
}

.published {
  font-size: small;
  color: rgba(0, 0, 0, 0.35);
}

#wrapper > footer.wrapper:not(.style1) {
  padding-top: 3rem;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }

  body {
    background: #16181d;
    background-color: #16181d;
    color: #f2f2f2;
  }

  a,
  strong,
  b,
  h1, h2, h3, h4, h5, h6,
  input, select, textarea {
    color: #f2f2f2;
  }

  a:hover {
    color: #47D3E5;
  }

  input[type="submit"],
  input[type="reset"],
  input[type="button"],
  button,
  .button {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    color: #f2f2f2 !important;
  }

  .icon.style2:before {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  }

  .sticky {
    background-color: #16181d;
  }

  .published {
    color: rgba(255, 255, 255, 0.55);
  }

  .wrapper.style2 > .inner {
    background-color: #22262c;
    color: #f2f2f2;
  }

  .items.style1 > *,
  .items.style2,
  .items.style2 > * {
    border-color: rgba(255, 255, 255, 0.2);
  }

  #wrapper.divided > *:not(.invert) {
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
  }

  /* Black wordmarks sit on transparent images. Invert keeps the orange dot. */
  #banner > .content > img,
  header.sticky img,
  .wrapper.style2 .content > img {
    filter: invert(1) hue-rotate(180deg);
  }
}