/*  Created on : 1-2-2017
    Author     : Kai, Pim
*/

@font-face {
	font-family: doosbvfont;
	src: url("/res/font/mikachan-puchi.ttf");
}
@keyframes rotate {
	from{transform:rotate(0);}
	to{transform:rotate(360deg);}
}
:root {
	--primary-orange: #ff6913;
	--primary-purple: #3d005b;

	--accent-orange: #ff9900;
	--accent-purple: #8d05be;
}
body{
	background-color:var(--primary-orange);
	margin: 0;
	font: 1em doosbvfont;
}
header {
	width: 100%;
	background-color: var(--primary-orange);
}
footer {
	width:100%;
	background-color: var(--accent-purple);
	color:white;
	text-align:center;
	padding:10px 0;
	position:fixed;
	bottom:0;
}
a, a:link, a:active, a:visited {
	color: var(--primary-purple);
}
img {
	max-width:100%;
}
.banner {
	display:block;
	margin:0 auto;
	height:10em;
	width:100%;
	max-width:969px;
	background-image:url('/res/img/banner.png');
	background-size:contain;
	background-position:center;
    background-repeat:no-repeat;
}

.wrapper {
	max-width: 969px;
	margin: 0 auto;
	padding:5px;
	margin-bottom:2em;
}
.koffer {
    cursor:pointer;
}

.koffer[data-playing="true"] > img {
	animation:rotate 2s linear infinite;
}
.navigation {
	list-style: none;
	margin: 0;
	
	background: var(--accent-purple);
	
	display: flex;
	
	flex-flow: row wrap;
	justify-content:center;
}

.navigation a {
	text-decoration: none;
	display: block;
	padding: 1em;
	color: white;
	transition: background .2s linear;
}

.navigation a:hover {
	background: deepskyblue;
}
.doos {
	display:inline-block;
	border:2px solid var(--accent-purple);
	border-radius: 5px;
    padding: 5px;
    margin: 5px;
}
.doos:active {
	background:var(--accent-purple);
	background:rgba(0,0,0,0.2);
}
.gallerij-item, .gallerij-item > img {
	max-width:100%;
}
.comic > img {
	max-width:none;
}
.comic {
	height:200px;
	overflow:hidden;
}
.comic[data-open="true"] {
	height:initial;
}
.fill {
	display:inline-block;
	margin:0;
	padding:0;
	height:100%;
	width:100%;
}
.inline-char {
	width:64px;
}
@media all and (max-width: 800px) {
  .navigation {
    justify-content: space-around;
  }
}

@media all and (max-width: 600px) {
  .navigation {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    padding: 0;
  }

  .navigation a {
    text-align: center;
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,0.3);
    border-bottom: 1px solid rgba(0,0,0,0.1);
  }


  .navigation li:last-of-type a {
    border-bottom: none;
  }
}