@media (prefers-color-scheme: dark) {
		:root {
			--text: white;
			--border: #5a7678;
			--accent: #74C365;
			--gradientBottom: rgb(0, 50, 60);
			--gradientTop: darkslategrey;
			a:link { color: lightblue; }
		}
		header {
			background: url('***dark mode banner image***');
		}
	}

	body {
		padding: 10px;
		font-family: 'MS PGothic', sans-serif;
		color: var(--text);

		/* page background pattern */
		background: url("RetroRainRuins.gif") no-repeat center center fixed;
		-webkit-background-size: cover;
			 -moz-background-size: cover;
			 -o-background-size: cover;
				background-size: cover;
	}

	.container {
		max-width: 55rem;
		margin: 5vw auto 12px auto;
		border: 6px outset var(--border);
		border-color: white;
		outline: 5px solid;
		outline-color: black;
		outline-offset: 0px;
		display: flex;
		flex-wrap: wrap;
		padding: 5px;
		gap: 5px;

		/* container background pattern */
		background-color: #387B99;
	}