/** Reset **/

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

/* remove default spacing */
/* force styling of type through styling, rather than elements */
* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* exceptions: <b>, <i> */
b, strong {
    font-weight: bold;
}

i, em {
    font-style: italic;
}

/* dark mode user-agent-styles */
/* improves punctuation in supported browsers */
html {
  color-scheme: dark light;
  hanging-punctuation: first last;
}

/* min body height */
body {
  min-height: 100svh;
}

/* responsive images/videos */
img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

button {
  appearance: none;
  border-radius: 0;
  text-align: inherit;
  background: none;
  box-shadow: none;
  padding: 0;
  cursor: pointer;
  border: none;
  color: inherit;
  font: inherit;
}

/* improved heading in supported browsers */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* improve readability with max-width on paragraphs and lists */
/* prevent orphans in supported browsers */
p,
li,
figcaption {
  max-width: var(--p-max-width, 75ch);
  text-wrap: pretty;
}

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

/* Selector should select application's top-level element
#root, #__next {
  isolation: isolate;
}
*/

body > :is(header, main, footer),
section,
main,
article {
    container-type: inline-size;
}


/** Base **/

/* 
  Typographic tweaks:
  1. Add accessible line-height
  2. Improve text rendering on mac
*/
body {
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: 32px;
  line-height: 1.1;
}

h1, h2, h3, h4 {
  line-height: 1.3;
  letter-spacing: -1px;
}

/* Typography: Keeps text inside it's box, adds hyphens when a html[lang] attribute is specified */
* {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* base link styles */
a {
  color: inherit;
  text-decoration: none;
}