@font-face {
	font-family: 'PT Sans';
	src: url('pt_sans.woff2') format('woff2');
}

@font-face {
	font-family: 'Oswald';
	src: url('oswald.woff') format('woff');
}

header, main, footer {
	display: block;
}

html, body {
	padding: 0;
	margin: 0;
	height:100%;
}

body {
	font-family: 'PT Sans', sans-serif;
	font-size: 1.2em;
	font-weight: 400;
	line-height: 1.5;
	background: white;
	color: #333;
}

a {
	text-decoration: none;
	color: #000;
}

a img {
	border: 0;
}

a:hover {
	color: #f90;
}

a, a:hover {
	transition: all 0.1s ease-in-out 0s;
}

#wrapper {
	position: relative;
	min-height: 100%;
	padding: 0;
	margin: 0;
}

header {
	padding: 8px 0;
	margin: 0;
	border-bottom: 1px solid white;
	background-color: #e4c042;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffeaa8), to(#e4c042));
	background-image: -webkit-linear-gradient(top, #ffeaa8, #e4c042);
	background-image: -moz-linear-gradient(top, #ffeaa8, #e4c042);
	background-image: -o-linear-gradient(top, #ffeaa8, #e4c042);
	background-image: linear-gradient(to bottom, #ffeaa8, #e4c042);
}

header img {
	display: block;
	max-width: 100%;
}

header div {
	display: flex;
	display: -webkit-flex;
	-webkit-justify-content: space-around;
	justify-content: space-around;
}

header span {
	padding: 1px;
	margin: auto;
}

header .appname {
	font-size: 1.5em;
}

main {
	padding: 0 0 2.0em 0;
	margin: 0;
	border-top: 1px solid #e4c042;
}

h1 {
	font-family: 'Oswald', sans-serif;
	font-size: 1.2em;
	line-height: 1.5;
	font-weight: 400;
}

h2 {
	font-family: 'Oswald', sans-serif;
	font-size: 1.0em;
	line-height: 1.5;
	font-weight: 200;
	padding: 1.0em 0 0 0;
	margin: 0;
}

articleH {
	display: flex;
	display: -webkit-flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1.0em 5%;
	text-align: center;
}

emx {
	font-family: 'Oswald', sans-serif;
	font-size: 1.2em;
	line-height: 0.5;
	font-weight: 400;
}

emy {
	font-size: 70%;
	font-style: italic;
}

article {
	display: flex;
	display: -webkit-flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.5em 5%;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f7f7f7));
	background-image: -webkit-linear-gradient(top, #fff, #f7f7f7);
	background-image: -moz-linear-gradient(top, #fff, #f7f7f7);
	background-image: -o-linear-gradient(top, #fff, #f7f7f7);
	background-image: linear-gradient(to bottom, #fff, #f7f7f7);
	text-align: center;
}

article img {
	max-width: 80vw;
}

.space_around {
	padding: 0 0.5em;
}

article ul {
	text-align: left;
}

div {
	padding: 0.5em 0.1em;
}

.superBig {
	width: 100vw;
	padding: 0;
	margin: 0;
}

div.store {
	display: flex;
	display: -webkit-flex;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	font-size: 0.5em;
}

div.iconText {
	padding: 1px;
	max-width: 100%;
}

div img {
	max-width: 100%;
}

@media (min-width: 50em) { 
	article {
		-webkit-flex-direction: row;
		flex-direction: row;
		padding: 0;
	}
	
	article.reverse {
		-webkit-flex-direction: row-reverse;
		flex-direction: row-reverse;
		padding: 0;
	}

	article.store {
		align-items: flex-start;
		align-content: flex-start;
	}

	article img {
		max-width: 40vw;
	}
	
	article div {
		width: 40vw;
	}

	article div.big {
		width: 80vw;
	}

	div {
		padding: 1.0em;
	}
	
	.superBig {
		width: 40vw;
		padding: 0 1.0em;
		margin: 0;
	}
}

article2 {
  /* Impressum */ 
	display: block;
	padding: 1.0em 10%;
	margin: 0;
}

article3 {
  /* Decks */ 
	display: block;
	padding: 1.0em 10%;
	margin: 0;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f7f7f7));
	background-image: -webkit-linear-gradient(top, #fff, #f7f7f7);
	background-image: -moz-linear-gradient(top, #fff, #f7f7f7);
	background-image: -o-linear-gradient(top, #fff, #f7f7f7);
	background-image: linear-gradient(to bottom, #fff, #f7f7f7);
}

footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: white;
	height: 2.5em;
	display: flex;
	align-items: center;
	justify-content: center;
}

footer div {
	font-size: 0.8em;
	text-align: center;
}

/* help.html */
.code {
	font-family: 'Courier', Courier, sans-serif;
    font-weight: bold;
}
.red {
	color: #ff0000;
}
.codeExplain {
	font-family: 'Courier', Courier, sans-serif;
    font-weight: bold;
}
.codeExample {
	font-family: 'Courier', Courier, sans-serif;
}
.remark {
	background: #b0d8f8;
}