#cursor-container {
  display: none;
}

.hovering {
  cursor: pointer;
}

@media (min-width: 1200px) {
  * {
    cursor: none;
  }

  #cursor-container {
    display: block;
  }

  #cursor {
    pointer-events: none;
    position: fixed;
    width: 1.2rem;
    height: 1.2rem;
    z-index: 11;
    border-radius: 50%;
    background-color: var(--ghost);
    transform: translate(-50%, -50%) scale(1.2);
    transition:
      all 10ms ease-out,
      transform 200ms ease-out;

    &.hovering {
      transform: translate(-50%, -50%) scale(0.8);
    }
  }

  #cursorring {
    position: fixed;
    pointer-events: none;
    width: 2rem;
    height: 2rem;
    z-index: 11;
    border-radius: 50%;
    border: 2px solid var(--color3);
    transform: translate(-50%, -50%);
    transition: all 200ms ease-out;
    
    &.hovering {
      width: 3.5rem;
      height: 3.5rem;
      opacity: 0.5;
    }
  }

  #cursorbg {
    position: fixed;
    pointer-events: none;
    width: 2rem;
    height: 2rem;
    z-index: 10;
    border-radius: 50%;
    background-color: var(--color3);
    opacity: 0.4;
    filter: blur(1px);
    transform: translate(-50%, -50%);
    transition: all 150ms ease-out;

    &.hovering {
      transform: translate(-50%, -50%) scale(0.6);
      background-color: var(--ghost);
      filter: blur(4px);
    }
  }
}