fedi-classifieds/css/main.css

:root {
	color-scheme: light dark;

	--color-dark: #222;
	--color-light: #ddd;
	--color-cyan-dark: #134947;
	--color-cyan-light: #40c5be;
	--color-purple-dark: #6007b1;
	--color-purple-light: #ba99fe;

	--color-text: light-dark(var(--color-dark), var(--color-light));
	--color-bg: light-dark(var(--color-light), var(--color-dark));
	--color-gray: rgb(0 0 0 / 15%);
	--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-purple: light-dark(var(--color-purple-dark), var(--color-purple-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-purple);
}

@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;
	}
}

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

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

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

main ul {
	margin-left: 1rem;
}

main li {
	margin-left: 1rem;
}

footer {
	padding: 1rem 0;
}

footer ul {
	list-style: none;
	display: flex;
	justify-content: space-around;
}

footer li {
	display: inline;
	font-family: "Bebas Neue";
	font-size: 1.15rem;
}

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