<main>
  <div class="hover-container">
    Hover over me!
  </div>
</main>

body {
  margin: 0;
}

main {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #dad8cf;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' style='fill-rule:evenodd;text-rendering:geometricPrecision;image-rendering:optimizeQuality;clip-rule:evenodd;shape-rendering:geometricPrecision' xml:space='preserve' viewBox='0 0 7.5 7.5'%3E%3Cpath d='M0 3.8a3.7 3.7 0 1 1 7.5 0 3.7 3.7 0 0 1-7.5 0zm.5 0a3.3 3.3 0 1 0 6.6 0 3.3 3.3 0 0 0-6.6 0zm2.9 0c0 .2.2.3.4.3a.4.4 0 1 0-.4-.3z' style='fill:currentColor;stroke:currentColor;stroke-width:.0419595'/%3E%3C/svg%3E") 8 8, pointer;
}

.hover-container {
  width: 50%;
  min-width: max-content;
  max-height: 75vh;
  max-width: 75vh;
  aspect-ratio: 1;
  box-sizing: border-box;
  padding: 32px;
  display: flex;
  align-items: center;
  background-color: white;
  justify-content: center;
  cursor: url(https://cur.cursors-4u.net/nature/nat-11/nat1021.cur), default;
  border-radius: 16px;
  text-align: center;
}