@keyframes cursor-anim {
    0% {
        width: 180px;
        height: 180px;
    }
    50% {
        width: 195px;
        height: 195px;
    }
    100% {
        width: 180px;
        height: 180px;
    }
}

.cursor {
    width: 180px;
    height: 180px;
    background-color: #fefefe;
    border: 2px solid #fefefe;
    border-radius: 100%;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: all 150ms ease;
    transition-property: background-color, opacity, transform, mix-blend-mode;
    z-index: 9999;
    animation-name: cursor-anim;
    animation-duration: 1550ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.cursor:after{
    content: 'Get early access';
    color: #000;
    font-weight: 600;
    font-size: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
}
  .cursor--hidden {
    opacity: 0;
    visibility: hidden;
  }
  
  /* .cursor--link-hovered {
    transform: translate(-50%, -50%) scale(1.25);
  } */
  
  .cursor--clicked {
    transform: translate(-50%, -50%) scale(0.9);
    background-color: #fefefe;
  }