#wether-modal {
  z-index: 2;
  border: none;
  border-radius: 10px;
  background-color: #e1ca96;
  position: absolute;
  left: -100%;
  transform: translate(100%);
  width: fit-content;
  padding: 5px;
}

#wether-modal[open] {
  animation:
    slide-down 300ms forwards,
    fade-in 300ms forwards;
}

#wether-modal[close] {
  animation:
    slide-up 300ms forwards,
    fade-out 300ms forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slide-down {
  from {
    transform: translateY(-5%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slide-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-5%);
  }
}