body {
	color: black;
	background-color: blue;
	background-image: url("assets/win95setup.webp");
	background-size: cover;
	image-rendering: pixelated;
	font-family: "Courier New", Courier, monospace;
}

img {
	image-rendering: auto;
}

.headercontainer {
	display: grid;
}

.black-background {
	background-color: black;
	height: 32px;
}

.hit-counter {
	height: 31px;
	width: 160px;
}

.construction {
	background-color: #f70;
}

.jary {
	height: 100%;
	width: 100%;
	image-rendering: auto;
	object-fit: cover;
	object-position: left;
}

.center {
	text-align: center;
}

.gridcontainer {
	display: grid;
	background-color: #c0c0c0;
	padding: 10px;

	max-width: 1000px;
	margin: 0 auto;

	gap: 10px;

	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(15, min(1fr, 45px));
	grid-template-areas:
		"header header header sidehead"
		"header header header sidehead"
		"nav nav nav nav"
		"sidebar content content content"
		"sidebar content content content"
		"sidebar content content content"
		"sidebar content content content"
		"sidebar content content content"
		"sidebar content content content"
		"sidebar content content content"
		"sidebar content content content"
		"sidebar content content content"
		"sidebar content content content"
		"sidebar content content content"
		"footer footer footer footer";
}

.gridcontainer > * {
	text-align: center;
	border: black 4px ridge;
	border-top: white 4px ridge;
	border-left: white 4px ridge;
}

.gridcontainer #header {
	grid-area: header;
	display: flex;
	justify-content: center;
	align-items: center;
}

.gridcontainer #sidehead {
	grid-area: sidehead;
	border: white 4px groove;
	border-top: black 4px groove;
	border-left: black 4px groove;
	background-color: #b0b0b0;
}

.gridcontainer #nav {
	grid-area: nav;
}

.navcontainer {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border: none;
}

.navcontainer a {
	border: black 4px ridge;
	border-top: white 4px ridge;
	border-left: white 4px ridge;
	line-height: 200%;
	text-decoration: none;
	color: unset;
}

.navcontainer a:active {
	border: white 4px groove;
	border-top: black 4px groove;
	border-left: black 4px groove;
	background-color: #b0b0b0;
	text-decoration: none;
}

.topcontainer {
	flex-direction: row;
	justify-content: space-around;
}

.topcontainer a {
	flex-grow: 1;
}

.gridcontainer #sidebar {
	grid-area: sidebar;
}

.gridcontainer #content {
	grid-area: content;
	text-align: left;
	padding: 5px;
	overflow-y: auto;
	max-height: 75vh;
}

.gridcontainer #content img {
	max-width: 100%;
	image-rendering: auto;
}

.gridcontainer #footer {
	grid-area: footer;
}

.animated-button {
	height: 31px;
	width: 88px;
}

.stamp {
	height: 57px;
	width: 99px;
	object-fit: contain;
}

.rainbow-divider {
	background-image: url("assets/stripe3.webp");
	background-repeat: repeat-x;
	height: 9px;
	border: none;
}

.paperclip-divider {
	background-image: url("assets/paperclips.webp");
	background-repeat: repeat-x;
	height: 28px;
	border: none;
}

.construction-image {
	height: 38px;
	width: 38px;
}

.x-divider {
	background-image: url("assets/blackstitches.webp");
	background-repeat: repeat-x;
	height: 15px;
	border: none;
}

.chain-divider {
	background-image: url("assets/greenchain.webp");
	background-repeat: repeat-x;
	height: 11px;
	border: none;
}

.powerline-divider {
	background-image: url("assets/powerlines.webp");
	background-repeat: repeat-x;
	height: 31px;
	border: none;
}

figure > img {
	width: 100%;
}

ul.two-column {
	column-count: 2;
}