:root {
	font-family: Inter, sans-serif;
	font-feature-settings: 'liga' 1, 'calt' 1, 'ss01' 1;
}
@supports (font-variation-settings: normal) {
	:root { font-family: InterVariable, sans-serif; }
}

*{
	padding: 0;
	margin: 0;
}
body
{
	min-height: 100vh;
	max-width: 100vw;
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-columns: 1fr;
	grid-template-areas: "header" "main" "footer";
}

h1, h2, h3, h4, h5, h6 {
	margin: 0.5em 0 1em;
}

a {
	color: #000;
}

nav
{
	top: 0;
	position: sticky;
	grid-area: header;
	width: 100%;
	padding: 0.3em 0;
	background-color: #EEE;
	border-bottom: 1px solid #DEDEDE;
	box-shadow: 0px 4px 10px 3px rgba(0, 0, 0, 0.1);


	ul {
		margin: 0 auto;
		list-style: none;
		max-width: min(1200px, 100vw);
		text-align: center;

		li {

			display: inline-block;

			a {
				text-decoration: none;
				color: #000;
				padding: 0.7em 2em;
				display: inline-block;
				border-radius: 10px;
			}

			a:hover {
				background-color: #DEDEDE;
			}
		}
	}

}

main
{

	grid-area: main;

	line-height: 1.5;

	> *:nth-child(even) {
		background-color: #EEE;
	}

	> * > *.inside {
		max-width: min(calc(1200px - 4em), calc(100vw - 4em));
		margin: 0 auto;
		padding: 0 2em;
	}

	section, header {
		padding: 3em 0;
	}

	.table-wrapper {
		width: 100%;
		overflow-x: auto;
	}

	table {
		width: 100%;
		border-spacing: 0;
		border-collapse: collapse;

		* {
			border-collapse: collapse;
			border: 1px solid #999;
		}

		td {
			padding: 0.5em 1em;
			font-feature-settings: 'tnum' 1, 'calt' 0;
		}
	}
}

@media (max-width: 500px) {

	main
	{
		> * > *.inside {
			max-width: min(calc(1200px - 2em), calc(100vw - 2em));
			padding: 0 1em;
		}

		section, header {
			padding: 2em 0;
		}

		table {

			font-size: 0.8em;

			th:nth-child(5),
			td:nth-child(5) {
				display: none;
			}

			td {
				padding: 0.25em 0.5em;
			}
		}
	}

}