/* CURSOR
=============================================== */

body {
  cursor: none;
  overflow-x: hidden;
}

.a-link {
  cursor: none;
}

#cursor {
  border-radius: 100%;
  background: var(--secondary-color);
  position: absolute;
  pointer-events: none;
  width: 10px;
  height: 10px;
  top: 50%;
  left: 50%;
  transition: transform .5s;
  mix-blend-mode: normal;
  z-index: 9998;
}

#cursor.hovered {
  background: var(--highlight-color);
  transform: scale(5.2);
  mix-blend-mode: overlay;
}

#circle {
  position: absolute;
  pointer-events: none;
  width: 50px;
  height: 50px;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(236deg, var(--accent-color), var(--accent-color)) padding-box,
              linear-gradient(45deg, var(--accent-color), var(--accent-color) ) border-box;
  transition: all .2s cubic-bezier(0, 0.5, 1, 1);
  mix-blend-mode: multiply;
  opacity: 0.5;
  z-index: 9999;
}