@font-face {
	font-family: "Lucida Sans";
	src: url("/LSANS.woff2");
}

html {
	font-family: "Lucida Sans";
	font-size: 13pt;
	padding: 5px;
	margin: 0;
	max-width: 100vw;
	min-height: 100vh;
	background-size: 400px;
	background-repeat: no-repeat;
	background-position: bottom left;
	background-attachment: fixed;
}

pre {
	tab-size: 4;
}

@media screen and (min-width: 800px) {
	main.file {
		display: flex;
		flex-direction: column;
		max-height: calc(100vh - 100px);
		overflow-x: hidden;
		overflow-y: auto;
	}

	pre.hl {
		max-width: 120ch;
		min-width: min(100%, 80ch);
	}

	.file-view {
		display: grid;
		grid-template-areas: "dir main";
		grid-template-columns: 200px auto;
	}

	.file-view h1 {
		margin-left: 3px;
	}

	main {
		grid-area: main;
		margin-left: 5px;
		margin-right: 5px;
	}

	.file-view-dir > .dir-list {
		padding-top: 33pt;
		grid-area: dir;
		max-height: calc(100vw - 33pt - 10px);
		overflow-y: auto;
		overflow-x: hidden;
		white-space: nowrap;
		top: 0;
	}
}

.h-card {
	border: 2px solid black;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	background-color: #ffffea;
	padding-left: 10px;
	padding-right: 10px;
}

.view-source summary {
	border-bottom: #8888cc;
	font-size: 10pt;
}

.view-source {
	margin-top: 10px;
	font-size: 8pt;
	border: 2px solid #55aaaa;
	background-color: #eaffff;
	max-width: 100ch;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	padding: 2px;
}

.view-source h2 {
	font-family: monospace;
}

.view-source pre {
	white-space: pre-wrap;
}

.filepath {
	font-family: monospace;
	font-size: 18pt;
}

.filepath a {
	text-decoration: none;
}

.dir-list {
	font-family: monospace;
	padding-left: 0;
	background-color: rgba(255, 255, 255, 75%);
}

details .dir-list {
	margin-left: 3px;
	border-left: 1px solid #eee;
	padding: 0;
	margin-bottom: -1px;
}

.dir-list li {
	padding: 0;
	list-style: none;
}

.dir-list li > a {
	padding: 4px;
	padding-left: 4ch;
	padding-right: 5px;
	display: block;
	text-decoration: none;
}

.dir-list summary {
	padding: 4px;
}

.dir-list summary > a {
	padding: 4px;
}

.dir-list details {
	padding-left: 4ch;
}

.dir-list a:hover, .dir-list summary:hover {
	background-color: #0002;
}

.dir-list li:not(last-of-type) {
	border-bottom: 1px solid #eee;
}

pre.hl {
	font-size: 12pt;
	whitespace: pre-wrap;
	padding: 5px;
	margin: 0;
}

.file-view .dir-list li > a {
	padding-left: 5px;
	padding-right: 5px;
}

.file-view .dir-list {
	font-size: 12pt;
}