district-dharma/css/main.css

:root {
	color-scheme: light dark;

	--color-dark: #202325;
	--color-light: #e4edf3;
	--color-blue-dark: #0c436d;
	--color-blue-light: #5ca6ce;
	--color-red-light: #bb362a;
	--color-red-dark: #b82e1f;

	--color-text: light-dark(var(--color-dark), var(--color-light));
	--color-bg: light-dark(var(--color-light), var(--color-dark));
	--color-accent: light-dark(var(--color-blue-dark), var(--color-blue-light));
	--color-red: light-dark(var(--color-red-dark), var(--color-red-light));
}

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

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

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

*:focus-visible {
	outline-offset: .1rem;
	outline: .1rem solid var(--color-accent);
	border-radius: .25rem;
}

html {
	height: 100%;
}

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

body {
  line-height: 1.5; /* 4. Increase line-height */
  -webkit-font-smoothing: antialiased; /* 5. Improve text rendering */
  font-family: sans-serif;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: "Atkinson Hyperlegible Next";
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100%;
}

#content {
	width: 65%;
	max-width: 1800px;
	margin-inline: auto;
	margin-block-end: 3rem;
}

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

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

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

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

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

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance; /* 9. Improve line wrapping */
  font-family: serif;
  margin-block-start: 1em;
  color: var(--color-accent);
  font-variant: small-caps;
  font-family: Montserrat;
  font-weight: 400;
}

h1 {
	text-align: center;
	font-size: 3rem;
	margin-block-end: .6em;
}

h2 { font-size: 2rem; }
h3 { font-size: 1.8rem; }

p {
  text-wrap: pretty; /* 9. Improve line wrapping */
  margin-block: 1.25em;
}

a {
	color: var(--color-accent);
	text-decoration-thickness: .15rem;
	transition: text-decoration-thickness .5s;
}

a:visited {
	color: var(--color-text);
	text-decoration-color: var(--color-accent);
}

@media (any-hover: hover) {
	a:hover {
		text-decoration-thickness: .25rem;
	}
}

/* Header/nav/footer */
header {
	height: 20vh;
	padding: 1rem;
	background-color: var(--color-accent);
}

.logo {
	height: 100%;
	width: auto;
}

@media (prefers-color-scheme: light) {
	.dark {
		display: none;
	}
}

@media (prefers-color-scheme: dark) {
	.light {
		display: none;
	}
}

footer {
	background-color: var(--color-accent);
	color: var(--color-bg);
}

footer p {
	text-align: center;
}

footer a,
footer a:visited {
	color: var(--color-bg);
	text-decoration-color: var(--color-bg);
}

/* Misc */
#hero {
	aspect-ratio: 40 / 9;
	object-fit: cover;
}

.inset-left,
.inset-right {
	margin-bottom: 1rem;
}


/* only float on larger screens */
@media (min-width: 551px) {
	.inset-left,
	.inset-right {
		clear: both;
		width: 40%;
		margin: .5rem 0;
	}
	.inset-left {
		float: left;
		margin-right: 1rem;
	}
	.inset-right {
		float: right;
		margin-left: 1rem;
	}
}