/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
  box-sizing: border-box;
}

/*
  2. Remove default margin
*/
* {
  margin: 0;
  padding:0;
}

html{
  color-scheme: dark light;
  hanging-punctuation: first last; /*Hanging punctuation if it's first or last letter*/
  margin-top:0!important;
}

/*
  Typographic tweaks!
  3. Add accessible line-height
  4. Improve text rendering
*/
body {
  min-height:100svh;
  /*line-height: 1.5;*/
  -webkit-font-smoothing: antialiased;

}

/*
  5. Improve media defaults
*/
img, picture, video, canvas, svg {
 /* display: block;*/
 vertical-align: middle;
  max-width: 100%;
  height:auto;
  font-style:italic;
  /*To account for large images put a low res background image
  background-repeat: no-repeat;
  background-size:cover;
  */
  /*Helps with margin if you're floating an image
  shape-margin: 1rem;*/
}

/*
  6. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}

/*
  7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/*
  8. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap:balance;
}

p, li, figcaption{
text-wrap:pretty;
  max-width:75ch;
}

@media (prefers-reduced-motion: no-preference){
  :has(:target){
    scroll-behavior: smooth;
    scroll-padding-top:3rem;
  }
}