.mouse {
    width: 22em;
    height: 36em;
    border: 2.5em solid #fff;
    border-radius: 12em;
    position: relative;
    font-size: 1.5px;
}

.mouse > .wheel {
   width: 2.5em;
   height: 3.6em;
   /* width: 80px;
   height: 80px; */
   background-color: #fff;
   /* background-image: url(../../img/mouse.png);
   background-size: contain; */
   position: absolute;
   top: 6em;
   left: 50%;
   transform: translateX(-50%);
   animation-name: scroll;
   animation-duration: 1s;
   animation-iteration-count: infinite;
   animation-delay: 0s;
   animation-play-state: running;
   animation-direction: normal;
   animation-fill-mode: forwards;
   /* animation-timing-function: linear; */
   /* animation: scroll 1s infinite reverse; */
}

/* .mouse > .wheel:hover {
    animation-play-state: paused;
} */

@keyframes scroll {
    0% {
        top: 6em;
        opacity: 1;
        /* transform: rotate(0deg); */
    }
    50% {
        opacity: 1;
    }
    100% {
        top: 22em;
        opacity: 0;
        /* transform: rotate(1440deg); */
    }
}