mattrbld/css/main.css

:root {
	color-scheme: light dark;

	--color-light: #ddd;
  --color-dark: #222;
  --color-teal: #014d4e;
  --color-pink: #ffb2d0;

  --color-bg: light-dark(var(--color-light), var(--color-dark));
  --color-text: light-dark(var(--color-dark), var(--color-light));
  --color-accent: light-dark(var(--color-teal), var(--color-pink));
}

/* numbered components are from https://www.joshwcomeau.com/css/custom-css-reset/ */
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Increase line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: sans-serif;
  color: black;
}

#content {
 	width: 65%;
  max-width: 1800px;
  margin: 1rem auto;
}

@media (max-width: 1100px) {
  #content {
    width: 85%;
  }
}

@media (max-width: 650px) {
  #content {
    width: 92%;
  }
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

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

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

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

/* Basic elements */
h1, h2, h3, h4, h5, h6 {
  font-family: serif;
}

h1, h2, h3, h4, h5, h6,
a {
  color: var(--color-accent);
}

a {
  padding: .1rem;
  border-radius: .05rem;
}

a:focus-visible {
  outline: solid var(--color-accent);
}

.hero {
	aspect-ratio: 32 / 9;
	object-fit: cover;
}