fedi-classifieds/css/main.css

:root {
	color-scheme: light dark;

	--color-dark: #2e303e;
	--color-dark-alt: #3c3f52;
	--color-light: #ebeeef;
	--color-light-alt: #dbe1e3;
	--color-cyan-dark: #18737b;
	--color-cyan-light: #25b0bc;
	--color-pink-dark: #94195d;
	--color-pink-light: #ee9fcb;

	--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-cyan: light-dark(var(--color-cyan-dark), var(--color-cyan-light));
	--color-cyan-flipped: light-dark(var(--color-cyan-light), var(--color-cyan-dark));
	--color-pink: light-dark(var(--color-pink-dark), var(--color-pink-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";
	font-weight: 300;
}

main {
	padding-bottom: 2rem;
	border-bottom: solid var(--color-pink);
}

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

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

h1, 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: 1rem;
}

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

p {
	margin-bottom: 1rem;
}

a {
	color: var(--color-cyan);
}

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

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

main li {
	margin-left: 1rem;
}

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