body {
  background-color: whitesmoke;
  /* #F5F5F5  */
  font-family: sans-serif;
  margin: 1rem;
}

@media (max-width: 576px) {
  body {
    padding: 0.5rem;
    /* of 1rem */
  }
}

.modal-body {
  color: cornflowerblue;
  padding-bottom: 40px;
}

input,
select {
  padding: 0.5rem;
  font-size: 1rem;
  margin-right: 1rem;
}

#resultaat {
  margin-top: 2rem;
}

#rubriek {
  background-color: rgba(240, 255, 240, 0.9);
  margin-top: 40px;
  margin-bottom: 25px;
  border: solid green 1px;
  height: 44px;
  color: dodgerblue;
  font-size: 1em;
  font-weight: 400;
}

/* Voor het keuze menu van de groepen in het Periodiek Systeem  */
#groepFilter {
  background-color: rgba(240, 255, 240, 0.9);
  margin-top: 40px;
  margin-bottom: 25px;
  border: solid green 1px;
  height: 44px;
  color: dodgerblue;
  font-size: 1em;
  font-weight: 400;
}

#zoekveld {
  background-color: rgba(240, 255, 240, 0.9);
  /* #DCDCDC  */
  color: dodgerblue;
  font-weight: 700;
  border: solid green 1px;
  margin-top: 2.5rem;
  /*.Onder de tekst iets ruimte naar invoer ruimte  */
}

.magie-knop {
  color: darkred;
  background-color: #fff3f3;
  border: 2px solid darkred;
  font-weight: bold;
  margin-top: 40px;
  padding: 15px;
  border-radius: 6px;
  box-shadow: 3px 3px 0 red, -1em 0 0.4em olive;
  transition: all 0.3s ease-in-out;
}

.magie-knop:hover {
  background-color: darkred;
  color: #fff;
  box-shadow: 0 0 10px red, 0 0 15px olive;
  text-shadow: 0 0 5px white, 0 0 10px red;
  letter-spacing: 0.5px;
  cursor: pointer;
}

/* Ik zie weinig resultaat van de regels toch maar laten staan */
.magie-knop:active {
  background-color: #cc0000;
  filter: brightness(0.9);
  transform: translateY(3px) scale(0.98);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), 0 0 5px darkred;
}

.magie-klik {
  background-color: #cc0000;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4);
  transform: scale(0.97);
}

#input1089 {
  background-color: lightgreen;
  letter-spacing: 0.07em;
  /* of bijv. 1px */
  font-weight: 800;
}

/* Indien van toepassing de intro tekst van een rubriek */
.rubriekIntro {
  background-color: rgba(216, 191, 216, 0.4);
  padding: 10px 5px 30px 10px;
  border-left: 2px solid green;
  border-bottom: 2px solid green;
  margin-bottom: 1rem;
  font-style: italic;
  font-size: 1rem;
}

#btn-getal.active {
  background-color: darkred;
  border-color: darkred;
  color: white;
  /* <-- DIT */
}

#btn-naam.active {
  background-color: darkred;
  border-color: darkred;
  color: white;
  /* <-- DIT */
}

.getallenlijst {
  margin-left: 1.5em;
  white-space: pre-wrap;
  font-family: monospace;
}

body.donker #input1089 {
  background-color: green;
}

/* DONKER */
/* Kleur instellingen per apparaat in donkere modus */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1c1c1c;
    /*.of:#2a2f3e   */
    color: lightseagreen;
  }

  .modal-body {
    background-color: #1c1c1c;
    /*.of:#2a2f3e zie ook de achtergrond van het modal  */
    color: cornflowerblue;
  }

  .form-control {
    background-color: rgba(255, 215, 0, 0.7);
    margin-bottom: 1.25rem;
  }

  .modal-header {
    background-color: #2a2f3e;
    color: orange;
  }

  #resultaat1089 {
    color: goldenrod;
  }

  .rubriekIntro {
    color: #ffe4c4;
    /* Bisque  */
  }
}