#dialog, .modal__content, .modal__title, .modal-form, .modal__close-button {
  padding: 0;
  margin: 0;
}
dialog {
  background-color: rgba(0, 0, 0, 0.6);
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
}

.modal__content {
  background-color: #d9ffe6;
  position: fixed;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: math;
  opacity: 0;
  gap: .7rem;
  border-radius: 1rem;
  bottom: 10rem;
  right: 2rem;
  padding: 1rem;
  transition: opacity 1 ease;
  animation: suaveShow 1.3s ease both;
}

.modal__content-success {
  width: clamp(5rem, 9vw, 8rem);
  font-size: clamp(.8rem, 1.7vw, 1.5rem);
}

.modal__content-error {
  width: clamp(7rem, 12vw, 10rem);
  font-size: clamp(.8rem, 1.7vw, 1.5rem);
}

.modal__title {
  margin-top: .7rem;
}

.modal__close-button {
  padding: 4px 12px;
  border-radius: .7rem;
}
.modal__close-button-success {
  background-color: #86bd5c;
  color: rgb(61, 125, 89);
}
.modal__close-button-error {
  background-color: #b65b59;
  color: rgb(245, 1, 1);
}
@keyframes suaveShow {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes suaveClose {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}