.wrapper {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: minmax(100px, auto);

	h1 {
		margin: 0em;
		margin-top: auto;
		font-family: var(--heading-font);
	}
	header {
		font-weight: bold;
		display: flex;
		border-bottom: solid 4px var(--border-secondary);
		text-align: left;
		font-family: Aclonica, Helvetica, Arial, sans;
		margin-right: var(--blub);
	}
	footer {
		display: block;
		font-weight: bold;
		border-top: solid 4px var(--border-secondary);
		margin-left: var(--blub);
		text-align: right;
	}
	footer a {
		color: var(--border);
	}

	.content {
		grid-column: 2;
		grid-row: 2 / 7;
	}

	ul {
		list-style: none;
		margin: 0;
		padding: 1.5em var(--blub);
	}
	ul li {
		margin: 0;
	}
	ul a {
		display: block;
		border: solid 1px var(--border);
		margin: 0.4em 0;
		padding: 0.25em 0.5em;
		text-decoration: none;
		color: var(--background);
		background-color: var(--border-secondary);
	}
	ul a:hover {
		background-color: var(--border);
	}

	@media (max-width: 1024px) {
		grid-template-columns: 25% 1fr 25%;
	}
	@media (max-width: 600px) {
		grid-template-columns: 15% 1fr 15%;
	}
	@media (max-width: 480px) {
		grid-template-columns: 0% 1fr 0%;
	}
}