@-webkit-keyframes mouse-scroll {
  0% {
    top: 10%;
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    top: 30%;
    opacity: 0;
  }
}
@-moz-keyframes mouse-scroll {
  0% {
    top: 10%;
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    top: 30%;
    opacity: 0;
  }
}
@-o-keyframes mouse-scroll {
  0% {
    top: 10%;
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    top: 30%;
    opacity: 0;
  }
}
@keyframes mouse-scroll {
  0% {
    top: 10%;
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    top: 30%;
    opacity: 0;
  }
}
.scroll-msg-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.scroll-msg-inner {
  translate: none; 
    rotate: none; 
    scale: none; 
    transform: translate(0px, 0px); 
    opacity: 1; 
    visibility: inherit; 
    transition: unset;
}
.scroll-msg-container:hover .scroll-msg-inner {
  transform: translate(0px, 5px); 
}
.scroll-msg-inner {
  width: var(--width);
  height: var(--height);
  position: relative;
  border-radius: 30px;
  border: 2px solid var(--color);
}

.scroll-msg-wheel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 20%;
  width: 8px;
  height: 8px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: var(--color);
  opacity: 0.3;
  /*
  -webkit-animation: mouse-scroll 0.9s infinite alternate ease-in-out;  
  -moz-animation: mouse-scroll 0.9s infinite alternate ease-in-out;
  -o-animation: mouse-scroll 0.9s infinite alternate ease-in-out;
  animation: mouse-scroll 0.9s infinite alternate ease-in-out;
  */
}
.scroll-msg-text {
    padding: var(--text-padding);
}