:root {
	--w95-primary: #c0c0c0;
	--w95-primary-dark: #808080;
	--w95-primary-light: #fff;
	--w95-highlighted: #000080;
	--w95-background: #008080;

	--primary-color:         #666;
	--primary-color-light:   color-mix(in srgb, var(--primary-color), #fff 33%);
	--primary-color-lighter: color-mix(in srgb, var(--primary-color), #fff 50%);
	--primary-color-dark:    color-mix(in srgb, var(--primary-color), #000 33%);
	--primary-color-darker:  color-mix(in srgb, var(--primary-color), #000 50%);
}

* {
	box-sizing: border-box;
}

html {
	min-height: 100%;
	height: 100%;
	overscroll-behavior: none;
}

body {
	min-height: 100%;
}


.dots {
	--dot-color: var(--primary-color-light);
	--bg-color: #484848;

	background-image:
		linear-gradient(90deg, transparent 1px, var(--bg-color) 1px),
		linear-gradient(0deg, var(--dot-color) 1px, var(--bg-color) 1px);
	background-size: 16px 16px;
	background-position: 12px 12px;
}

body {
	max-width: 1000px;
	margin: 0 auto;
	color: #eaeaea;
	display: grid;
	grid:
		"header header" 120px
		"nav    nav   " 32px
		"main   main  " 1fr
		"footer footer" 32px
		/ 200px 1fr;
	gap: 8px;
	font-family: system-ui, sans-serif;
	line-height: 1.5;
	padding-bottom: 8px;
	font-size: 13px;
	background-attachment: fixed;
}

@media (max-width: 1000px) {
	body {
		margin: 0 8px;
		max-width: 100vw;
	}
}

.frame {
	background-color: var(--primary-color);
	box-shadow:
		inset -1px -1px   0    0 #000,
		inset  1px  1px   0    0 var(--primary-color),
		inset -2px -2px   0    0 var(--primary-color-dark),
		inset  2px  2px   0    0 var(--primary-color-light);

	&.main {
		padding: 4px;
	}

	&.modal {
		padding: 3px;
	}

	&.light {
		box-shadow:
			inset -1px -1px   0    0 #000,
			inset  1px  1px   0    0 var(--primary-color-light),
			inset -2px -2px   0    0 var(--primary-color-dark);
	}

	&.inverted {
		box-shadow:
			inset  1px  1px   0    0 var(--primary-color-dark),
			inset -1px -1px   0    0 var(--primary-color-light),
			inset  2px  2px   0    0 #000,
			inset -2px -2px   0    0 var(--primary-color)
	}

	&.inverted.light {
		box-shadow:
			inset  1px  1px   0    0 var(--primary-color-dark),
			inset -1px -1px   0    0 var(--primary-color-light);
	}
}

body > header {
	grid-area: header;
	display: flex;
	flex-flow: column;
	justify-content: center;
	margin-top: 8px;
	background-color: #666;

	& > h1 {
		background-color: var(--primary-color-dark);
		margin: 2px;
		font-size: 36px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		font-family: monospace;
	}
}

body > main {
	width: 100%;
	grid-area: main;
	background-color: #666;
	display: flex;
	flex-flow: column;
	max-width: calc(100vw - 8px*2);

	figure {
		margin: 0;

		& > figcaption {
			font-size: 10px;
			margin-bottom: 8px;
		}

		& > img {
			margin: 2px 4px;
			width: calc(100% - (4px*2));
		}
	}

	img {
		width: 100%;
	}

	#table-of-contents {
		float: right;
	}

	/*& > h1 {
	/*	background-color: var(--primary-color-dark);
	/*	font-size: 13px;
	/*	font-weight: bold;
	/*	margin: 4px;
	/*	padding: 0 4px;
	/*} */

	& > h1 {
		margin: 0 12px 8px 12px;
		border-bottom: 1px solid #d9d9d9;
		padding-bottom: 2px;
		font-family: system-ui, sans-serif;

		&.titlebar {
			position: relative;
			background-color: var(--primary-color-dark);
			font-size: 13px;
			font-weight: bold;
			margin: 4px;
			padding: 0 4px;
			display: flex;
			align-items: center;
			border-bottom: none;

			&.address-book::before {
				content: "";
				display: inline-block;
				position: relative;
				background-image: url(/static/images/address-book.svg);
				width: 16px;
				height: 16px;
				margin-right: 4px;
			}

			&.computer::before {
				content: "";
				display: inline-block;
				position: relative;
				background-image: url(/static/images/computer.svg);
				width: 16px;
				height: 16px;
				margin-right: 4px;
			}

			&.user-computer::before {
				content: "";
				display: inline-block;
				position: relative;
				background-image: url(/static/images/user-computer.svg);
				width: 16px;
				height: 16px;
				margin-right: 4px;
			}

			&.envelope::before {
				content: "";
				display: inline-block;
				position: relative;
				background-image: url(/static/images/envelope.svg);
				width: 16px;
				height: 16px;
				margin-right: 2px;
			}

			&.notepad::before {
				content: "";
				display: inline-block;
				position: relative;
				background-image: url(/static/images/notepad-file.svg);
				width: 16px;
				height: 16px;
				margin-right: 2px;
			}
		}
	}

	& > h1 + ul {
		margin-top: 8px;
	}

	& h2 {
		font-size: 17px;
		margin: 8px 12px;
		font-weight: bold;
		border-bottom: 1px solid #d9d9d9;
		padding-bottom: 4px;
	}

	& > blockquote {
		border-left: 2px solid #ccc;
		margin: 12px;

		& > p {
			margin-left: 8px;
			font-style: italic;
		}
	}

	& ul {
		margin-top: 0;
	}

	& p {
		margin: 4px 12px 8px 12px;

		& > ul {
			margin-top: 0;
		}

		& > code {
			padding: 1px 2px;
			margin: 0 1px;
			background-color: var(--primary-color-dark);
			border-radius: 2px;
		}
	}

	button {
		color: inherit;
		font-size: inherit;
		border: none;
	}

	& > p:last-of-type {
		margin-bottom: 16px;
	}
}

body > nav {
	grid-area: nav;
	display: flex;
	flex-flow: row;
	align-items: center;
	text-transform: uppercase;

	& > *:first-child {
		diisplay: inline-block;
		padding: 0;
		width: 10px;
		height: 100%;
		flex: 0 0 auto;
		background-color: #666;
		box-shadow:
			inset -1px -1px   0    0 #000,
			inset  1px  1px   0    0 var(--primary-color-light),
			inset -2px -2px   0    0 var(--primary-color-dark);
	}

	& > *:last-child {
		width: 100%;
		height: 100%;
		background-color: #666;
		box-shadow:
			inset -1px -1px   0    0 #000,
			inset  1px  1px   0    0 var(--primary-color-light),
			inset -2px -2px   0    0 var(--primary-color-dark);
	}

	& > a {
		text-decoration: none;
		color: inherit;
		font-size: 11px;
		font-weight: bolder;
		display: block;
		height: 100%;
		display: flex;
		align-items: center;
		background-color: #666;
		padding: 0 16px;
		box-shadow:
			inset -1px -1px   0    0 #000,
			inset  1px  1px   0    0 var(--primary-color-light),
			inset -2px -2px   0    0 var(--primary-color-dark);

		&:active {
			box-shadow:
				inset  1px  1px   0    0 var(--primary-color-dark),
				inset -1px -1px   0    0 var(--primary-color-light);
		}

		&:hover {
			text-decoration: none;
		}
	}
}

body > footer {
	grid-area: footer;
	margin-bottom: 8px;
	display: flex;
	flex-flow: row;
	align-items: center;
	background-color: #666;
	font-size: 11px;
	height: 100%;

	& > .content {
		display: flex;
		margin: 8px;
		height: 100%;
		width: 100%;
		align-items: center;
		justify-content: center;
	}
}

a,
a.footnote-ref,
a.footnote-back {
	color: #ffad33;
	text-decoration: none;
}

a:hover {
	color: #ffad33;
	text-decoration: underline;
}

hr {
	border: none;
	border-top: 1px solid var(--primary-color-dark);
	border-bottom: 1px solid var(--primary-color-light);
	margin: 0 2px 0 1px;

	& + p {
		margin-top: 16px !important;
	}

	& + h1 {
		margin-top: 2px !important;
	}
}

section#footnotes {
	font-size: 11px;
	margin-top: auto;

	p {
		margin: 0 12px 0 0;
	}

	a.footnote-back {
		margin-left: 4px;
	}
}

.columns-2 {
	display: grid;
	grid:
		auto auto
		/ 50% 50%;
}

div.sourceCode {
	margin: 8px 12px;
	max-width: 100%;
	overflow: auto;
	background-color: var(--primary-color-darker);
	box-shadow:
		inset  1px  1px   0    0 var(--primary-color-dark),
		inset -1px -1px   0    0 var(--primary-color-light);

	& > pre.sourceCode {
		margin: 0;
		padding: 8px;
	}
}

#email-decode:active {
	box-shadow:
		inset  1px  1px   0    0 var(--primary-color-dark),
		inset -1px -1px   0    0 var(--primary-color-light);
}