@import url('../../css/fonts.css');
@import url('../../css/colors.css');

/* your existing styles */
#message {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  margin-top: 1rem;
  position: fixed;
    z-index: 10;


  /* new animation */
  animation: fadeOut 0.8s ease-in-out 3s forwards;
  /* └── name ─┘ └duration┘ └timing┘ └delay┘ └keep final state┘ */
}

/* keyframes that just fades opacity to 0 */
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}


#message #inner {
    padding: 0.3rem 0.5rem;
    border-radius: 1rem;
    font-family: Inter;
    z-index: 1000;

}


#message #inner.success {
    background-color: greenyellow;
}


#message #inner.fail {
    background-color: var(--contrast-color);
}

#message #inner.error {
    background-color: yellow;
}