body {
  padding: 2rem;
  background-color: #f8f9fa;
}

/**
        De instelling hierboven en hieronder zorgt ervoor:
        - bij een groter scherm het geheel in combiatie met 'card-body' luchtig overkomt.
        - card-body kent in bootstrap een standaard padding van 1rem(16px)
        - dat zal dus op een phone 2rem voor de body en 1rem voor de card-body zijn
        - door de toevoeging hieronder wordt dat weer 'goed' gemaakt
        */

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

.container_logo {
  margin: 20px 0px 50px 5px;
}

.rubriek {
  margin-bottom: 2rem;
}

.rubriek h5 {
  margin-bottom: 1rem;
}

#inputValue::placeholder {
  color: rgba(0, 0, 0, 0.3);
  /* zwart met lage dekking */
  font-style: italic;
  /* optioneel, voor stijl */
}

.form-control {
  background-color: rgba(135, 206, 235, 0.5);
  font-weight: 800;
  font-style: italic;
  margin-bottom: 1.25rem;
}

/*          Geef de omreken knop een kleur en meer ruimte op iPhone waar die onder de invoer verschijnt          */
@media (max-width: 767.98px) {
  #convertBtn {
    margin-top: 1.75rem;
    background-color: orange;
    color: green;
    font-weight: 800;
  }
}

/*  *********************************************** */

/*          Het plaatje wat verschijnt als er foute input is bij het omrekenen van Roemeinse getallen          */

.foutmelding-met-afbeelding {
  max-width: 300px;
  margin: 1rem auto;
}

/*          ******************************************************************************************         */

.fout-icoon {
  width: 100%;
  max-width: 180px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Helemaal onderaan de pagina, de voorbeelden  */
.container_info {
  max-width: 350px;
  padding: 5px 30px 30px 30px;
  background-color: #f8fcfe;
  /* zachtblauw/wit */
}

.conversie-heading {
  color: #6c757d;
  font-size: 1.4rem;
  font-weight: 500;
  font-style: italic;
  padding-bottom: 15px;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.list-unstyled {
  color: #6c757d;
  padding: 20px;
}

/* *************** Tot hier *****************  */

.btn-group .btn {
  margin: 0.25rem;
  border-radius: 0.75rem;
  /* zachtere vorm */
  padding: 0.5rem 1.2rem;
  /* iets meer ruimte */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  /* subtiele schaduw */
  transition: all 0.2s ease-in-out;
}

.btn-group .btn:hover {
  transform: translateY(-1px);
  /* lichte hover-‘lift’ */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  /* hover diepte */
}

.btn i {
  margin-right: 6px;
}

.unit-result {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.unit-label {
  font-weight: bold;
  text-transform: none;
}

#results {
  margin-top: 2rem;
}

.form-section {
  margin-bottom: 2rem;
}

.card {
  border-radius: 12px;
  border: 1px solid #ddd;
}

.card-title {
  font-weight: 600;
  margin-bottom: 1rem;
}

.card {
  transition: all 0.2s ease-in-out;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

#text-decoration-none {
  text-decoration: none;
}

/* Het bi bi-info-circle icon heeft de class info-icon. Zo kan de kleur van de info icon wordem gewijzigd in de schakelaar dark en de dark modus */
/* Basisstijl (licht thema) */
.info-icon {
  color: #6c757d;
  /* soortgelijk aan Bootstrap's text-muted */
}

/*          Waarchuwings tekst onder strijdwagen bij omrekenen Romeinse getallen     */
/* Basiskleur voor licht thema */
.hinttekst {
  color: #6c757d;
  /* komt ongeveer overeen met text-muted */
}

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

  .card-body {
    background-color: #2a2f3e;
    color: orange;
  }

  .card {
    border: 1px solid green;
  }

  .btn {
    color: orange;
    font-weight: 800px;
    box-shadow: 0 1px 3px red;
    /* subtiele schaduw */
  }

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

  .form-select {
    background-color: lightseagreen;
  }

  .modal-content {
    background-color: #1a1f2e;
    color: lightblue;
  }

  /*          Waarchuwings tekst onder strijdwagen bij omrekenen Romeinse getallen     */
  .hinttekst {
    color: lightseagreen;
  }

  /* Helemaal onderaan de pagina, de voorbeelden  */
  .container_info {
    background-color: #2b2f38;
    /* zachtblauw/wit */
  }

  /* Het bi bi-info-circle icon heeft de class info-icon. Zo kan de kleur van de info icon wordem gewijzigd in de schakelaar dark en de dark modus */
  .info-icon {
    color: orange;
    /* of iets lichter grijs voor beter contrast */
  }
}

@media (prefers-color-scheme: dark) {
  .unit-result {
    background-color: #2a2f3e;
    color: orange;
    border: 1px solid #888;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }

  .unit-label {
    color: lightseagreen;
  }
}