fedilearns/css/main.css

:root {
	color-scheme: light dark;

	--color-dark: #1c1b19;
	--color-dark-alt: #2e2c28;
	--color-light: #eae0d1;
	--color-light-alt: #cec4b5;
	--color-blurple-dark: #352188;
	--color-blurple-light: #9c8cde;
	--color-green-dark: #105a43;
	--color-green-light: #8fcfbb;

	--color-text: light-dark(var(--color-dark), var(--color-light));
	--color-bg: light-dark(var(--color-light), var(--color-dark));
	--color-gray: light-dark(var(--color-light-alt), var(--color-dark-alt));
	--color-blurple: light-dark(var(--color-blurple-dark), var(--color-blurple-light));
	--color-blurple-flipped: light-dark(var(--color-blurple-light), var(--color-blurple-dark));
	--color-green: light-dark(var(--color-green-dark), var(--color-green-light));
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	color: var(--color-text);
	background-color: var(--color-bg);
	width: 65%;
	max-width: 1400px;
	margin: 0 auto;
	font-family: "Fraunces", serif;
	font-weight: 300;
}

main {
	padding-bottom: 2rem;
}

@media (max-width: 1050px) {
	body {
		width: 85%
	}
}

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

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

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

h1 {
	text-align: center;
	font-size: 3rem;
	margin: 3rem auto;
}

@media (max-width: 650px) {
	h1 {
		font-size: 2.4rem;
		margin-top: 1rem;
	}
}

h2 {
	margin-bottom: .5rem;
}

h3 {
	text-transform: capitalize;
	margin-bottom: .5rem;
}

p {
	margin-bottom: 1rem;
}

a {
	color: var(--color-blurple);
	text-decoration-thickness: .1rem;
	transition: text-decoration-thickness .5s;
	border-radius: .05rem;
}

a:visited {
	color: var(--color-green);
}

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

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

a:visited:focus-visible {
	outline-color: var(--color-blurple);
}

main ul {
	margin-left: 1rem;
	margin-bottom: 1rem;
}

main li {
	margin-left: 1rem;
}

/* iframe is on submission page */
iframe {
	margin: 2rem 0;
}

.teal {
	color: var(--color-blurple);
}