.alert-container {
    position: absolute;
    top: 2rem;
    margin: auto;

    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 1rem;
}

.alert {
    /* position: absolute;
    top: 2rem;
    margin: auto; */

    padding: 0 1rem;

    width: 24rem;
    border-radius: 0.5rem;
    border: solid;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.alert.fade-out {
  opacity: 0;
  transform: translateY(-4px);
}

.alert-success {
  background-color: rgba(223, 240, 216, 0.7);
  border-color: #D6E9C6;
  color: #3C763D;
}

.alert-info {
  background-color: rgba(217, 237, 247, 0.7);
  border-color: #BCE8F1;
  color: #31708F;
}

.alert-warning {
  background-color: rgba(252, 248, 227, 0.7);
  border-color: #FAEBCC;
  color: #8A6D3B;
}

.alert-error {
  background-color: rgba(242, 222, 222, 0.7);
  border-color: #EBCCD1;
  color: #A94442;
}