@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

html { scroll-behavior: smooth; }
body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
::selection { background: rgba(34, 211, 238, 0.25); color: white; }
input, textarea, select { outline: none; }
a, button { transition: all 180ms ease; }


img { max-width: 100%; height: auto; }
body.mobile-nav-open { overflow: hidden; }

@media (max-width: 1023px) {
  .mobile-nav a { min-height: 48px; display: flex; align-items: center; }
}

@media (max-width: 767px) {
  h1 { word-break: normal; }
}

@supports (padding: max(0px)) {
  header .mx-auto,
  footer .mx-auto,
  section .mx-auto {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}

@media (orientation: landscape) and (max-width: 1024px) {
  .mobile-nav nav {
    max-height: calc(100vh - 96px);
    overflow-y: auto;
  }
}