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

/* 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 {
  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 {
  max-width: var(--p-max-width, 65ch);
  text-wrap: pretty;
}



/* Style */
:root {
    --fs: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
    --fw: normal;

    --fs--2: clamp(0.64rem, 0.7134rem + -0.0947vi, 0.6944rem);
    --fs--1: clamp(0.8rem, 0.8449rem + -0.058vi, 0.8333rem);
    --fs-0: clamp(1rem, 1rem + 0vi, 1rem);
    --fs-1: clamp(1.2rem, 1.1826rem + 0.087vi, 1.25rem);
    --fs-2: clamp(1.44rem, 1.3974rem + 0.213vi, 1.5625rem);
    --fs-3: clamp(1.728rem, 1.6497rem + 0.3915vi, 1.9531rem);
    --fs-4: clamp(2.0736rem, 1.9457rem + 0.6397vi, 2.4414rem);
    --fs-5: clamp(2.4883rem, 2.2923rem + 0.9799vi, 3.0518rem);
}
@media (prefers-color-scheme: light) {
    :root {
        --bg: hsla(0, 0%, 95%, 1);
        --txt: hsla(0, 0%, 5%, 1);
    }

}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: hsla(0, 0%, 5%, 1);
        --txt: hsla(0, 0%, 95%, 1);
    }
}


body {
    font-family: var(--fs);
    font-weight: var(--fw);
    font-size: var(--fs-0);
    color: var(--txt);
    background: var(--bg);

    display: grid;
    grid-template-rows: auto 1fr auto;
}
main {}
main section {
    padding: 1rem;
}
main section h1 {
    font-size: var(--fs-5);
}
footer {
    padding: 1rem;
    background: hsla(0, 0%, 100%, 0.01);
    font-size: var(--fs--1);
}