*, *::before, *::after {
  box-sizing: border-box;     /* size = content + padding + border */
  margin:0;
  padding:0;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition: none !important;
    animation: none !important;
  }

  html{
    scroll-behavior: auto !important;
  }
}

html, body{
  height: 100%;       /* Ensure the body takes full height of the viewport */
  margin: 0;          /* Remove default margin */
}

html.is-resizing *{
  transition: none !important;
  animation: none !important;
}

body{
  display: flex;
  flex-direction: column;
  min-height: var(--app-height);

  font-family: system-ui, sans-serif;     /* Use system font, native look */
  -webkit-font-smoothing: antialiased;    /* WebKit browsers */
  -moz-osx-font-smoothing: grayscale;     /* macOS */
}

body.no-scroll{
  overflow: hidden;
  touch-action: none;
}

body.can-scroll{
  overflow: auto;
  touch-action: auto;
}

button,
input,
select,
textarea{
  font: inherit;
  color: inherit;
}

button{
  -webkit-appearance: none;               /* Remove default button styles */
  appearance: none;                       /* Remove default button styles */
}