:root {
	--c64-black: #000000;
	--c64-dgrey: #626262;
	--c64-mgrey: #898989;
	--c64-lgrey: #adadad;
	--c64-white: #ffffff;
	--c64-red: #9f4e44;
	--c64-lred: #cb7e75;
	--c64-brown: #6d5412;
	--c64-orange: #a1683c;
	--c64-yellow: #c9d487;
	--c64-lgreen: #9ae29b;
	--c64-green: #5cab5e;
	--c64-teal: #6abfc6;
	--c64-lblue: #887ecb;
	--c64-blue: #50459b;
	--c64-purple: #a057a3;
}

@font-face {
	font-family: "C64";
	src: url("PetMe64.ttf");
}

@media (max-width: 1080px) {
	html, select {
		font-size: 16px;
	}

	body {
		display: flex;
		flex-direction: column;
	}
}

@media (min-width: 1080px) and (min-height: 440px) {
	html, select {
		font-size: 18px;
	}

	body {
		display: grid;
		justify-content: center;

		grid-template-areas:
			". header header ."
			". lang   main   ."
			". nav    main   ."
			". .      main   .";
		grid-template-rows: 11em auto auto 1fr;
		grid-template-columns: 1fr 14em 42em 1fr;

		column-gap: 0.5em;
		row-gap: 0.5em;
	}

	main {
		overflow-y: scroll;
	}
}

* {
	box-sizing: border-box;
}

html, select, input {
	font-family: 'C64', Monospace;
}

select, input {
	font-size: 1em;
	background-color: var(--c64-dgrey);
	color: var(--c64-lgrey);
	border-width: 0px;
}

input[type="checkbox"] {
	width: 1em;
	height: 1em;
	accent-color: var(--c64-dgrey);
}

html, body {
	height: 100%;
}

body {
	background-image: url('arrows.png');
	animation: animate_background 5s linear 0s infinite;
	color: var(--c64-red);
	margin: 0px;
	height: 100%;
	line-height: 1.4;
	overflow-wrap: break-word;
}

body > * {
	background-color: var(--c64-lgrey);
}

@keyframes animate_background {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -64px -48px;
    }
}

body > header {
	background-image: url('pågadata.png');
	background-repeat: no-repeat;
	background-position: right;
	background-size: contain;
	grid-area: header;

	border-radius: 0px 0px 2em 2em;

	display: flex;
	align-items: center;
}

body > header h1 {
	font-size: 36pt;
}

article > * {
	display: inline;
	font-size: 1em;
}

nav {
	grid-area: nav;
	display: flex;
	flex-direction: column;
}

nav a {
	text-decoration: none;
}

strong {
	background-color: var(--c64-red);
	color: var(--c64-dgrey);
}

#language-select {
	grid-area: lang;
}

#language-select select {
	width: 100%;
}

main {
	grid-area: main;
	padding: 2em;
}

main > *:first-child > *:first-child {
	margin-top: 0px;
}

dt {
	margin-top: 0.5em;
}

dd {
	border-left: 0.25em solid var(--c64-dgrey);
	padding-left: 0.5em;
	margin-left: 1.5em;
}

table {
	border-collapse: collapse;
	margin: 0 -2em;
	width: calc(100% + 4em);
}

tr:nth-child(even) {
	background: var(--c64-mgrey);
}

th {
	border-bottom: 3pt solid var(--c64-dgrey);
}

td:not(:first-child) {
	word-break: keep-all;
}

td {
	border-right: 3pt solid var(--c64-dgrey);
}

td:last-child {
	border-right: 0pt solid var(--c64-dgrey);
	text-align: center;
}

footer {
	grid-area: footer;
}

a {
	color: var(--c64-dgrey);
	text-decoration: none;
}

a:hover {
	color: var(--c64-red);
	background-color: var(--c64-dgrey);
	text-decoration: underline;
}

main > section > article:not(:last-child) {
	margin-bottom: 1rem;
}

*:not(article) > a:before {
	content: ">";
}