/*
  Why these specific rules ? Read this amazing article :
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  line-height: calc(1em + 0.5rem);
}

html, body {
  height: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

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

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* for the next one, put the selector for the app element */

:root {
  isolation: isolate;
}