<h1>Custom Cursor</h1>
<p>Hover around using the mouse</p>
<p>Click anywhere for click-animation</p>
<div class="cursor"></div>
<link href="https://fonts.googleapis.com/css?family=BenchNine&display=swap" rel="stylesheet">

body {
    margin: 0;
    height: 100vh;
    /* cursor: url('../images/custom.svg'), auto; */
  background: black;
  font-family: 'BenchNine', sans-seriff;
}
/* h1 {
  color: rgb(101,11,129);
  color: linear-gradient(148deg, rgba(101,11,129,1) 0%, rgba(148,36,146,1) 51%, rgba(233,70,193,1) 100%);
} */

h1 {
  text-align: center;
  font-size: 72px;
  background: -webkit-linear-gradient(#650b81, #e946c1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

p {
  text-align: center;
  font-size: 21px;
  background: -webkit-linear-gradient(#650b81, #e946c1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cursor {
    width: 20px;
    height: 20px;
    border: 1px solid purple;
    border-radius: 50%;
    position: absolute;
    transition-duration: 200ms;
    transition-timing-function: ease-out;
    animation: cursorAnim .5s infinite alternate;
}

cursor::after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    border: 4px solid pink;
    border-radius: 50%;
    opacity: .5;
    top: -8px;
    left: -8px;
    animation: cursorAnim2;
}

/* @keyframes cursorAnim {
    from {
        transform: scale(1);
    } to {
        transform: scale(.7);
    }
} */

@keyframes cursorAnim2 {
    from {
        transform: scale(1);
    } to {
        transform: scale(.4);
    }
}

@keyframes cursorAnim3 {
    0% {
        transform: scale(1);
    } 
    50% {
        transform: scale(3);
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.expand {
    animation: cursorAnim3 .5s forwards;
    border: 1px solid plum;
}

const cursor = document.querySelector('.cursor');

document.addEventListener('mousemove', e => {
    cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px");
})

document.addEventListener('click', () => {
    cursor.classList.add("expand");

    setTimeout(() => {
        cursor.classList.remove("expand");
    }, 500)
})