body {
  font-family: Arial, Helvetica, sans-serif;
}

#warn-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  /* Temporarily disable pending migration to React */
  visibility: hidden;

  background-color: transparent;
  transition: background-color 750ms ease-in-out;
}

.warn-backdrop-active {
  opacity: 1;
}

#warn-main {
  margin-top: -20%;
  color: whitesmoke;
  transform: perspective(200px) rotateX(-90deg);
  transform-origin: 50% -50px;
  transition: transform 300ms ease-in-out;
  max-width: 700px;
}

#warn-inner {
  padding: 32px;
  border: 3px dashed whitesmoke;
  border-radius: 12px;
  text-align: center;
}

#warn-title {
  margin: -20px auto 18px auto;
  width: max-content;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 3em;
  border-bottom: 2px solid whitesmoke;
  padding-bottom: 5px;
}

#warn-message {
  font-size: 1.5em;
}

#warn-author {
  text-align: right;
  font-size: 0.8em;
  margin-top: 15px;
  margin-bottom: -15px;
}

#warn-instruction {
  margin-top: 1em;
  font-size: 0.85em;
  text-align: center;
}

.warn-icon {
  height: 0.9em;
  fill: darksalmon;
  width: 0.9em;
  margin-bottom: -5px;
  padding: 0 0.25em 0 0.25em;
}

@keyframes miniBounce {
  0% {background-color: rgba(133, 3, 3, 0.95);}
  30% {background-color: rgba(133, 3, 3, 0.60);}
  60% {background-color: rgba(133, 3, 3, 0.30);}
  70% {background-color: rgba(133, 3, 3, 0.60);}
  100% {background-color: rgba(133, 3, 3, 0.95);}
}

.miniBounce {
  animation: miniBounce 500ms ease-in-out;
}