/* Use a more intuitive box-sizing model */
*, *::before, *::after {
    box-sizing: border-box;
  }
  
  * {
    /* Remove all margins and padding */
    margin: 0;
    padding: 0;
  }
  

  
  /* Only show focus outline when the user is tabbing (not when clicking) */
  *:focus {
    outline: none;
  }
  
  *:focus-visible {
    outline: 1px solid blue;
  }
  
  /* Prevent mobile browsers increasing font-size */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  
  /* Allow percentage-based heights */
  /* Setting width: 100% isn't required because it is a default for block-level elements (html and body are block level) */
  html, body {
    height: 100%;
  }
  
  body {
    /* Prevent the rubber band effect when the user scrolls to the top or bottom of the page (WebKit only) */
    overscroll-behavior: none;
  
    /* Prevent the browser from synthesizing missing typefaces */
    font-synthesis: none;
  
    color: black;
    /* UI controls color (example: range input) */
    accent-color: black;
  
    /* Because overscroll-behavior: none only works on WebKit, a background color is set that will show when overscroll occurs  */
    background: white;
  }
  
  /* Remove unintuitive behaviour such as gaps around media elements.  */
  img, picture, video, canvas, svg, iframe {
    display: block;
  }
  
  /* Avoid text overflow */
  h1, h2, h3, h4, h5, h6, p, strong {
    overflow-wrap: break-word;
  }
  
  /* Inherit fonts for inputs and buttons */
  button, input, textarea, select {
    font: inherit;
  }
  
  a {
    text-decoration: none;
  }
  
  ul, ol {
    list-style: none;
  }
  
  input {
    border: none;
  }
  
  input, button, textarea, select {
    font: inherit;
  }
  
  button:disabled {
    color: inherit;
  }
  
  /* Create a root stacking context (only when using frameworks like Next.js) */
  #__next {
    isolation: isolate;
  }