Starter Pack

This is largely inspired by Kevin Powell's video

/** Kevin Powell's reset CSS
 * https://github.com/kevin-powell/website-starter-template-v3/
 * 
 * Remove all animations, transitions and smooth scroll for people that prefer not to see them:
 * https://github.com/kevin-powell/demo-starter-template-with-sass/blob/main/src/sass/base/_reset.scss
 * 
 * 25 lines of CSS is all you need (to start with, anyway):
 * https://www.youtube.com/shorts/ydGti7sLVOc
 *
 * Under the radar CSS features for your CSS reset:
 * https://www.youtube.com/watch?v=cCAtD_BAHNw
 * 
 * A better image reset for your CSS:
 * https://www.youtube.com/watch?v=345V2MU3E_w
 * 
 * Building out a furniture site from Dribbble by Andy Bell:
 * https://piccalil.li/blog/reality-check-1-building-out-a-furniture-site-from-dribbble
 * &
 * https://piccalil.li/blog/a-more-modern-css-reset/
 * 
 * Josh Comeau
 * https://www.joshwcomeau.com/css/custom-css-reset/
 *
 * Animation and transitions' timing function values inspired by the
 * "exponential smoothing" from lisyarus'
 * [blog](https://lisyarus.github.io/blog/posts/exponential-smoothing.html)
*/

:where(html) {
  font-weight: 400;
  font-family: system-ui, sans-serif;

  --color-dark: hsl(0deg 0% 14%);
  --color-light: hsl(0, 0%, 94%);
  /* By default we enable dark mode */
  color-scheme: light dark;
  background-color: var(--color-dark, black);
  color: var(--color-light, white);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  animation-timing-function: cubic-bezier(0, 0.3, 0.1, 1);
  transition-timing-function: cubic-bezier(0, 0.3, 0.1, 1);
}

::selection {
  background-color: var(--color-light, white);
  color: var(--color-dark, black);
}

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

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

html {
  hanging-punctuation: first last;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100svh;
  font-size: 1.125rem;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

main {
  inline-size: min(65ch, 100% - 4rem);
  margin-inline: auto;
}

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

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

p {
  max-inline-size: 65ch;
  text-wrap: pretty;
}

img,
svg,
picture {
  max-width: 100%;
  height: auto;

  display: block;
  vertical-align: middle;
  font-style: italic;
}

a {
  color: hsl(235deg 100% 70%);
  font-weight: 500;
}

a:hover {
  color: hsl(235deg 85% 65%);
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.25em;
  color: currentColor;
}

/* Respects user preferences for dark mode */
@media (prefers-color-scheme: light) {
  :where(html) {
    color: var(--color-dark, black);
    background-color: var(--color-light, white);
  }

  ::selection {
    background-color: var(--color-dark, black);
    color: var(--color-light, white);
  }
}

/* Remove all animations, transitions and smooth scroll for people that prefer
not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

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