:root {
  color-scheme: light;
}

html {
  scroll-padding-top: 6rem;
}

body {
  text-rendering: optimizeLegibility;
}

::selection {
  background-color: #0ea5e9;
  color: #ffffff;
}

:focus-visible {
  outline: 2px solid #0284c7;
  outline-offset: 3px;
}

.bg-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
}

.hero-glow {
  background: radial-gradient(circle at center, rgba(14, 165, 233, 0.22) 0%, rgba(14, 165, 233, 0.08) 38%, transparent 70%);
}

.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

input:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: #f4f4f5;
  -webkit-box-shadow: 0 0 0 1000px #020617 inset;
  caret-color: #f4f4f5;
}