h1, h2, h3, h4, h5, h6 {
	font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
	margin: 0;
}
html {
	background-color: #e0e0e5;
	height: 100%;
	padding-bottom: 10px;
}

body {
	display: flex;
	flex-direction: column;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	margin: 10px auto;
	max-width: 100ch;
	min-height: 90%;
	padding: 1.5em;
	padding-top: 2.5em;
	background-color: #ffffff;
	box-shadow: 0 0 5px 0px gray;
}

main {
	padding: 0 1ch;
}

header {
	width: 100%;
	text-align: center;
}

header h1 {
	font-size: 3rem;
	font-weight: normal;
}

footer {
	width: 100%;
	text-align: center;
}

footer #build-date{
	opacity: 70%;
	font-size: 0.8rem;
}

.flex-h {
	display: flex;
	flex-direction: row;
	gap: 1.1em;
}

#articles {
	display: flex;
	flex-direction: column;
	gap: 3em;
	height: fit-content;
}

article {
	padding: 1ch 0;
	text-align: justify;
	overflow-y: scroll;
	/* background-color: #0fffff; */
}

article > div {
	position:relative;
}

article div.description {
	width: fit-content;
	/* display: block; */
	flex-grow: 1;
	transition: flex-grow 1s;
}

article img, article a {
	width: 100%;
	height: auto;
	flex-grow: 1;
	grid-column: 0 / 3;
	pointer-events: auto;
}

article div.flex-h:has(a:hover > img) {
	gap: 0;
}

article div.flex-h:has(a:hover > img) .site-text {
	display: none;
	width: 0;
}
article div.flex-h:has(a:hover > img) .flex-spacer {
	width: 0;
}

.flex-spacer {
	flex-grow: 1;
	width: 100%;
	transition: 0.8s width;
}

article .site-text {
	position: absolute;
	top:0;
	left:0;
	z-index: 1;
}

article .site-image {
	position: relative;
	z-index: 10;
	pointer-events: none;

}

#toc a {
	color: inherit;
}

#toc a:hover {
	color: #505050
}

@media screen and (max-width:110ch) {
	body {
		margin-top: 0;
	}
}
@media screen and (orientation:portrait) {
	body {
		margin-top: 0;
	}
	article div.flex-spacer {
		display:none;
	}
	article div.site-text {
		position: relative;
	}
}

@media screen and (max-width: 900px) {
	body {
		margin-top: 0;
	}
	article div.flex-spacer {
		display:none;
	}
	article div.site-text {
		position: relative;
	}
}