src/styles/globals.css
@import './fonts.css';

:root {
  --global-font-family: 'Inter Variable', -apple-system, system-ui, BlinkMacSystemFont, 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
}

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: var(--global-font-family);
}

button {
  cursor: pointer;
}

button[disabled] {
  cursor: default;
}

button:focus,
a:focus {
  outline: none;
}

.radix-themes {
  --cursor-button: pointer;
  --cursor-checkbox: pointer;
  --cursor-disabled: default;
  --cursor-link: pointer;
  --cursor-menu-item: pointer;
  --cursor-radio: pointer;
  --cursor-slider-thumb: grab;
  --cursor-slider-thumb-active: grabbing;
  --cursor-switch: pointer;
  --default-font-family: var(--global-font-family)
}

.hero-bg {
  background-size: 10px 10px;
  animation: move 1s linear infinite;
  opacity: 0.1;
}

.light, .light-theme {
  .hero-bg {
    background-image: linear-gradient(#666 1px, transparent 1px), linear-gradient(to right, #666 1px, #fff 1px);
  }
}

.dark, .dark-theme {
  .hero-bg {
    background-image: linear-gradient(#ddd 1px, transparent 1px), linear-gradient(to right, #ddd 1px, #fff 1px);
  }
}

@keyframes move {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 10px;
  }
}

@keyframes rewind-demo-background-move {
  from {
    background-position: right -50% center;
  }
  to {
    background-position: right 50% center;
  }
}
