mercury-site/_scss/_base.scss

body {
	image-rendering: pixelated;
	line-height: 1.6;
	font-size: 18px;
	color: $foreground-color;
	background: $background-color;
	text-align: center;
	margin: 0;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20px;
	gap: 2em;
}

.page {
	display: flex;
	flex-direction: column;
	justify-content: right;
	align-items: left;
	text-align: left;
	margin-left: 40em;
	margin-right: 40em;
}

/* Smooth scrolling IF user doesn't have a preference due to motion sensitivities */
@media screen and (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

h1, h2, h3 {
	line-height: 1.2;
}

h1 {
	border-bottom: 4px solid $accent-color;
}
h2 {
	margin-top: 1cm;
	margin-bottom: 0;
}
h3 {
	margin-top: 1cm;
	margin-bottom: 0;
}


::selection {
	background-color: $foreground-color;
	color: $background-color;
}

a {
	color: $accent-color;

	&:hover {
		color: $accent-color-light;
	}

	&:visited {
		color: $accent-color-dark;
	}
}

pre {
	border-radius: $radius;
	padding: 4px;
}

blockquote {
  	margin-left: 5mm;
  	padding-left: 2mm;
	color: scale-color($foreground-color, $lightness: -10%);
}

blockquote {
  border-left: 4px solid #F28FAD;
}

blockquote blockquote {
  border-left: 4px solid #F8BD96;
}

blockquote blockquote blockquote {
  border-left: 4px solid #FAE3B0;
}

blockquote blockquote blockquote blockquote {
  border-left: 4px solid #ABE9B3;
}

blockquote blockquote blockquote blockquote blockquote {
  border-left: 4px solid #B5E8E0;
}

blockquote blockquote blockquote blockquote blockquote blockquote {
  border-left: 4px solid #96CDFB;
}

blockquote blockquote blockquote blockquote blockquote blockquote blockquote {
  border-left: 4px solid #DDB6F2;
}

code, pre {
	font-family: "Cozette", "Fira Code", monospace;
	font-size: 16px;
	overflow: auto;
}

code {
	display: inline;
}