@import url('https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,500;1,400;1,500&display=swap');

:root {
  --button-bg-color: #f89433;
  --button-bg-hover: #fccb9b;
}

html, body {
	padding: 0;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	font-family: 'Ubuntu', sans-serif;
	font-size: 1em;
}

* {
	box-sizing: border-box;
}

a:hover {
	color: black;
	text-decoration: none;
}
a:visited {
	color: #666;
}

h1, h2, h3 {
	font-family: 'Londrina Solid', sans-serif;
}
h1 {
	font-size: 3em;
	margin: 0;
	line-height:1em;
	/*text-shadow: 0.05em 0.05em #aaa;*/
}
h2 {
	font-size: 1.5em;
	margin-top: 1em;
	margin-bottom: 0.25em;
}
h2 + p {
	margin-top: 0;
}
h3 {
	font-size: 1.25em;
	margin-top: 1em;
	margin-bottom: 0.25em;
}
h3 + p {
	margin-top: 0;
}

.content-wrap {
	box-sizing: border-box;
	width: 1180px;
	margin: auto;
	/*background-color: lightyellow;*/
}

header {
	padding-top: 1em;
	padding-bottom: 1em;
	/*position: fixed;*/
	width: 100%;
}

header .logo {
	background-image: url(images/logo-game-512.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	min-width: 8em;
	min-height: 8em;
	flex-grow: 0;
}
header .logo:not(.home):hover {
	transition-duration: 0.25s;
	transform: scale(1.1);
}

header .content-wrap {
	display: flex;
}

header nav, .button {
	font-family: 'Londrina Solid', sans-serif;
}

header nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-grow: 1;
}

header nav #small-screen {
	display: none;
}

header nav #small-screen .hamburger-icon {
	display: flex;
	cursor: pointer!important;
	border: 0;
	background-color: transparent;
}
header nav #small-screen .hamburger-icon:hover {
	transition-duration: 0.25s;
	transform: scale(1.15);
}

header nav #large-screen ul.menu {
	padding: 0;
	margin: 0;
	list-style-type: none;
	display: flex;
	font-size: 1.5em;
}

header nav #large-screen ul.menu li {
	font-weight: bold;
	text-transform: uppercase;
	justify-content: space-between;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	white-space: nowrap;
	margin-right: 1em;
}
header nav #large-screen ul.menu li:last-child {
	margin-right: 0;
}
header nav #large-screen ul.menu li a {
	padding-left: 0.75em;
	padding-right: 0.75em;
	padding-top:0.25em;
	padding-bottom:0.25em;
	text-decoration: none;
	color: black;
	border-radius: 0.25em;
}
header nav #large-screen ul.menu li a.active {
	background-color: var(--button-bg-color);
}
header nav #large-screen ul.menu li a:not(.active):hover {
	background-color: var(--button-bg-hover);
	transition-duration: 0.5s;
}

header nav #small-screen .container {
	display: none;
	position: fixed;
	background-color: rgba(228, 228, 228, 0.9);
	width: 20em;
	height: 100%;
	top: 0;
	right: 0;
	margin-right: 0;
	margin-top: 1em;
	margin-bottom: 0;
	padding-left: 2em;
	padding-right: 2em;
	padding-top: 2em;
	padding-bottom: 2em;
	border-top-left-radius: 1em;
	border-bottom-left-radius: 1em;
	box-shadow: -0.25em 0.25em 0.75em black;

	animation-name: slide-in;
    animation-duration: 250ms;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}
@keyframes slide-in {
	0%		{ right: -22em; }
	50%		{ }
	100%	{ right: 0em; }
}
.close-menu {
	animation-name: slide-out!important;
	animation-duration: 150ms!important;
	animation-timing-function: linear!important;
}
@keyframes slide-out {
	0%		{ right: 0em; }
	100%	{ right: -22em; }
}

header nav #small-screen ul.menu {
	flex-direction: column;
	font-size: 2em;
	list-style-type: none;
	line-height: 1.5em;
	padding: 0;
	margin: 0;
}
header nav #small-screen ul.menu li a {
	color: black;
	text-decoration: none;
}
header nav #small-screen ul.menu li a:hover {
	font-weight: bold;
	text-decoration: underline;
}

header nav #small-screen button.close {
	width: 3.5em;
	height: 3.5em;
	position: absolute;
	top: 1em;
	right: 1em;

	border: 0;
	background-color: transparent;
	cursor: pointer;
	padding: 0;
	margin: 0;
}
header nav #small-screen button.close svg path {
	stroke: black;
	fill: transparent;
	stroke-linecap: round;
	stroke-width: 6;
}
header nav #small-screen button.close:hover {
	transition-duration: 0.25s;
	transform: scale(1.15);
}

#banner {
	width: 100%;
	height:20em;
	background-image: url(images/banner.jpg);
	background-size: cover;
	background-position: 0;
	background-repeat: no-repeat;
}
#banner .title {
	width: 100%;
	height: 100%;
	background-image: url(images/banner-game-title.png);
	background-repeat: no-repeat;
	background-size: 80%;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
#banner .title a.button {
	margin-top: 8em;
}

a.button {
	display: inline-block;

	padding-left: 1em;
	padding-right: 1em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;

	border: 0;

	background-color: var(--button-bg-color);
	color: black;
	text-transform: uppercase;
	border-radius: 0.25em;
	font-size: 1.5em;
	font-weight: bold;
	text-decoration: none;
}

a.button:hover {
	transition-duration: 0.25s;
	transform: scale(1.15);
}

#page {
	margin-top: 2em;
	margin-bottom: 2em;
	line-height:1.5em;
	font-size:1.25em;
}

footer {
	margin-top: 4em;
	background-color: #ddf4eb;
	display: flex;
	padding-top: 1em;
	padding-bottom: 1em;
}

#disclaimer {
	font-size: 0.75em;
	padding: 1em;
	text-align: center;
	margin-bottom: 1em;
}

#footer-logo {
    display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: center;
}
#footer-logo a {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	width: 10em;
	height: 4em;
    margin-left: 2em;
    margin-right: 2em;
    box-sizing: border-box;
}
#footer-logo a:hover {
	transition-duration: 0.2s;
	transform: scale(1.25);
}
#footer-logo .flevomeer {
	background-image: url(images/logo-flevomeer.svg);
}
#footer-logo .bibliotheek {
	background-image: url(images/logo-bibliotheek.svg);
}
#footer-logo .provincie-flevoland {
	background-image: url(images/logo-provincie-flevoland.svg);
}
#footer-logo .wonderbit {
	background-image: url(images/logo-wonderbit.svg);
}
#footer-logo .appruption {
	background-image: url(images/logo-appruption.svg);
}

img.portrait {
	width: 6.5em;
	height: 6.5em;
	border-radius: 50%;
	background-color: #efefef;
	padding: 0.5em;
	float: left;
	margin-right: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
}
img.right {
	float: right;
	margin-right: 0;
	margin-left: 1em;
}
img.flip {
	transform: scaleX(-1);
}

#bar {
	width: 100%;
	background: rgb(104,163,183);
	background: linear-gradient(90deg, rgba(104,163,183,1) 0%, rgba(59,90,158,1) 100%);
	padding-top: 1em;
	padding-bottom: 1em;
}
#bar .content-wrap {
	display: flex;
}

#bar .content-wrap .book {
	width: 6em;
	height: 5em;
	background-image: url(images/book/book-castle.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin-right: 1em;
}
#bar .content-wrap .book.castle {
	background-image: url(images/book/book-castle.png);
}
#bar .content-wrap .book.space {
	background-image: url(images/book/book-space.png);
}
#bar .content-wrap .book.island {
	background-image: url(images/book/book-island.png);
}
#bar .content-wrap h1 {
	display: flex;
	flex-grow: 1;
    align-items: center;
}

.launch-button a {
	font-size: 1em;
	margin-right: 0.5em;
}

.screenshot, .screenshot area {
	cursor: crosshair;
}
.screenshot {
	text-align: center;
}
.screenshot img {
	width: 80%;
}

.screenshot map area + div.tooltip {
	display: none;
	background-color: lightyellow;
	border-radius: 0.5em;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	position: absolute;
	font-family: 'Londrina Solid', sans-serif;
	font-size: 0.75em;
	line-height: 1.25;
	box-shadow: 0.1em 0.1em 1em black;
}
.screenshot map area:hover + div.tooltip {
	display: block;
}

ul.books {
	padding: 0;
	margin: 0;
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
}
ul.books li {
	margin-bottom: 0.5em;
	width: 50%;
}
ul.books li a {
	display: flex;
	align-items: center;
}
ul.books li a:hover {
	background-color: #eee;
}
ul.books li img {
	width: 128px;
	margin: 0.5em;
}


@media only screen and (max-width: 1280px) {
	.content-wrap {
	    margin-left: 1em;
	    margin-right: 1em;
	    width: auto;
	}
	footer .content-wrap { 
		width: 100%;
		margin: 0;
	}
	#banner {
		height:18em;
	}
	#banner .title a.button {
		margin-top: 6em;
	}
	#banner .title {
		background-size: 95%;
	}
}

@media only screen and (max-width: 1024px) {
	header nav {
		font-size: 1.5vw;
	}

	header .logo {
		min-width: 6em;
		min-height: 6em;
	}

	#banner {
		height:16em;
	}
	#banner .title a.button {
		margin-top: 5em;
	}

	.screenshot img {
		width: 100%;
	}
}

@media only screen and (max-width: 800px) {
	h1 {
		font-size: 2em;
	}
	header {
		padding-top: 0.5em;
		padding-bottom: 0.5em;
	}
	.content-wrap {
	    margin-left: 0.5em;
	    margin-right: 0.5em;
	}

	header nav {
		font-size: 1em;
	}
	header nav #large-screen ul.menu {
		display: none;
	}
	header nav #small-screen {
		display: flex;
	}
	header .logo {
		min-width: 5em;
		min-height: 5em;
	}
	#banner {
		height:12em;
	}
	#banner .title {
		background-size: 100%;
	}
	#banner .title a.button {
		margin-top: 5em;
		font-size: 1.25em;
	}

	ul.books {
		flex-direction: column;
		flex-wrap: nowrap;
	}
	ul.books li {
		width: 100%;
	}
}

@media only screen and (max-width: 600px) {
	#footer-logo a {
	    margin-left: 1em;
	    margin-right: 1em;
		width: 25%;
	}
}