.cursor {
  display: block;
  position: absolute;
  width: 18px;
  height: 30px;
  background-image: url('data:image/svg+xml;utf8, <svg viewBox="0 0 486 647" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M400.189 402.126H294.105L349.936 538.119C353.825 547.547 349.381 558.118 340.492 562.118L291.327 583.545C282.162 587.545 271.884 582.974 267.995 573.831L214.942 444.695L128.278 533.833C116.729 545.71 98 536.554 98 520.977V91.299C98 74.899 117.921 66.904 128.277 78.443L412.689 370.985C424.161 382.164 415.696 402.126 400.189 402.126Z" fill="black"/></svg>');
  background-repeat: no-repeat;
  transition: top .125s linear, left .125s linear;

  pointer-events: none;
  user-select: none;
}

/* ====== *
  Source:  https://github.com/codrops/ClickEffects/blob/master/css/component.css
* ======= */
.cursor::after {
  position: absolute;
  margin: -35px 0 0 -35px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  content: '';
  opacity: 0;
  pointer-events: none;
  user-select: none;
  box-shadow: inset 0 0 0 35px rgba(111,148,182,0);
}

.cursor.clicked::after {
  -webkit-animation: click-animation 0.5s ease-out forwards;
  animation: click-animation 0.5s ease-out forwards;
}

@-webkit-keyframes click-animation {
  0% {
    opacity: 1;
    -webkit-transform: scale3d(0.4, 0.4, 1);
    transform: scale3d(0.4, 0.4, 1);
  }
  80% {
    box-shadow: inset 0 0 0 2px rgba(111,148,182,0.8);
    opacity: 0.1;
  }
  100% {
    box-shadow: inset 0 0 0 2px rgba(111,148,182,0.8);
    opacity: 0;
    -webkit-transform: scale3d(1.2, 1.2, 1);
    transform: scale3d(1.2, 1.2, 1);
  }
}

@keyframes click-animation {
  0% {
    opacity: 1;
    -webkit-transform: scale3d(0.4, 0.4, 1);
    transform: scale3d(0.4, 0.4, 1);
  }
  80% {
    box-shadow: inset 0 0 0 2px rgba(111,148,182,0.8);
    opacity: 0.1;
  }
  100% {
    box-shadow: inset 0 0 0 2px rgba(111,148,182,0.8);
    opacity: 0;
    -webkit-transform: scale3d(1.2, 1.2, 1);
    transform: scale3d(1.2, 1.2, 1);
  }
}

.cursor.clickedMobile::after {
	-webkit-animation: anim-effect-sanja 1s ease-out forwards;
	animation: anim-effect-sanja 1s ease-out forwards;
}

@-webkit-keyframes anim-effect-sanja {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.5, 0.5, 1);
		transform: scale3d(0.5, 0.5, 1);
	}
	25% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes anim-effect-sanja {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.5, 0.5, 1);
		transform: scale3d(0.5, 0.5, 1);
	}
	25% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

.cursor.shaking {
    width: 45px;
    height: 75px;
    -webkit-animation: shaking 0.3s linear;
    animation: shaking 0.3s linear;
    animation-iteration-count: 2;
}

@keyframes shaking {
    0% {
        transform: translate(60px, -60px);
    }
    25% {
        transform: translate(-60px, 60px);
    }
    50% {
        transform: translate(60px, -60px);
    }
    75% {
        transform: translate(-60px, 60px);
    }
    100% {
        transform: translate(60px, -60px);
    }
}