.mouse{
    width: 40px;
    height: 70px;
    background: black linear-gradient(transparent 0%, transparent 50%, #161616 50%, black 100%);
    background-size: 100% 200%;
    border-radius: 100px;
    animation: colorSlide 5s linear infinite,
               nudgeMouse 5s ease-out infinite;
    opacity: 0;
    position: fixed;
    bottom: 25pt;
    left: 50%;
    transform: translateX(-50%);
  }
  .mouse:before,
  .mouse:after{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
  }
  .mouse:before{
    width: 36px;
    height: 66px;
    background-color: #ffffffcf;
    border-radius: 100px;
  }
  .mouse:after{
    background-color: #000;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    animation: trackBallSlide 5s linear infinite;
  }
  
  /* Animations */
  @keyframes colorSlide{
    0% {
      background-position: 0% 100%;
    }
    20% {
      background-position: 0% 0%;
    }
    21% {
      background-color: #000;
    }
    29.99% {
      background-color: #000;
      background-position: 0% 0%;
    }
    30% {
      background-color: #000;
      background-position: 0% 100%;
    }
    50% {
      background-position: 0% 0%;
    }
    51% {
      background-color: #000;
    }
    59% {
      background-color: #000;
      background-position: 0% 0%;
    }
    60% {
      background-color: #000;
      background-position: 0% 100%;
    }
    80% {
      background-position: 0% 0%;
    }
    81% {
      background-color: #000;
    }
    90%, 100% {
      background-color: #000;
    }
  }
  
  @keyframes trackBallSlide{
    0%{
      opacity: 1;
      transform: scale(1) translateY(-20px);
    }
    6%{
      opacity: 1;
      transform: scale(0.9) translateY(5px);
    }
    14%{
      opacity: 0;
      transform: scale(0.4) translateY(40px);
    }
    15%, 19%{
      opacity: 0;
      transform: scale(0.4) translateY(-20px);
    }
    28%, 29.99%{
      opacity: 1;
      transform: scale(1) translateY(-20px);
    }
    30%{
      opacity: 1;
      transform: scale(1) translateY(-20px);
    }
    36%{
      opacity: 1;
      transform: scale(0.9) translateY(5px);
    }
    44%{
      opacity: 0;
      transform: scale(0.4) translateY(40px);
    }
    45%, 49%{
      opacity: 0;
      transform: scale(0.4) translateY(-20px);
    }
    58%, 59.99%{
      opacity: 1;
      transform: scale(1) translateY(-20px);
    }
    60%{
      opacity: 1;
      transform: scale(0.9) translateY(-20px);
    }
    66%{
      opacity: 1;
      transform: scale(0.9) translateY(5px);
    }
    74%{
      opacity: 0;
      transform: scale(0.4) translateY(40px);
    }
    75%, 79%{
      opacity: 0;
      transform: scale(0.4) translateY(-20px);
    }
    88%, 100%{
      opacity: 1;
      transform: scale(1) translateY(-20px);
    }
  }
  @keyframes nudgeMouse{
    0%{
      transform: translateY(0) translateX(-50%);
    }
    20%{
      transform: translateY(8px) translateX(-50%);
    }
    30%{
      transform: translateY(0) translateX(-50%);
    }
    50%{
      transform: translateY(8px) translateX(-50%);
    }
    60%{
      transform: translateY(0) translateX(-50%);
    }
    80%{
      transform: translateY(8px) translateX(-50%);
    }
    90%{
      transform: translateY(0) translateX(-50%);
    }
  }
  @keyframes nudgeText {
    0%{
      transform: translateY(0) translateX(-50%);
    }
    20%{
      transform: translateY(2px) translateX(-50%);
    }
    30%{
      transform: translateY(0) translateX(-50%);
    }
    50%{
      transform: translateY(2px) translateX(-50%);
    }
    60%{
      transform: translateY(0) translateX(-50%);
    }
    80%{
      transform: translateY(2px) translateX(-50%);
    }
    90%{
      transform: translateY(0) translateX(-50%);
    }
  }