.alertbox {
  padding: 0.5rem 1rem;
  margin: 1rem 0;
  background-color: gray;
  outline: 1px transparent solid;
}

.alertbox p:first-of-type {
  padding: 0;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5rem;
}

.alertbox p:first-of-type::before {
  margin-inline-end: 1rem;
  font-weight: bold;
}

.alertbox.alertbox-danger {
  border-inline-start: 4px #e22500 solid;
  background-color: rgba(226, 37, 0, 0.2);
}

.alertbox.alertbox-danger p:first-of-type::before {
  content: '[!!]';
  color: #e22500;
}

.alertbox.alertbox-warning {
  border-inline-start: 4px #fc0 solid;
  background-color: rgba(255,204,0,0.2);
}

.alertbox.alertbox-warning p:first-of-type::before {
  content: '[!]';
  color: #fc0;
}

.alertbox.alertbox-info {
  border-inline-start: 4px #0088e0 solid;
  background-color: rgba(0,136,224,0.2);
}

.alertbox.alertbox-info p:first-of-type::before {
  content: '[i]';
  color: #0088e0;
}