andie/assets/styles/main.css

:root {
	color-scheme: light dark;

	--color-dark: #130024;
	--color-light: #ffdff3;
	--color-purple-dark: #570d93;
	--color-purple-light: #be70fe;
	--color-pink-dark: #8f0d66;
	--color-pink-light: #e771c2;
	--color-orange-dark: #ba4f1d;
	--color-orange-light: #e88a5c;

	--color-bg: light-dark(var(--color-light), var(--color-dark));
	--color-text: light-dark(var(--color-dark), var(--color-light));
	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
	--color-pink: light-dark(var(--color-pink-dark), var(--color-pink-light));
	--color-orange: light-dark(var(--color-orange-dark), var(--color-orange-light));
}

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

body {
	color: var(--color-text);
	background-color: var(--color-bg);
	font-family: Verdana, sans-serif;
	width: 65%;
	margin: 0 auto 4rem;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 2.5;
	color: var(--color-pink);
	font-family: Courier, monospace;
}

h1 {
	text-align: center;
	margin-top: 4rem;
	font-size: 2.5rem;
}

h2 {
	margin-top: 2rem;
	font-size: 2rem;
}

h3 {
	margin-top: 1rem;
	font-size: 1.6rem;
}

@media (max-width: 650px) {
	h1 {
		font-size: 2rem;
	}

	h2 {
		font-size: 1.6rem;
	}

	h3 {
		font-size: 1.3rem;
	}
}

img {
	width: 100%;
}

p {
	line-height: 1.3;
}

@media (max-width: 650px) {
	p {
		font-size: .8rem;
	}
}

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

.float-left {
	float: left;
	width: 45%;
	padding: .65rem 1rem .65rem 0;
}

.float-right {
	float: right;
	width: 45%;
	padding: .65rem 0 .65rem 1rem;
}