body {
   background: red;
}

#mouse-scroll {
   position: absolute;
   left: 50%;
   bottom: 60px;
   text-align: center;
   transform: translateX(-50%);
   transition: .45s;
}

#mouse-scroll.is-hidden {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transform: translate(-50%, 12px);
}

#mouse-scroll p {
   margin: 0 0 5px;
   color: #fff;
   font-size: .8em;
}

.mouse-in {
   position: relative;
   width: 25px;
   height: 38px;
   margin: auto;
   border: 2px solid #fff;
   border-radius: 19px;
}

.mouse-in::before {
   content: "";
   position: absolute;
   top: 8px;
   left: 50%;
   width: 2px;
   height: 6px;
   border-radius: 10px;
   background: #fff;
   animation: mouse-wheel 1.2s ease infinite;
}

@keyframes mouse-wheel {
   from {
      opacity: 1;
      transform: translateX(-50%);
   }

   to {
      opacity: 0;
      transform: translate(-50%, 7px);
   }
}