.cursor {
  z-index: 100;
  background-color: #c58a44;
  border: 1px solid #c58a44;
  border-radius: 100em;
  width: 1em;
  height: 1em;
  transition:
    background-color 0.375s cubic-bezier(0.625, 0.05, 0, 1),
    height 0.375s cubic-bezier(0.625, 0.05, 0, 1),
    width 0.375s cubic-bezier(0.625, 0.05, 0, 1);
  position: fixed;
  inset: 0% auto auto 0%;
  pointer-events: none;
}

body:has(a:hover) .cursor,
body:has(button:hover) .cursor,
body:has([data-cursor]:hover) .cursor {
  width: 3em;
  height: 3em;
  background-color: rgba(197, 139, 68, 0.3);
}

@media (hover: none) and (pointer: coarse) {
  .cursor {
    display: none;
  }
}