* {
	box-sizing: border-box;
}
html {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 1em solid #D5C8EF;
}
body {
	position: relative;
	min-height: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
h1 {
	color: #402A71;
	font-size: 3em;
}
.site {
	display: grid;
	grid-gap: 2em;
	min-height: 100%;
}
@media screen and (min-width: 48em) {
	.site {
		grid-template-columns: 1fr 4fr;
		grid-auto-rows: auto;
	}
	.inhoud {
		grid-row: 1;
		grid-column: 2 / 4;
	}
	.menu {
		grid-row: 1;
		grid-column: 1;
	}
}
.inhoud {
	padding: 2em;
	background-color: #fff;
}
.menu {
	padding: 2em;
	background-color: #6C53A4;
	color: #fff;
}
.menu ul {
	margin: 0;
	padding: 0 1.5em;
}
.menu li {
	margin: 0 0 1em 0;
	padding: 0 0 0 .55em;
}
.menu li::marker {
	font-size: 2em;
}
.menu li.home::marker {
	content: '🏠';
}
.menu li.games::marker {
	content: '🎰';
}
.menu li.info::marker {
	content: '🥳';
}
.menu a {
	color: #fff;
	text-decoration: none;
	font-size: 1.5em;
}
.menu a:hover {
	text-decoration: underline;
}

dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 2em;
	background-color: #000;
	color: #fff;

	min-width: 50vw;
	width: 70%;
	max-width: 90vw;
}

dialog p {
	font-size: 2.5em;
	text-align: center;
}

dialog button {
	background-color: #000;
	color: #fff;
	border: none;
	font-size: .75em;
}