:root {
	/* tan */
	--col-bg-dark: #272727;
	--col-bg-norm: #4c4c4c;
	--col-bg-lite: #727272;
	--col-bg-high: #9f9f9f;

	/* purple */
	--col-fg-dark: #474747;
	--col-fg-norm: #e7e7e7;
	--col-fg-emph: #f7f7f7;
	--col-fg-mute: #a7a7a7;
	--col-fg-link: #b3ceff;
	--col-fg-vstd: #f1c3ff;

	--col-shadow: #35343CB3;
	--col-frame-bd: #F0F0F0;

	/* sage */

	--menu-width: calc(100px + 10vw);
	--text-size-base: clamp(12px, 3vw, 18px);
	--text-size-emph: clamp(14px, 4vw, 26px);
	--text-size-head: clamp(14px, 5vw, 32px);
	--gutter-width: calc(var(--text-size-emph) * 5 + 4vmax);
}

body {
	background-color: var(--col-bg-norm);
	color: var(--col-fg-norm);
	margin: 5%;
	font-size: calc(1em + 0.5vw);
	font-family: sans-serif;
}

.grid {
	display: grid;
	grid-template-columns: var(--menu-width) 1fr;
	grid-column-gap: 3vw;
	/* background-color: blue; */
}

#logo {
	display: flex;
	flex-direction: column;
	padding-bottom: 3vh;
	justify-content: center;
	align-items: center;
}

#logo > a > img {
	height: calc(7px + 7vw);
	filter: hue-rotate(10deg) saturate(150%) drop-shadow(5px 5px 5px var(--shadow-col));
}

.menu {
	/*display: inline-block;*/
	/*text-align: center;*/
	/*margin: 0vh 35vw;*/
}

.menu > ol {
	cursor: pointer;
	/*background-color: var(--col-bg-lite);*/
	/*border-color: var(--col-bg-lite);*/
	/*border-width: medium;*/
	/*border-style: solid;*/
	/*max-height: 70vh;*/
}

@counter-style greek {
	system: extends lower-greek;
	suffix: "ʹ";
}

#quote {
	width: 40vw;
	color: var(--col-fg-emph);
	background-color: var(--col-bg-lite);
	padding: 1vw;
	padding-left: 1.5vw;
	border-radius: 1.5vw;
	margin-left: 5vw;
	line-height: 125%;
}

#quote > q {
	font-style: italic;
}

#quote > q::after {
	display: none;
}

#quote > span {
	font-weight: bold;
	margin-left: 2vw;
}

#sections p {
	width: 60vw;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ol {
	list-style-type: greek;
	margin-left: 2vw;
	padding: 0;
}

li > a {
	font-weight: bold;
}

li {
	/*display: inline-block;*/
	padding: 1vw;
}

/*li::marker {*/
/**/
/*}*/

a {
	text-decoration: none;
	color: var(--col-fg-link);
}

a:hover, a:visited, a:active {
	color: var(--col-fg-vstd);
}

/*** Footer ***/

footer {
	font-size: small;
	position: fixed;
	bottom: 0;
	right: 0;
	margin-left: 2vw;
	margin-right: 2vw;
	margin-bottom: 2vh;
	/*max-width: calc(100% - (var(--gutter-width) + 8vmax));*/
	max-height: 40px;
}

footer > p {
	float: right;
	width: 80%;
	margin: 0;
}

footer > div:first-child {
	float: left;
	width: 88px;
	margin: 1em 1vw;
}

footer > div:last-child {
	float: right;
	max-width: calc(100% - (88px + 4vw));
}

footer > div > a > img:hover {
	filter: drop-shadow(0px 0px 5px white);
	transition: all 500ms ease-in-out;
}