@import "colors.css";

body {
	background-image: url("/assets/bg-tile.png");
	background-color: var(--background);
	font-family: "IBM Plex Mono", monospace;
	color: var(--foreground);
	min-height: 95vh;

	display: grid;
	grid-gap: 1rem;
	grid-template-columns: 1fr 4fr 1fr;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
	"header header header"
	"nav main side"
	"footer footer footer";
}

@media (prefers-color-scheme: light) {
	body {
		color: var(--black);
		background-image: url("/assets/bg-tile-light.png");
		background-color: #cccccc;
	}
}

body>header {
	grid-area: header;
	text-align: center;
	margin-left: 8px;
	margin-right: 8px;
	color: var(--green);
	font-style: italic;
	border-bottom: solid 4px var(--magenta);
}

body>header>h1::before {
	content: "[";
	font-style: normal;
}

body>header>h1::after {
	content: "]";
	font-style: normal;
}

nav {
	grid-area: nav;
	margin-left: auto;
	font-style: italic;
}

nav>ul {
	list-style-type: none;
	padding: 0;
}

main {
	grid-area: main;
}

body>footer {
	grid-area: footer;
	margin-left: 8px;
	margin-right: 8px;
	padding-left: 24px;
	padding-right: 24px;
	border-top: 4px solid var(--magenta);

	display: grid;
	grid-template-areas:
	"words badges"
	"john john";
}

body>footer>ul#badges {
	grid-area: badges;
	list-style-type: none;
	padding: 0;
}

body>footer>ul#words {
	grid-area: words;
	list-style-type: none;
	padding: 0;
}

body>footer>div#john {
	grid-area: john;
	margin-top: 1rem;
	margin-left: auto;
	margin-right: auto;
	width: 732px;
}

a:link {
	color: var(--blue);
}

a:visited {
	color: var(--blueBright);
}

cite {
	color: var(--green);
}

cite::before {
	content: "[";
	font-style: normal;
}

cite::after {
	content: "]";
	font-style: normal;
}

time {
	color: var(--yellow);
	font-weight: bold;
}