:root {
	--golden-ratio: 1.618;
	--golden-ratio-em: 1.618rem;
	--golden-ratio-rem: 1.618rem;
	--golden-ratio-decimal-rem: 0.1618rem;
	--golden-ratio-px: 1.618px;
	--silver-ratio: 2.414;
	--silver-ratio-em: 2.414rem;
	--silver-ratio-rem: 2.414rem;
	--silver-ratio-px: 2.414px;
	--brown-ratio: 0.875;
	--brown-ratio-rem: 0.875rem;
	--brown-ratio-em: 0.875em;
	--almost-black: #121212;
}

body {
	font-size: 1.5em;
}

.vertical-line-text {
	position: relative;
	padding-left: 1rem;
	border-left: 0 solid transparent;
	padding-right: var(--golden-ratio-rem);
}

.vertical-line-text::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--golden-ratio-px);
	background-color: currentColor;
}

.link-plain {
	color: black;
	text-decoration: none;
}

.link-dark {
	color: black;
}

.img-bg {
	position: absolute;
	transform-origin: center;
	z-index: -1;
}

.emphasis-inverted {
	color: white;
	background-color: var(--almost-black);
	padding-top: 0.0em;
	padding-bottom: 0.14em;
	padding-left: 0.14em;
	padding-right: 0.14em;
}

.light-dark {
	color: #222222;
}

.light-white {
	color: #DDDDDD;
}

.br-soft {
	display: block;
	height: 0.85em;
}

.br-softer {
	display: block;
	height: 0.5em;
}

.br-softest {
	display: block;
	height: 0.15em;
}

.code-style {
	font-family: var(--bs-font-monospace);
	font-size: var(--brown-ratio-em);
}

.focus-rectangle {
	position: relative;
}

.focus-rectangle::before {
	content: '';
	position: absolute;
	top: -1.2em;
	bottom: -1.2em;
	left: 1em;
	right: -0.2em;
	background-color: #0000000a;
	z-index: -1;
}

.focus-rectangle-sm {
	position: relative;
}

.focus-rectangle-sm::before {
	content: '';
	position: absolute;
	top: -300%;
	bottom: -70%;
	left: -1.65%;
	right: 65%;
	background-color: #0000000c;
	z-index: -1;
}

.focus-rectangle-intro {
	position: relative;
}

.focus-rectangle-intro::before {
	content: '';
	position: absolute;
	top: -10.25em;
	bottom: -5em;
	left: 5.5em;
	right: 0.5em;
	background-color: #f5f5f5;
	z-index: -1;
}

.p-6 { padding: 4rem !important; }
.p-7 { padding: 4.5rem !important; }
.p-8 { padding: 5rem !important; }
.p-9 { padding: 5.5rem !important; }
.px-6 { padding-left: 4rem !important; padding-right: 4rem !important; }
.py-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.px-7 { padding-left: 4.5rem !important; padding-right: 4.5rem !important; }
.py-7 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
.px-8 { padding-left: 5rem !important; padding-right: 5rem !important; }
.py-8 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.px-9 { padding-left: 5.5rem !important; padding-right: 5.5rem !important; }
.py-9 { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }

.m-6 { margin: 4rem !important; }
.m-7 { margin: 4.5rem !important; }
.m-8 { margin: 5rem !important; }
.m-9 { margin: 5.5rem !important; }
.mx-6 { margin-left: 4rem !important; margin-right: 4rem !important; }
.my-6 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
.mx-7 { margin-left: 4.5rem !important; margin-right: 4.5rem !important; }
.my-7 { margin-top: 4.5rem !important; margin-bottom: 4.5rem !important; }
.mx-8 { margin-left: 5rem !important; margin-right: 5rem !important; }
.my-8 { margin-top: 5rem !important; margin-bottom: 5rem !important; }
.mx-9 { margin-left: 5.5rem !important; margin-right: 5.5rem !important; }
.my-9 { margin-top: 5.5rem !important; margin-bottom: 5.5rem !important; }

.lrcontrast-parent {
	position: relative;
}

.lrcontrast-child-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, rgba(12,12,12,1) 0%, rgba(12,12,12,1) 40%, rgba(12,12,12,0) 40%);
	color: transparent;
}

.lrcontrast-child-text {
	position: relative;
	background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 40%, rgba(0,0,0,1) 40%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.lrcontrast-child-text-mustard {
	background: linear-gradient(to right, rgba(255,226,91,1) 0%, rgba(255,226,91,1) 40%, rgba(0,0,0,1) 40%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.lrcontrast-child-text-pink {
	background: linear-gradient(to right, pink 0%, pink 40%, rgba(0,0,0,1) 40%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.lrcontrast-parent-inv {
	position: relative;
}

.lrcontrast-child-background-inv {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to left, rgba(12,12,12,1) 0%, rgba(12,12,12,1) 40%, rgba(12,12,12,0) 40%);
	color: transparent;
}

.lrcontrast-child-text-inv {
	position: relative;
	background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 40%, rgba(0,0,0,1) 40%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.lrcontrast-child-text-inv-mustard {
	background: linear-gradient(to left, rgba(255,226,91,1) 0%, rgba(255,226,91,1) 40%, rgba(0,0,0,1) 40%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.lrcontrast-child-text-inv-pink {
	background: linear-gradient(to left, pink 0%, pink 40%, rgba(0,0,0,1) 40%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.serif {
	font-family: 'Merriweather', 'Playfair Display', 'PT Serif', 'Bitter', Georgia, serif;
}