* {
cursor: none;
}

/* Small blue dot */
#cursor {
position: fixed;
top: -5px;
left: -5px;
width: 10px;
height: 10px;
background-color: #288AE4;
border-radius: 50%;
pointer-events: none;
z-index: 999999;
transition: opacity 0.15s ease-out;
}

#cursor.cursor-hidden {
opacity: 0;
}

/* Normal cursor circle for CTA only */
#cursor-border {
position: fixed;
top: -25px;
left: -25px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: transparent;
pointer-events: none;
z-index: 999998;
transition:
width 0.15s ease-out,
height 0.15s ease-out,
background-color 0.15s ease-out;
}

#cursor-border.cursor-hover {
top: -18px;
left: -18px;
width: 36px;
height: 36px;
background-color: rgba(40, 138, 228, 0.35);
}

#cursor-border.cursor-hover-big {
top: -40px;
left: -40px;
width: 80px;
height: 80px;
background-color: white;
mix-blend-mode: difference;
}

/* Heading setup */
h1,
h2,
h3,
h4,
h5,
h6 {
position: relative;
color: #0E1E34;
z-index: 1;
}

/* Green circle behind heading text */
h1.cursor-heading-active::before,
h2.cursor-heading-active::before,
h3.cursor-heading-active::before,
h4.cursor-heading-active::before,
h5.cursor-heading-active::before,
h6.cursor-heading-active::before {
content: "";
position: absolute;
left: var(--cursor-x);
top: var(--cursor-y);
width: 80px;
height: 80px;
background-color: #C0FF33;
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: -1;
pointer-events: none;
}

@media (hover: none), (pointer: coarse), (max-width: 768px) {
* {
cursor: auto;
}

#cursor,
#cursor-border {
display: none;
}
}