@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #F0F3F5;
    --background-color: #0d0a0b;
    --outline-color: #D7DBDD;
    --button-bg-color: #F0F3F5;
    --button-text-color: #202F33;
    --link-hover-bg: rgba(0, 82, 197, 0.8);
    --link-hover-color: #ffffff;
    --link-bg: rgba(8, 50, 109, 0.37);
    --link-color: #ddecff;
    --link-shadow: 1px 1px 0px rgba(255, 255, 255, 0.1);
    --header-shadow: 0px 0px 20px #202F33;
    --support-link-color: #266DD3;
    --support-link-hover: 2px solid #266DD3;
    --project-bg: rgba(255, 255, 255, 0.85);
    --mix-blend-mode: plus-lighter;
  }

  html,
  body,
  article {
    color: var(--text-color);
    background-color: var(--background-color);
  }

  .logo span {
    outline: 3px var(--outline-color) solid;
  }

  .label {
    mix-blend-mode: var(--mix-blend-mode);
  }

  header::after {
    background-image: url("../img/javo.jpg");
    -webkit-filter: brightness(50%);
    filter: brightness(90%);
  }

  section::before {
    background: linear-gradient(to bottom,
        hsla(340, 12%, 5%, 0) 0%,
        hsla(340, 12%, 5%, 0.013) 8.1%,
        hsla(340, 12%, 5%, 0.049) 15.5%,
        hsla(340, 12%, 5%, 0.104) 22.5%,
        hsla(340, 12%, 5%, 0.175) 29%,
        hsla(340, 12%, 5%, 0.259) 35.3%,
        hsla(340, 12%, 5%, 0.352) 41.2%,
        hsla(340, 12%, 5%, 0.45) 47.1%,
        hsla(340, 12%, 5%, 0.55) 52.9%,
        hsla(340, 12%, 5%, 0.648) 58.8%,
        hsla(340, 12%, 5%, 0.741) 64.7%,
        hsla(340, 12%, 5%, 0.825) 71%,
        hsla(340, 12%, 5%, 0.896) 77.5%,
        hsla(340, 12%, 5%, 0.951) 84.5%,
        hsla(340, 12%, 5%, 0.987) 91.9%,
        hsl(340, 12%, 5%) 100%);
    height: 75%;
    mix-blend-mode: multiply;
  }

  section,
  footer {
    background-color: hsl(340, 12%, 5%);
  }

  header main {
    text-shadow: 0 0 30px rgba(13, 10, 11, 1);
  }

  header p.buttons a,
  header p.buttons a:visited {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
  }

  header p.buttons svg {
    color: var(--button-text-color);
  }

  .about .nav .logo svg {
    fill: var(--text-color);
  }

  footer .buttons a,
  footer .buttons a:visited,
  .about .buttons a,
  .about .buttons a:visited,
  .about .buttons button#theme-toggle,
  .about .buttons button#theme-toggle:visited {
    background-color: rgba(240, 243, 245, 0.15);
    color: var(--text-color);
  }

  footer .buttons a:hover {
    background-color: rgba(240, 243, 245, 0.3);
    color: var(--text-color);
    fill: var(--text-color);
  }

  footer .buttons a svg,
  footer .nav .buttons a:hover svg,
  .about .nav .buttons a:hover svg,
  .about .nav .buttons a svg,
  .about .nav .buttons button#theme-toggle:hover svg,
  .about .nav .buttons button#theme-toggle svg {
    color: var(--text-color);
    fill: var(--text-color);
  }

  .about .nav .buttons a.active:hover svg,
  .about .nav .buttons a.active svg {
    fill: var(--button-text-color);
  }

  .buttons svg,
  button#theme-toggle svg {
    color: var(--text-color);
    fill: var(--text-color);
  }

  .nav .buttons svg,
  button#theme-toggle svg {
    color: var(--button-text-color);
    fill: var(--button-text-color);
  }

  header h1 a:hover {
    background: var(--link-hover-bg);
    color: var(--link-hover-color);
  }

  header h1 a,
  header h1 a:visited {
    background: var(--link-bg);
    color: var(--link-color);
    text-shadow: var(--link-shadow);
  }

  header h1 {
    text-shadow: var(--header-shadow);
  }

  .support a {
    border-bottom: 2px solid transparent;
    color: var(--support-link-color);
  }

  .support a:hover {
    border-bottom: var(--support-link-hover);
  }

  /* DARK MODE BOXES */
  .project>a {
    background: var(--project-bg);
    mix-blend-mode: var(--mix-blend-mode);
  }

  .rocketds {
    background-color: #0E1231;
    outline: solid 1px #1D1D69;
  }

  .rocketds a,
  .rocketds a:visited {
    color: #1D1D69;
  }

  .fintual {
    background-color: #001430;
    outline: solid 1px #003074;
  }

  .fintual a,
  .fintual a:visited {
    color: #003074;
  }

  .zesty {
    background-color: #0b0033;
    outline: solid 1px #210680;
  }

  .zesty a,
  .zesty a:visited {
    color: #210680;
  }

  .cooklist {
    background-color: #002621;
    outline: solid 1px #033e35;
  }

  .cooklist a,
  .cooklist a:visited {
    color: #002626;
  }

  .mercado {
    background-color: #000326;
    outline: solid 1px #101771;
  }

  .recylink {
    background-color: #001726;
    outline: solid 1px #032a43;
  }

  .recylink a,
  .recylink a:visited {
    color: #001726;
  }

  .mejorate {
    background-color: #002626;
    outline: solid 1px #034342;
  }

  .mejorate .label,
  .mejorate h2,
  .mejorate p {
    color: white;
  }

  .mejorate a,
  .mejorate a:visited {
    color: #002626;
  }

  .at {
    background-color: #001b26;
    outline: solid 1px #033143;
  }

  .at .label,
  .at h2,
  .at p {
    color: white;
  }

  .at a,
  .at a:visited {
    color: #009cff;
  }

  .rendalo {
    background-color: #261100;
    outline: solid 1px #432003;
  }

  .rendalo .label,
  .rendalo h2,
  .rendalo p {
    color: white;
  }

  .rendalo a,
  .rendalo a:visited {
    color: #432003;
  }

  .karu {
    background-color: #000c26;
    outline: solid 1px #0a2765;
  }

  .fala {
    background-color: #1a2600;
    outline: solid 1px #2f4303;
    color: white;
  }

  .fala h2,
  .fala .label {
    color: white;
  }

  .fala a,
  .fala a:visited {
    color: #1a2600;
  }

  .tdoee {
    background-color: #001526;
    outline: solid 1px #032743;
  }

  .oiplay {
    background-color: #000b26;
    outline: solid 1px #0a2365;
  }

  .oiplay a,
  .oiplay a:visited {
    color: #0a2365;
  }

  .unight {
    background-color: #26001b;
    outline: solid 1px #430331;
  }

  .unight a,
  .unight a:visited {
    color: #430331;
  }

  .about .buttons a.active,
  .about .buttons a.active:hover,
  .about .buttons button#theme-toggle.active,
  .about .buttons button#theme-toggle.active:hover {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
  }

  .about .buttons .active>svg {
    fill: var(--button-text-color);
    background-color: transparent;
  }

  header p.buttons a:hover {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
  }

  header main .buttons a svg {
    fill: var(--button-text-color);
    color: var(--button-text-color);
  }

  header main .buttons a:hover svg {
    fill: var(--button-text-color);
    color: var(--button-text-color);
  }
}