@font-face {
	font-family: dinpro-regular;
	src: url(../font/dinpro_regular.otf);
}

@font-face {
	font-family: dinpro-medium;
	src: url(../font/dinpro_medium.otf);
}


@font-face {
	font-family: dinpro-bold;
	src: url(../font/dinpro_bold.otf);
}

:root {
	--background: rgb(245, 245, 245);
	--backdrop: rgba(0, 71, 53, 0.8);
	--green: rgb(0, 71, 53);
	--orange: rgb(255, 171, 13);
	--white: rgb(245, 245, 245);
	--black: rgb(0, 0, 0);
	--overlay: linear-gradient(to top, rgba(0, 71, 53, 1), transparent);
	--highlight: linear-gradient(to top, rgba(255, 171, 13, 0.8), rgba(255, 171, 13, 0.6));
	--elevation: 0 2px 4px rgba(0, 0, 0, 0.2),
				   0 3px 6px rgba(0, 0, 0, 0.15),
				   0 4px 8px rgba(0, 0, 0, 0.1);
	--timing: 0.2s;
}

* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}

body {
	margin: 0;
	padding: 0;
	font-family: dinpro-regular;
	font-size: 16px;
	color: var(--black);
	line-height: 150%;
	background: var(--background);
}

#wrapper {
	display: grid;
	grid-template-areas:
		"appbar appbar"
		"sidebar games";
	grid-template-rows: 56px 1fr;
	grid-template-columns: 280px 1fr;
	margin: 0;
	padding: 0;
	width: 100vw;
	min-width: 320px;
	height: 100vh;
}


@media (width <= 980px) {
	#wrapper {
		grid-template-columns: 80px 1fr;
	}
}