#app {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  position: relative;
}

.marker {
  position: absolute;
  width: 60px;
  left: 50%; /* Center the pointer horizontally */
  transform: translateX(-50%);
  top: -15px; /* Adjust this value to visually align it */
  z-index: 2; /* Make sure the marker is above the wheel */
}

.wheel {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%; /* Ensure rotation is around the center */
}

.button {
  display: block;
  width: 250px;
  margin: 40px auto;
  cursor: pointer;
}

.button:hover {
  opacity: 0.8;
}

.blur {
  animation: blur 10s;
}

@keyframes blur {
  0% {
    filter: blur(1.5px);
  }
  80% {
    filter: blur(1.5px);
  }
  100% {
    filter: blur(0px);
  }
}
/* Load the PantonDemoLight.otf font */
@font-face {
  font-family: 'PantonDemoLight';
  src: url('PantonDemoLight.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Apply the font to the h1 element */
h1 {
  font-family: 'PantonDemoLight', sans-serif;
  font-size: 24px;
  color: #000; /* You can set any color you want */
  text-align: center;
  margin-top: 20px;
}