:root {
  --color1: #2da7cb;
	--color2: #c3ced7;
	--color3: #454a4e;
	--color4: #2f3336;
	--color5: #232527;
	--color6: #2da7cb;
  --color7: #555a5e;
	--top: env(safe-area-inset-top);
  --right: env(safe-area-inset-right);
  --bottom: env(safe-area-inset-bottom);
  --left: env(safe-area-inset-left);
  --ion-safe-area-top: env(safe-area-inset-top);
  --ion-safe-area-bottom: env(safe-area-inset-bottom);
  --ion-safe-area-left: env(safe-area-inset-left);
  --ion-safe-area-right: env(safe-area-inset-right);
}

tatami-canvas.disabled {
  pointer-events: none;
}

tatami-canvas.loading {
  filter: brightness(0.32);
}

.custom-cursor {
  position: absolute;
  width: 32px;
  height: 32px;
  z-index: 99;
  background-color: transparent;
  background-size: 32px;
  transform: translate(-16px, -16px);
  pointer-events: none;
}

@keyframes spinning {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner {
  background-image: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  animation: spinning 1s linear infinite;
}