.modal {
  display: none;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
  z-index: 100;
  padding: 2em 1em;
}

.modal.error::after {
  border: 4px solid #a00;
  background-color: #fee;
}

.modal.warning::after {
  border: 4px solid #cb2;
  background-color: #ffc;
}

.modal::before {
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: var(--modal-mask-color);
  z-index: -1;
}

.modal::after {
  content: '';
  position: fixed;
  top: 10%;
  bottom: 10%;
  right: 10%;
  left: 10%;
  background: var(--modal-text-bg-color);
  z-index: -1;
  border-radius: .25em;
  border: 2px solid var(--modal-text-border-color);
}

.modal .close-modal {
  position: absolute;
  top: 0;
  right: 0;
  margin: .25em .5em;
  text-decoration: none;
}

.modal:target {
  display: block !important;
}

.modal-content {
  height: 100%;
  overflow: auto;
  /*overflow: scroll;*/
  padding: 0 1em;
  width: calc(100% - 2em);
}

.modal-content[data-modal-title]::before {
  content: attr(data-modal-title);
  font-size: 120%;
  display: block;
  margin-bottom: .5em;
  font-weight: bold;
  color: var(--modal-heading-text-color);
}

.modal.error .modal-content[data-modal-title]::before {
  color: #a00;
}

.modal.warning .modal-content[data-modal-title]::before {
  color: #a55e00;
}

.modal h3 {
  color: var(--modal-heading-text-color);
  font-size: 120%;
  font-weight: normal;
  margin: 0;
  margin-top: 1em;
}

.modal p {
  margin: .25em 0;
}

@media screen and (min-width: 1200px) {
  .modal { max-width: calc(400px + 2em); }
  .modal::before { background: var(--modal-mask-color); }
  .modal::after { max-width: calc(400px + 4em); }
}