:root {
  --header-offset: calc(var(--wp--preset--spacing--80) + 103px);
}

@media (max-width: 750px) {
  :root {
    --header-offset: calc(var(--wp--preset--spacing--80) + 78px);
  }
}

html,
body {
  scroll-behavior: smooth;
}

* {
  scroll-margin-top: var(--header-offset);
}

.scroll-down {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--wp--preset--color--base);
  padding: 8px;
  width: 32px;
  height: 32px;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  animation: bounce 2s infinite;
  z-index: 9999;
  cursor: pointer;
}

.scroll-down.visible {
  opacity: 0.7;
  pointer-events: auto;
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translate(-50%, 0);
  }

  40% {
    transform: translate(-50%, -10px);
  }

  60% {
    transform: translate(-50%, -5px);
  }
}