*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  scrollbar-width: none;
  -webkit-tap-highlight-color: transparent;
}

*::-webkit-scrollbar {
  display: none;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior-y: none;
  touch-action: pan-x pan-y;
}

#app {
  touch-action: pan-x pan-y;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-app);
}

#app,
#app * {
  font-family: var(--font-app) !important;
}

body {
  min-width: 320px;
  min-height: 100vh;
  color: var(--color-text);
  background: var(--color-bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

button,
select {
  color: inherit;
}

button,
a,
[role="button"],
[data-action],
[data-tech-action] {
  touch-action: manipulation;
}

button {
  cursor: pointer;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 2px;
}

img,
svg {
  display: block;
}

@media (max-width: 767px) and (hover: none) {
  input,
  select,
  textarea {
    font-size: 16px;
  }

  select {
    font-size-adjust: .44;
    -webkit-text-size-adjust: 100%;
  }
}