/** 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 {
    font-weight: bolder;
}

i {
    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%;
}

/* 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, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  letter-spacing: -1px;
}

h1, h2, h3 {
    font-weight: bold;
}

h4, h5, h6 {
    font-weight: 600; /* semi-bold */
}

h1 {
  font-size: 2rem;
  line-height: 1.15;
  margin-top: 1.8em;
  margin-bottom: 0.6em;
}

h2 {
  font-size: 1.75rem;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

h3 {
  font-size: 1.5rem;
  margin-top: 1.4em;
  margin-bottom: 0.4em;
}

h4 {
  font-size: 1.25rem;
  margin-top: 1.2em;
  margin-bottom: 0.3em;
}

h5, h6 {
  font-size: 1rem;
  margin-top: 0.6em;
  margin-bottom: 0.3em;
}

:is(h1, h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6) {
  margin-top: 0;
}

:is(article, main, section) > :first-child {
  margin-top: 0;
}


/* 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;
}