:root {
  --v1: #8fb27c;
  --f1: #235560;
}

* {
  color: var(--f1);
  font-family: "Poppins", sans-serif;
  text-decoration: none;
}

:focus-visible {
  outline: transparent;
  box-shadow: 0 0 0 0.125rem var(--v1);
}

.img1 {
  animation: imageinput4 3s ease-in-out forwards,
    slide-up-loop 10s ease-in-out infinite 3s;
}

.img2 {
  animation: imageinput4 3s ease-in-out forwards,
    slide-up-loop 10s ease-in-out infinite 1s;
}

.img3 {
  animation: imageinput4 3s ease-in-out forwards,
    slide-up-loop 10s ease-in-out infinite 2s;
}

.img4 {
  animation: imageinput4 2s ease-in-out forwards,
    slide-up-loop 10s ease-in-out infinite;
}

.decoration-1 {
  opacity: 0;
  position: absolute;
  border-radius: 6.25rem;
  top: 0rem;
  right: -5rem;
  animation: imageinput4 2s ease-in-out forwards,
    loop-to-the-side 10s ease-in-out infinite 1s;
}

.decoration-2 {
  opacity: 0;
  border-radius: 0 6.25rem 6.25rem 0;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: -3rem;
  animation: imageinput4 2s ease-in-out forwards,
    loop-to-the-side 10s ease-in-out infinite;
}
.decoration-3 {
  opacity: 0;
  border-radius: 6.25rem;
  width: 12.5rem;
  position: absolute;
  bottom: 0rem;
  left: 5.625rem;
  animation: imageinput4 2s ease-in-out forwards,
    loop-to-the-side 10s ease-in-out infinite 3s;
}

.modal {
  animation-duration: 1s;
  animation-name: entry;
}

@keyframes entry {
  from {
    right: -100%;
  }
  to {
    right: 0;
  }
}


@keyframes imageinput4 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slide-up-loop {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes imageinput4 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes loop-to-the-side {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-12px);
  }
}