.scrollIconWrapper {
  position:absolute;
  left:calc(50% - 1em);
  width:2em;
  height:3em;
  border:solid 1px rgb(var(--whiteColor));
  bottom:3em;
  z-index:99;

  -webkit-border-radius:2em;
     -moz-border-radius:2em;
          border-radius:2em;
}

@keyframes scrollIconAnimation {
  from {
    opacity:1;
    bottom:15%;
  } to {
    opacity:0;
    bottom:calc(85% - 0.65em);
  }
}


.scrollIconAnimatedDot {
  position:absolute;

  width:0.65em;
  height:0.65em;

  left:calc(50% - (0.65em / 2));
  bottom:15%;
  opacity: 1;

  animation-name:scrollIconAnimation;
  animation-duration:1.2s;
  animation-iteration-count:infinite;

  background-color:rgb(var(--whiteColor));

  -webkit-border-radius:2em;
     -moz-border-radius:2em;
          border-radius:2em;
}