@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--C-lightblack);
  }

  .hero {
    background-image: url("../media/Hero-Banner-Desktop-darkmode.jpg");
  }

  .portfolio {
    background-image: url("../media/Hero-Banner-Desktop-Portfolio-darkmode.jpg");
  }

  .about {
    background-image: url("../media/Hero-Banner-Desktop-About-darkmode.jpg");
  }

  .contact {
    background-image: url("../media/Hero-Banner-Desktop-Contact-darkmode.jpg");
  }

  .clock,
  .clock2 {
    background-color: rgba(36, 36, 36, 0.8);
    color: var(--C-white);
  }

  .clock p,
  clock2 p,
  .clock-2nd {
    color: var(--C-white);
  }

  header {
    background-color: rgba(36, 36, 36, 0.8);
  }

  .h-logo-img img {
    filter: invert(100%);
  }

  nav li a {
    color: var(--C-white);
  }

  .m-h-txt {
    color: var(--C-white);
  }

  .m-btn-bar {
    background-color: var(--C-white);
  }

  #m-nav-m {
    background-color: rgba(36, 36, 36, 0.8);
  }

  .hero-t {
    background-color: var(--C-black);
  }

  .intro-ib {
    background-color: var(--C-black);
  }

  .intro-ib-txt p {
    color: var(--C-white);
  }

  .intro-ib-txt h1 {
    color: var(--C-white);
  }

  .intro-ib-btns p {
    color: inherit;
  }

  .t-headlines {
    background-color: var(--C-lightblack);
  }

  .t-headlines h1 {
    color: var(--C-white);
  }

  .p-proj-ov-all {
    background-color: var(--C-black);
  }

  .p-proj-ov {
    color: var(--C-white);
  }

  .sticky-card-cont-secondary {
    margin-top: -10px;
    padding-top: 85px;
    background-color: var(--C-lightblack);
    position: relative;
    z-index: 4;
  }

  .sticky-card-secondary {
    background-color: var(--C-lightblack);
    color: var(--C-white);
  }

  .about-article {
    padding-bottom: 140px;
    margin-bottom: 0px;
    position: relative;
    z-index: 5;
  }

  .about-awards {
    background-color: var(--C-black);
    color: var(--C-white);
    position: relative;
    z-index: 3;
  }

  .form-container {
    background-color: var(--C-black);
    color: var(--C-white);
  }

  label {
    color: var(--C-white);
  }

  .form-group input {
    color: var(--C-white);
  }

  .form-group input:focus + label span,
  .form-group textarea:focus + label span,
  .form-group input:not(:placeholder-shown) + label span,
  .form-group textarea:not(:placeholder-shown) + label span {
    background-color: var(--C-black);
  }

  input,
  textarea {
    background-color: var(--C-black);
    color: var(--C-white);
  }

  .contact-main-section {
    background-color: var(--C-black);
  }

  .imprint p,
  .imprint h1,
  .imprint,
  .imprint a {
    color: var(--C-white);
  }

  article,
  article h1,
  article p,
  article a {
    color: var(--C-white);
  }

  .proj-bottom-btn,
  .project-img-gallery,
  article {
    background-color: var(--C-black);
  }

  .portfolio-subdmn-bottom-btn {
    background-color: var(--C-lightblack);
  }

  .notfoundpage-intro,
  .notfoundpage-outro {
    background-color: var(--C-lightblack);
  }

  .notfoundpage-article {
    background-color: var(--C-lightblack);
  }

  .wip-mque {
    background-color: var(--C-DM-orange);
    background: -webkit-linear-gradient(
      -245deg,
      var(--C-DM-orange) 0%,
      var(--C-DM-orange) 30%,
      var(--C-DM-darkorange) 50%,
      var(--C-DM-orange) 80%,
      var(--C-DM-orange) 100%
    );
    background: linear-gradient(
      -245deg,
      var(--C-DM-orange) 0%,
      var(--C-DM-orange) 30%,
      var(--C-DM-darkorange) 50%,
      var(--C-DM-orange) 80%,
      var(--C-DM-orange) 100%
    );
    color: var(--C-white);
  }

  .home-proj-ov::before {
    background: var(--C-darkgrey);
    color: var(--C-white);
  }

  .home-proj-ov:hover::before {
    color: var(--C-white);
  }

  .home-proj-ov:hover {
    color: var(--C-white);
  }

  .sticky-card-intro {
    background-color: var(--C-DM-orange);
  }

  .sticky-card-cont {
    background-color: var(--C-DM-orange);
  }

  .sticky-card {
    background-color: var(--C-DM-orange);
  }

  .sticky-card:nth-child(1) {
    background-color: var(--C-DM-orange);
    background: -webkit-linear-gradient(
      -245deg,
      var(--C-DM-orange) 0%,
      var(--C-DM-orange) 30%,
      var(--C-DM-darkorange) 50%,
      var(--C-DM-orange) 80%,
      var(--C-DM-orange) 100%
    );
    background: linear-gradient(
      -245deg,
      var(--C-DM-orange) 0%,
      var(--C-DM-orange) 30%,
      var(--C-DM-darkorange) 50%,
      var(--C-DM-orange) 80%,
      var(--C-DM-orange) 100%
    );
  }

  .sticky-card:nth-child(2) {
    background-color: var(--C-DM-orange);
    background: -webkit-linear-gradient(
      40deg,
      var(--C-DM-orange) 0%,
      var(--C-DM-orange) 30%,
      var(--C-DM-darkorange) 50%,
      var(--C-DM-orange) 80%,
      var(--C-DM-orange) 100%
    );
    background: linear-gradient(
      40deg,
      var(--C-DM-orange) 0%,
      var(--C-DM-orange) 30%,
      var(--C-DM-darkorange) 50%,
      var(--C-DM-orange) 80%,
      var(--C-DM-orange) 100%
    );
  }

  .sticky-card:nth-child(3) {
    background-color: var(--C-DM-orange);
    background: -webkit-linear-gradient(
      -55deg,
      var(--C-DM-orange) 0%,
      var(--C-DM-orange) 30%,
      var(--C-DM-darkorange) 50%,
      var(--C-DM-orange) 80%,
      var(--C-DM-orange) 100%
    );
    background: linear-gradient(
      -55deg,
      var(--C-DM-orange) 0%,
      var(--C-DM-orange) 30%,
      var(--C-DM-darkorange) 50%,
      var(--C-DM-orange) 80%,
      var(--C-DM-orange) 100%
    );
  }

  .sticky-card:nth-child(4) {
    background-color: var(--C-DM-orange);
    background: -webkit-linear-gradient(
      55deg,
      var(--C-DM-orange) 0%,
      var(--C-DM-orange) 30%,
      var(--C-DM-darkorange) 50%,
      var(--C-DM-orange) 80%,
      var(--C-DM-orange) 100%
    );
    background: linear-gradient(
      55deg,
      var(--C-DM-orange) 0%,
      var(--C-DM-orange) 30%,
      var(--C-DM-darkorange) 50%,
      var(--C-DM-orange) 80%,
      var(--C-DM-orange) 100%
    );
  }

  .t-headlines-K {
    background-color: var(--C-DM-orange);
    background: -webkit-linear-gradient(
      -245deg,
      var(--C-DM-orange) 0%,
      var(--C-DM-orange) 30%,
      var(--C-DM-darkorange) 50%,
      var(--C-DM-orange) 80%,
      var(--C-DM-orange) 100%
    );
    background: linear-gradient(
      -245deg,
      var(--C-DM-orange) 0%,
      var(--C-DM-orange) 30%,
      var(--C-DM-darkorange) 50%,
      var(--C-DM-orange) 80%,
      var(--C-DM-orange) 100%
    );
  }

  .contact-info-section {
    background-color: var(--C-DM-orange);
    background: -webkit-linear-gradient(
      -245deg,
      var(--C-DM-orange) 0%,
      var(--C-DM-orange) 30%,
      var(--C-DM-darkorange) 50%,
      var(--C-DM-orange) 80%,
      var(--C-DM-orange) 100%
    );
    background: linear-gradient(
      -245deg,
      var(--C-DM-orange) 0%,
      var(--C-DM-orange) 30%,
      var(--C-DM-darkorange) 50%,
      var(--C-DM-orange) 80%,
      var(--C-DM-orange) 100%
    );
  }
}


/* Button dark mode theme */

[data-theme="dark"] body {
  background-color: var(--C-lightblack);
}

[data-theme="dark"] .hero {
  background-image: url("../media/Hero-Banner-Desktop-darkmode.jpg");
}

[data-theme="dark"] .portfolio {
  background-image: url("../media/Hero-Banner-Desktop-Portfolio-darkmode.jpg");
}

[data-theme="dark"] .about {
  background-image: url("../media/Hero-Banner-Desktop-About-darkmode.jpg");
}

[data-theme="dark"] .contact {
  background-image: url("../media/Hero-Banner-Desktop-Contact-darkmode.jpg");
}

[data-theme="dark"] .clock,
[data-theme="dark"] .clock2 {
  background-color: rgba(36, 36, 36, 0.8);
  color: var(--C-white);
}

[data-theme="dark"] .clock p,
[data-theme="dark"] .clock2 p,
[data-theme="dark"] .clock-2nd {
  color: var(--C-white);
}

[data-theme="dark"] header {
  background-color: rgba(36, 36, 36, 0.8);
}

[data-theme="dark"] .h-logo-img img {
  filter: invert(100%);
}

[data-theme="dark"] nav li a {
  color: var(--C-white);
}

[data-theme="dark"] .m-h-txt {
  color: var(--C-white);
}

[data-theme="dark"] .m-btn-bar {
  background-color: var(--C-white);
}

[data-theme="dark"] #m-nav-m {
  background-color: rgba(36, 36, 36, 0.8);
}

[data-theme="dark"] .hero-t {
  background-color: var(--C-black);
}

[data-theme="dark"] .intro-ib {
  background-color: var(--C-black);
}

[data-theme="dark"] .intro-ib-txt p {
  color: var(--C-white);
}

[data-theme="dark"] .intro-ib-txt h1 {
  color: var(--C-white);
}

[data-theme="dark"] .intro-ib-btns p {
  color: inherit;
}

[data-theme="dark"] .t-headlines {
  background-color: var(--C-lightblack);
}

[data-theme="dark"] .t-headlines h1 {
  color: var(--C-white);
}

[data-theme="dark"] .p-proj-ov-all {
  background-color: var(--C-black);
}

[data-theme="dark"] .p-proj-ov {
  color: var(--C-white);
}

[data-theme="dark"] .sticky-card-cont-secondary {
  margin-top: -10px;
  padding-top: 85px;
  background-color: var(--C-lightblack);
  position: relative;
  z-index: 4;
}

[data-theme="dark"] .sticky-card-secondary {
  background-color: var(--C-lightblack);
  color: var(--C-white);
}

[data-theme="dark"] .about-article {
  padding-bottom: 140px;
  margin-bottom: 0px;
  position: relative;
  z-index: 5;
}

[data-theme="dark"] .about-awards {
  background-color: var(--C-black);
  color: var(--C-white);
  position: relative;
  z-index: 3;
}

[data-theme="dark"] .form-container {
  background-color: var(--C-black);
  color: var(--C-white);
}

[data-theme="dark"] label {
  color: var(--C-white);
}

[data-theme="dark"] .form-group input {
  color: var(--C-white);
}

[data-theme="dark"] .form-group input:focus + label span,
[data-theme="dark"] .form-group textarea:focus + label span,
[data-theme="dark"] .form-group input:not(:placeholder-shown) + label span,
[data-theme="dark"] .form-group textarea:not(:placeholder-shown) + label span {
  background-color: var(--C-black);
}

[data-theme="dark"] input,
[data-theme="dark"] textarea {
  background-color: var(--C-black);
  color: var(--C-white);
}

[data-theme="dark"] .contact-main-section {
  background-color: var(--C-black);
}

[data-theme="dark"] .imprint p,
[data-theme="dark"] .imprint h1,
[data-theme="dark"] .imprint,
[data-theme="dark"] .imprint a {
  color: var(--C-white);
}

[data-theme="dark"] article,
[data-theme="dark"] article h1,
[data-theme="dark"] article p,
[data-theme="dark"] article a {
  color: var(--C-white);
}

[data-theme="dark"] .proj-bottom-btn,
[data-theme="dark"] .project-img-gallery,
[data-theme="dark"] article {
  background-color: var(--C-black);
}

[data-theme="dark"] .portfolio-subdmn-bottom-btn {
  background-color: var(--C-lightblack);
}

[data-theme="dark"] .notfoundpage-intro,
[data-theme="dark"] .notfoundpage-outro {
  background-color: var(--C-lightblack);
}

[data-theme="dark"] .notfoundpage-article {
  background-color: var(--C-lightblack);
}

[data-theme="dark"] .wip-mque {
  background-color: var(--C-DM-orange);
  background: -webkit-linear-gradient(
    -245deg,
    var(--C-DM-orange) 0%,
    var(--C-DM-orange) 30%,
    var(--C-DM-darkorange) 50%,
    var(--C-DM-orange) 80%,
    var(--C-DM-orange) 100%
  );
  background: linear-gradient(
    -245deg,
    var(--C-DM-orange) 0%,
    var(--C-DM-orange) 30%,
    var(--C-DM-darkorange) 50%,
    var(--C-DM-orange) 80%,
    var(--C-DM-orange) 100%
  );
  color: var(--C-white);
}

[data-theme="dark"] .home-proj-ov::before {
  background: var(--C-darkgrey);
  color: var(--C-white);
}

[data-theme="dark"] .home-proj-ov:hover::before {
  color: var(--C-white);
}

[data-theme="dark"] .home-proj-ov:hover {
  color: var(--C-white);
}

[data-theme="dark"] .sticky-card-intro {
  background-color: var(--C-DM-orange);
}

[data-theme="dark"] .sticky-card-cont {
  background-color: var(--C-DM-orange);
}

[data-theme="dark"] .sticky-card {
  background-color: var(--C-DM-orange);
}

[data-theme="dark"] .sticky-card:nth-child(1) {
  background-color: var(--C-DM-orange);
  background: -webkit-linear-gradient(
    -245deg,
    var(--C-DM-orange) 0%,
    var(--C-DM-orange) 30%,
    var(--C-DM-darkorange) 50%,
    var(--C-DM-orange) 80%,
    var(--C-DM-orange) 100%
  );
  background: linear-gradient(
    -245deg,
    var(--C-DM-orange) 0%,
    var(--C-DM-orange) 30%,
    var(--C-DM-darkorange) 50%,
    var(--C-DM-orange) 80%,
    var(--C-DM-orange) 100%
  );
}

[data-theme="dark"] .sticky-card:nth-child(2) {
  background-color: var(--C-DM-orange);
  background: -webkit-linear-gradient(
    40deg,
    var(--C-DM-orange) 0%,
    var(--C-DM-orange) 30%,
    var(--C-DM-darkorange) 50%,
    var(--C-DM-orange) 80%,
    var(--C-DM-orange) 100%
  );
  background: linear-gradient(
    40deg,
    var(--C-DM-orange) 0%,
    var(--C-DM-orange) 30%,
    var(--C-DM-darkorange) 50%,
    var(--C-DM-orange) 80%,
    var(--C-DM-orange) 100%
  );
}

[data-theme="dark"] .sticky-card:nth-child(3) {
  background-color: var(--C-DM-orange);
  background: -webkit-linear-gradient(
    -55deg,
    var(--C-DM-orange) 0%,
    var(--C-DM-orange) 30%,
    var(--C-DM-darkorange) 50%,
    var(--C-DM-orange) 80%,
    var(--C-DM-orange) 100%
  );
  background: linear-gradient(
    -55deg,
    var(--C-DM-orange) 0%,
    var(--C-DM-orange) 30%,
    var(--C-DM-darkorange) 50%,
    var(--C-DM-orange) 80%,
    var(--C-DM-orange) 100%
  );
}

[data-theme="dark"] .sticky-card:nth-child(4) {
  background-color: var(--C-DM-orange);
  background: -webkit-linear-gradient(
    55deg,
    var(--C-DM-orange) 0%,
    var(--C-DM-orange) 30%,
    var(--C-DM-darkorange) 50%,
    var(--C-DM-orange) 80%,
    var(--C-DM-orange) 100%
  );
  background: linear-gradient(
    55deg,
    var(--C-DM-orange) 0%,
    var(--C-DM-orange) 30%,
    var(--C-DM-darkorange) 50%,
    var(--C-DM-orange) 80%,
    var(--C-DM-orange) 100%
  );
}

[data-theme="dark"] .t-headlines-K {
  background-color: var(--C-DM-orange);
  background: -webkit-linear-gradient(
    -245deg,
    var(--C-DM-orange) 0%,
    var(--C-DM-orange) 30%,
    var(--C-DM-darkorange) 50%,
    var(--C-DM-orange) 80%,
    var(--C-DM-orange) 100%
  );
  background: linear-gradient(
    -245deg,
    var(--C-DM-orange) 0%,
    var(--C-DM-orange) 30%,
    var(--C-DM-darkorange) 50%,
    var(--C-DM-orange) 80%,
    var(--C-DM-orange) 100%
  );
}

[data-theme="dark"] .contact-info-section {
  background-color: var(--C-DM-orange);
  background: -webkit-linear-gradient(
    -245deg,
    var(--C-DM-orange) 0%,
    var(--C-DM-orange) 30%,
    var(--C-DM-darkorange) 50%,
    var(--C-DM-orange) 80%,
    var(--C-DM-orange) 100%
  );
  background: linear-gradient(
    -245deg,
    var(--C-DM-orange) 0%,
    var(--C-DM-orange) 30%,
    var(--C-DM-darkorange) 50%,
    var(--C-DM-orange) 80%,
    var(--C-DM-orange) 100%
  );
}