html {
	background-image: url("../images/background-squares.png");
	background-repeat: repeat;
	font-family: "Roboto Serif", serif;
	overflow-x: hidden;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	margin-top: 81px;
}

body {
	min-height: 100vh;
	overflow-x: hidden;
	font-size: 18px;
}

/* Headers */

h1, h2, h3, h4, h5, h6 {
	font-family: "Lexend", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: var(--text);		
	margin: 0 auto;
	font-size: 42px;
	line-height: 64px;
	font-weight: 900;
	text-align: center;
}

h1 {
	padding: 100px 0;
	text-shadow: 2px 2px #F0004A80, /* --accent-color with 80% transparency */
				 4px 4px #7E7E7E80; /* --gray with 80% transparency */
}

h1.no-shadow, h2.no-shadow, h3.no-shadow, h4.no-shadow, h5.no-shadow, h6.no-shadow {
	text-shadow: none;
}

.mu-container > h1, .mu-container > h2, .mu-container > h3, .mu-container > h4, .mu-container > h5, .mu-container > h6 {
	margin-top: 100px;
}

h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
	font-weight: 700;
}

h1.light {
	color: var(--off-white);
}

@media (min-width: 768px) {
	h1.mu-h1-callout {
		padding: 125px 0;
	}

	h1.mu-h1-callout::before{
		bottom: calc(125px + 29px);
	}
}

@media (min-width: 1200px) {
	h1.mu-h1-callout {
		padding: 125px 0;
	}
}

h2 {
	font-size: 26px;
	line-height: 32px;
}


h3 {
	font-size: 22px;
	line-height: 28px;
}

@media (min-width: 1200px) {
	h3.callout {
		margin-top: 75px;
	}
}

h4 {
	font-size: 16px;
	line-height: 24px;
}

/* Text */

a { 
	color: var(--accent-color);
	text-decoration: none;
	font-weight: 500;
}

a.small, p.small a {
	font-size: 16px;
	line-height: 20px;
}

p.medium {
	font-weight: 500;
}

p strong {
	font-weight: 700;
}

p .hint {
	font-size: 16px;
	line-height: 24px;
	font-weight: 300;
	font-style: italic;
}

/* Block Quote */
blockquote {
	position: relative;
}

p.small {
	font-size: 14px;
	line-height: 20px;
}


blockquote:not(.kg-blockquote-alt) {
	border-left: var(--border-width-thin) solid var(--accent-color);
	padding-left: 15px;
	margin-left: 58px;
}

blockquote:not(.kg-blockquote-alt)::before {
	content: "\f10e";
	color: var(--accent-color);
	position: absolute;
	display: block;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 50px;
	left: -60px;
	top: -10px;
}

blockquote.kg-blockquote-alt {
	margin: 50px 0;
	font-size: 25px;
	font-weight: 500;
}

blockquote.kg-blockquote-alt::before {
	content: " ";
	border-top: var(--border-width-thin) solid var(--accent-color);
	display: block;
	width: 75px;
	position: absolute;
	left: calc(50% - calc(75px / 2));
	top: -30px;
}

blockquote.kg-blockquote-alt::after {
	content: " ";
	border-top: var(--border-width-thin) solid var(--accent-color);
	display: block;
	width: 75px;
	position: absolute;
	left: calc(50% - calc(75px / 2));
	bottom: -30px;
}

.sans-serif {
	font-family: "Lexend", sans-serif;
}

/* Highlights */
mark {
	background-color: transparent;
	position: relative;
	background-color: color-mix(in srgb, var(--accent-color), transparent 65%);
	padding: 0 3px;
	border-radius: 0.2em;
}

/* Container */
.mu-container {
	margin: 80px 30px 0 30px;
}

@media (min-width: 768px) {
	.mu-container {
		margin: 80px 100px 0 100px;
	}
}

@media (min-width: 1200px) {
	.mu-container {
		margin: 80px 220px 0 220px;
	}
}

@media (min-width: 1700px) { /* content is >1200px wide here */
	.mu-container {
		width: 1400px;
		margin: 80px auto 0;
	}
}


.mu-post-data {
	color: var(--gray);
	font-size: 14px;
	text-align: right;
	margin: 0 15px 15px 0;
	display: inline;
}

.mu-post-data span {
	color: var(--black);
}

/* Cleanup defaults */

body{
	margin: 0;
}


.bordered-section {
	padding: 30px;
	border: var(--border-width-thin) solid #7E7E7E40; /*--gray variable with 40% opacity*/
	border-radius: var(--border-radius-large);
	margin: 30px 0;
	background-color: var(--off-white);
}

.bordered-section > h1:first-of-type {
	margin-top: 0;
}

.bordered-section > h1 {
	margin: 30px 0;
	padding: 0;
}


.mu-drop-shaddow {
	text-shadow: 2px 2px #F0004A80, /* --accent-color with 80% transparency */
			     4px 4px #7E7E7E80; /* --gray with 80% transparency */
}

img.mu-drop-shaddow {
	border: var(--border-width-thin) solid var(--gray);
	box-shadow: 4px 4px 0px 0px #7E7E7E80, 
				2px 2px 0px 0px #F0004A80;
}

.purple {
	color: var(--empethetic-violet);
}

.accent-color {
	color: var(--accent-color);
}

.left {
	text-align: left;
}