/*  ┌─────────────────────────────────────────────────────────────────────────────────────────┐  */
/*  │                               Jonas-Klose.de Colorpalett                                │  */
/*  └─────────────────────────────────────────────────────────────────────────────────────────┘  */


/*
    Farben-Standarts:
      Dark:
        Text:           #f2f2f2
        Background:     #121212
        Standart-blau:  #0066FF
      Light:
        Text:           #0d0d0d
        Background:     #ededed
        Standart-blau:  #0066FF
*/


/*  ┌──────────────┐  */
/*  │  Background  │  */
/*  └──────────────┘  */
body {
  color: #f2f2f2;
  background: #121212;
}

.sctn-discount {
  background: #2f21df;
}

@media (prefers-color-scheme: light) {
  body {
    color: #0d0d0d;
    background: #ededed;
  }

  .sctn-discount {
    background: #809fff;
  }
}


/*  ┌──────────┐  */
/*  │  Header  │  */
/*  └──────────┘  */
.header h2, .header p {
  color: #f2f2f2;
  text-shadow: #000 1px 0 10px;
}


/*  ┌─────────────────────────┐  */
/*  │  Navigation and Footer  │  */
/*  └─────────────────────────┘  */
.navigation, .navbar-wrapper, .navbar, .footer {
  background-color: #333;
}

.navigation .navbar a, .footer a {
  border-color: #f2f2f2;
  color: #f2f2f2;
}

.navigation .navbar a.active {
  background-color: #444;
}

.navigation .navbar a:hover {
  background-color: #555;
}

.navigation p.placeholder {
  background: #121212;
  color: #121212;
}

@media (prefers-color-scheme: light) {
  .navigation, .navbar-wrapper, .navbar, .footer {
    background-color: #1a75ff;
  }

  .navigation .navbar a, .footer a {
    border-color: #0d0d0d;
    color: #0d0d0d;
  }

  .navigation .navbar a.active {
    background-color: #3385ff;
  }

  .navigation .navbar a:hover {
    background-color: #4d94ff;
  }

  .navigation p.placeholder {
    background: #ededed;
    color: #ededed;
  }
}



/*  ┌─────────────────────┐  */
/*  │  Image modal color  │  */
/*  └─────────────────────┘  */
.modal {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

.modal .close {
  color: #f2f2f2;
}

.modal .close:hover, .close:focus {
  color: #cc0000;
}

.modal a {
  color: #f2f2f2;
}