.notifications {
  width: 100%;
  max-width: 600px;
  position: fixed;
  left: 0;
  top: var(--masthead-height);
}
.notification {
  border-radius: 5px;
  background: var(--color-neutral-00);
  padding: 20px;
  margin: 20px 0;
  overflow: auto;
  color: var(--color-neutral-10);
}
html[dark] .notification {
  color: var(--color-neutral-00);
}
.notification_title {
  margin: 0;
}
.notification_entry {
  padding: 0;
}
.notification_neutral {
  border: 2px solid var(--color-neutral-08);
  background: var(--color-neutral-00);
}
html[dark] .notification_neutral {
  background: var(--color-neutral-10);
}
.notification_caution {
  border: 2px solid var(--color-accent-yellow-10);
  background: var(--color-accent-yellow-00);
}
.notification_error {
  border: 2px solid var(--color-accent-red-10);
  background: var(--color-accent-red-00);
}
.notification_success {
  border: 2px solid var(--color-accent-green-10);
  background: var(--color-accent-green-00);
}

@media all and (min-width: 500px) {
  .notifications {
    left: 50%;
    margin-left: -250px;
  }
}