.messagebox {
  width: 90%;
  margin:20px auto;
  padding: 15px;
  position:relative;
  border-radius:5px;
  box-shadow:0 0 15px 5px #ccc;
}

.messagebox.p {
  margin-inline-start: 1em;
  margin-inline-end: 1em;
  margin-block-start: 0em;
  margin-block-end: 0em;
}

.messagebox.mb-simple {
  background-color: #ebebeb;
  border-left: 5px solid #6c6c6c;
}

.messagebox.mb-success {
  background-color: #a8f0c6;
  border-left: 5px solid #178344;
}

.messagebox.mb-danger {
  background-color: #f7a7a3;
  border-left: 5px solid #8f130c;
}

.messagebox.mb-warning {
  background-color: #ffd48a;
  border-left: 5px solid #8a5700;
}

@media (prefers-color-scheme: dark) {
  .messagebox {
    /* color: #000; */
    box-shadow:0 0 15px 5px #888;
  }

  .messagebox h3 {
    /* color: #000; */
  }

  .messagebox.mb-simple {
    background-color: #6c6c6c;
    border-left: 5px solid #ebebeb;
  }

  .messagebox.mb-success {
    background-color: #178344;
    border-left: 5px solid #a8f0c6;
  }

  .messagebox.mb-danger {
    background-color: #8f130c;
    border-left: 5px solid #f7a7a3;
  }

  .messagebox.mb-warning {
    background-color: #8a5700;
    border-left: 5px solid #ffd48a;
  }
}