.scroll-btn {
  position: static;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  background: transparent;
  z-index: 10;
}

.hamburger.active ~ .scroll-btn{
  opacity: 0;
  visibility: hidden;
}

.scroll-btn span {
  width: 2.5em;
  height: 2.5em;
  border-left: 3px solid #f5f5f5;
  border-bottom: 3px solid #f5f5f5;
  animation: popping-arrow 1.8s infinite ease-in-out;
  transition: border-color 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}

.next-btn {
  margin-top: auto;
  margin-bottom: 50%;
}

.next-btn span {
  --rotate: -45deg;
}

.prev-btn span {
  --rotate: 135deg;
}

.scroll-btn:hover span {
  border-color: #fff;
  filter: drop-shadow(0 0 8px #fff);
  animation-duration: 0.8s;
}

.scroll-btn:active span {
  transform: scale(0.9) rotate(var(--rotate, -45deg));
}

@keyframes popping-arrow {
  0% {
    transform: translateY(0) rotate(var(--rotate, -45deg));
    opacity: 1;
  }
  50% {
    transform: translateY(5px) rotate(var(--rotate, -45deg));
    opacity: 0.6;
  }
  100% {
    transform: translateY(0) rotate(var(--rotate, -45deg));
    opacity: 1;
  }
}