body{
  line-height:1;
  background: #f032f0;
  background: linear-gradient(180deg, rgba(240, 50, 240, 1) 26%, rgba(215, 163, 230, 1) 51%, rgba(255, 130, 232, 1) 76%);
  background-image: url(https://dl.glitter-graphics.com/pub/231/231839jm35be5swg.gif);
  background-size: 40%;
  text-align: center;
}

  p3 {
    color: #DA99DE;
    animation: blinkingText 4.2s infinite;
    margin: auto;
    font-size: 2rem;
    font-family: sant joan;
  }
 
  @keyframes blinkingText {
    0% {
      color: #D5B2D3;
    }
 
    49% {
      color: #D5B2D3;
    }
 
    60% {
      color: #ABB8E1;
    }
 
    99% {
      color: #D5B2D3;
    }
 
    100% {
      color: #EEAECA;
    }
  }
  @keyframes shake {
    0% { transform: rotate(-1deg);}
    50% { transform:rotate(1deg);}
    100% {transform:rotate(-1deg);}
}
.shake-glow-text {
  font-size: 3rem;
  animation: shake 3.4s infinite ease-in-out, blinkingText 6.2s infinite;
  text-shadow: 0 0 6px #ff88cc, 0 0 22px #ff66aa;
}

@font-face {
font-family: windows;
src: url(https://dl.dropbox.com/s/cn0l1yjacta4whv/W95FA.otf);
}
 
#windows {
font-family: windows;
}

<div id="mouse-trail" style="position:fixed;pointer-events:none;z-index:999;"></div>
<script>
const trailContainer = document.getElementById("mouse-trail");
const trailArray = [];
const trailCount = 14;

for(let i=0;i<trailCount;i++){
  const dot = document.createElement("div");
  dot.style.cssText = `
  position:absolute;
  width:9px;height:9px;
  border-radius:50%;
  background:#ff88cc;
  box-shadow:0 0 12px #ff88cc;
  opacity:0;
  transform:scale(0);
  `;
  trailContainer.appendChild(dot);
  trailArray.push({el:dot,x:0,y:0});
}

document.addEventListener("mousemove",(e)=>{
  let x = e.clientX;
  let y = e.clientY;
  trailArray.forEach((item,idx)=>{
    setTimeout(()=>{
      item.el.style.left = x + "px";
      item.el.style.top = y + "px";
      item.el.style.opacity = 1 - idx/trailCount;
      item.el.style.transform = `scale(${1 - idx/trailCount})`;
    }, idx*38);
  })
})
</script>