.notifications {
  display: flex;
  position: absolute;
  flex-direction: column;


  width: 100%;

  transform: translate(17%, -20%);

  font-size: clamp(0.5rem, 5vw, 2rem);
  font-weight: bold;

  z-index: 9999;
}

.notification {
  position: relative;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: clamp(1px, 4vw, 3rem);
  width: 60%;

  gap: 1rem;
  border: solid 1px;



  p {
    margin: 0;
  }
}

.notification button {
  display: flex;
  justify-content: center;
  align-items: center;

  width: clamp(1.5rem, 2rem, 2rem);
  height: clamp(1.5rem, 2rem, 24rem);

  border: none;
  outline: none;

  border-radius: 50%;

  cursor: pointer;
}

.notification.success {
  background-color: lightblue;
  border-color: rgb(0, 172, 230);
}

.notification.error {
  background-color: lightcoral;
  border-color: rgb(242, 8, 8);
}