.modal {
  align-items: center;
  backdrop-filter: blur(0);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  transition: all 300ms ease-out;
  z-index: 10;
}
.modal.visible {
  backdrop-filter: blur(2px);
  transition: all 300ms ease-out;
}
.modal > * {
  background-color: rgba(230, 193, 137, .7);
  background-image: url(../img/background-bright.png);
  border: 1px solid var(--foreground);
  transform: translateY(-100%);
  transition: all 300ms ease-out;
  width: 17em;
}
.modal > *.visible {
  transform: translateY(0);
  transition: all 300ms ease-out;
}

.standard-message {
  align-items: flex-start;
  backdrop-filter: blur(0);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: fixed;
  inset: 0;
  transition: all 300ms ease-out;
  z-index: 10;
}
.standard-message.visible {
  backdrop-filter: blur(2px);
  transition: all 300ms ease-out;
}
.standard-message > * {
  background-color: rgba(230, 193, 137, .7);
  background-image: url(../img/background-bright.png);
  border: 1px solid var(--foreground);
  transform: translateX(-100%);
  transition: all 300ms ease-out;
  width: 17em;
}
.standard-message > *.visible {
  transform: translateX(0);
  transition: all 300ms ease-out;
}