leecat.art/css/main.css

:root {
	color-scheme: light dark;

	--font-family: 'Atkinson Hyperlegible Next', sans-serif;
	--font-family-code: 'Atkinson Hyperlegible Mono', monospace;

	--color-dark: #2e303e;
	--color-dark-alt: #3c3f52;
	--color-light: #ebeeef;
	--color-light-alt: #dbe1e3;

	--color-teal-dark: #18737b;
	--color-teal-light: #25b0bc;
	--color-pink-dark: #94195d;
	--color-pink-light: #ee9fcb;

	--color-shadow: rgba(2, 10, 40, .25);

	/* Used for syntax highlighting */
	--color-red-light: #e95678;
	--color-orange-light: #fab795;
	--color-yellow-light: #fbe6bc;
	--color-green-light: #29d398;
	--color-blue-light: #26bbd9;
	--color-purple-light: #ddaeea;
	--color-grey-light: #b9c3c6;

	--color-red-dark: #991433;
	--color-orange-dark: #883206;
	--color-yellow-dark: #6a4906;
	--color-green-dark: #125940;
	--color-blue-dark: #125663;
	--color-purple-dark: #722999;
	--color-grey-dark: #4a4b64;

	--color-text: light-dark(var(--color-dark), var(--color-light));
	--color-bg: light-dark(var(--color-light), var(--color-dark));

	--color-text-alt: light-dark(var(--color-dark-alt), var(--color-light-alt));
	--color-bg-alt: light-dark(var(--color-light-alt), var(--color-dark-alt));

	--color-teal: light-dark(var(--color-teal-dark), var(--color-teal-light));
	--color-pink: light-dark(var(--color-pink-dark), var(--color-pink-light));

	--color-red: light-dark(var(--color-red-dark), var(--color-red-light));
	--color-orange: light-dark(var(--color-orange-dark), var(--color-orange-light));
	--color-yellow: light-dark(var(--color-yellow-dark), var(--color-yellow-light));
	--color-green: light-dark(var(--color-green-dark), var(--color-green-light));
	--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
	--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));

	--header-offset: 3.1rem;
}

/* Base */

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

body {
	font-family: var(--font-family);
	color: var(--color-text);
	background-color: var(--color-bg);
}

main {
	width: 60vw;
	max-width: 1200px;
	margin: 0 auto;
	scroll-margin-top: var(--header-offset);
}

@media (max-width: 650px) {
	main {
		width: 92vw;
	}
}

/* Headers */
h1, h2, h3, h4, h5, h6 {
	line-height: 1.25;
	color: var(--color-teal);
	scroll-margin-top: var(--header-offset);
}

h1 {
	margin-top: 3rem;
	font-size: 3.5rem;
}
h2 {
	margin-top: 1rem;
	font-size: 2.2rem;
}
h3 {
	margin-top: 1.5rem;
	font-size: 1.6rem;
}
h4, h5, h6 {
	margin-top: 1rem;
	font-size: 1.2rem;
}

/* Images */
img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 1rem;
}

/* Paragraphs */
p {
	margin: 1.25rem 0;
	line-height: 1.4;
}

strong,
b {
	font-weight: 900;
}

/* Links */
a {
	color: var(--color-font);
	border-radius: .25rem;
	text-decoration: underline;
	text-decoration-style: solid;
	text-decoration-thickness: .2em;
	text-decoration-color: var(--color-teal);
	transition: text-decoration-thickness .5s;
}

a:focus-visible {
	text-decoration: none;
	outline: .15rem solid var(--color-teal);
}

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

a:active {
	text-decoration-thickness: .4em;
}

/* Lists */
::marker {
	color: var(--color-pink);
}

ul, ol, li {
	margin-left: 1rem;
}

li {
	line-height: 1.5;
}

li ul, li ol {
	margin: .5rem 0;
}

/* Blockquotes */
blockquote {
	margin: .5rem 1rem;
	padding: 0 1rem;
	border-radius: .25rem 1rem 1rem .25rem;
	line-height: 1.25;
	border-left: .5rem solid var(--color-pink);
}

blockquote,
blockquote p,
blockquote ol,
blockquote ul {
	background-color: var(--color-bg-alt);
	padding: .5rem;
}

blockquote p {
	margin: 0;
}

/* Tables */
table {
	width: 100%;
	border-spacing: 0; /* border collapse doesn't play nice with radii */
	border-radius: .3rem;
	border: thin solid var(--color-pink);
}

th {
	color: var(--color-bg);
	background-color: var(--color-pink);
}

th, td {
	padding: .5rem;
	text-align: left;
}

tr:nth-child(even) { background-color: var(--color-bg-alt); }
th:not(:first-child) { border-left: thin solid var(--color-bg); }
th:first-child { border-top-left-radius: .25rem; }
th:last-child { border-top-right-radius: .25rem; }
td:not(:first-child) { border-left: thin solid var(--color-pink); }

/* Times */
time {
	color: var(--color-grey);
}

/* Horizontal rules */
hr {
	color: var(--color-teal);
	border: .25rem solid var(--color-teal);
	margin: 2rem 0;
}
hr:last-child {
	margin-bottom: 0;
}