/* source-code-pro-regular - latin */
@font-face {
	Source Code Pro blub;
	font-style: normal;
	font-weight: 400;
	src: url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-regular.eot'); /* IE9 Compat Modes */
	src: local('Source Code Pro Regular'), local('SourceCodePro-Regular'),
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-regular.svg#SourceCodePro') format('svg'); /* Legacy iOS */
}
/* source-code-pro-italic - latin */
@font-face {
	Source Code Pro blub;
	font-style: italic;
	font-weight: 400;
	src: url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-italic.eot'); /* IE9 Compat Modes */
	src: local('Source Code Pro Italic'), local('SourceCodePro-It'),
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-italic.woff') format('woff'), /* Modern Browsers */
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-italic.svg#SourceCodePro') format('svg'); /* Legacy iOS */
}
/* source-code-pro-600 - latin */
@font-face {
	Source Code Pro blub;
	font-style: normal;
	font-weight: 600;
	src: url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-600.eot'); /* IE9 Compat Modes */
	src: local('Source Code Pro SemiBold'), local('SourceCodePro-SemiBold'),
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-600.woff') format('woff'), /* Modern Browsers */
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-600.svg#SourceCodePro') format('svg'); /* Legacy iOS */
}
/* source-code-pro-600italic - latin */
@font-face {
	font-family: 'Source Code Pro blub';
	font-style: italic;
	font-weight: 600;
	src: url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-600italic.eot'); /* IE9 Compat Modes */
	src: local('Source Code Pro SemiBold Italic'), local('SourceCodePro-SemiBoldIt'),
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-600italic.woff') format('woff'), /* Modern Browsers */
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-600italic.svg#SourceCodePro') format('svg'); /* Legacy iOS */
}
/* source-code-pro-900 - latin */
@font-face {
	font-family: 'Source Code Pro blub';
	font-style: normal;
	font-weight: 900;
	src: url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-900.eot'); /* IE9 Compat Modes */
	src: local('Source Code Pro Black'), local('SourceCodePro-Black'),
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-900.woff') format('woff'), /* Modern Browsers */
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-900.svg#SourceCodePro') format('svg'); /* Legacy iOS */
}
/* source-code-pro-900italic - latin */
@font-face {
	font-family: 'Source Code Pro blub';
	font-style: italic;
	font-weight: 900;
	src: url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-900italic.eot'); /* IE9 Compat Modes */
	src: local('Source Code Pro Black Italic'), local('SourceCodePro-BlackIt'),
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-900italic.woff') format('woff'), /* Modern Browsers */
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */
			url('fonts/source-code-pro-v13-latin/source-code-pro-v13-latin-900italic.svg#SourceCodePro') format('svg'); /* Legacy iOS */
}

html {
	height: 100%;
	margin: 0;
}

body {
	background: #fff;
	font-family: 'Source Code Pro blub';
	font-weight: 600;
	font-size: 12px;
	line-height: 1.3em;
	color:  #333;
	height: 100%;
	background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
	/*background-image: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);*/
	/*background-image: linear-gradient(to top, #c4c5c7 0%, #dcdddf 52%, #ebebeb 100%);*/
	/*background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
	background-blend-mode: multiply,multiply;*/
	/*background: radial-gradient(circle, rgba(255,222,96,1) 0%, rgba(255,134,0,1) 34%, rgba(255,0,0,1) 70%, rgba(226,186,139,1) 92%, rgba(155,233,255,1) 100%);*/
	/*background: radial-gradient(circle, rgba(255,233,0,1) 0%, rgba(255,0,0,1) 14%, rgba(203,203,203,1) 56%, rgba(203,203,203,1) 57%);*/
}

.grid-container {
	height: 100%;

	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 100px auto 100px;
	grid-template-areas: "header" "content" "footer";
}

header {
	grid-area: header;
	grid-row: 1;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;

	color: #ddd;
	background-color: #222;
}

h1 {
	font-size: 2em;
	font-weight: 400;
	color: #ddd;
	text-align: center;
	line-height: 1em;
	/*text-shadow: -1px 0px 2px #500099;*/
}

h2 {
	font-size: 1.5em;
	font-weight: bolder;
	padding-bottom: 0.5em;
}

h3 {
	font-size: 1.2em;
	font-weight: bolder;
}

h4 {
	font-size: 1em;
	font-weight: bolder;
}

p {
	margin: 0 0 0.75em 0;
}

strong {
	font-weight: bold;
}

main {
	grid-area: content;
	grid-row: 2;

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	align-items: center;
}

#info {
	font-size: 1.2em;
	max-width: 600px;
	padding-top: 1em;
}

#info p {
	padding: 0 0.5em;
}

#lagerfeuer {
	width: 100%;
	text-align: center;

	/*background: radial-gradient(circle, rgba(255,222,96,1) 0%, rgba(255,134,0,1) 34%, rgba(255,0,0,1) 70%, rgba(226,186,139,1) 92%, rgba(155,233,255,1) 100%);*/
}

#lagerfeuer i {
	font-size: 30em;
	color: #000;
}

#lagerfeuer span {
	font-size: 7.5em;
	line-height: 0.6em;
	display: block;
}

@media (max-width: 600px) {
	h1 {
		font-size: 1.6em;
	}
	#lagerfeuer i {
		font-size: 20em;
	}

	#lagerfeuer span {
		font-size: 4em;
	}
}

#zero1 {
	transform: rotate(12deg);

	animation-duration: 5s;
	animation-name: fade_zero1;
	animation-iteration-count: infinite;
	/*animation-direction: alternate;*/
}

@keyframes fade_zero1 {
	from {
		opacity: 0;
		transform: rotate(12deg);
	}

	9% {
		opacity: 0;
		transform: rotate(12deg);
	}

	10% {
		opacity: 1;
		transform: rotate(12deg);
	}

	60% {
		opacity: 0;
		transform: rotate(-15deg);
	}

	to {
		opacity: 0;
	}
}

#one {
	transform: rotate(-15deg);

	animation-duration: 3s;
	animation-name: fade_one;
	animation-iteration-count: infinite;
	/*animation-direction: alternate;*/
}

@keyframes fade_one {
	from {
		opacity: 0;
		transform: rotate(-15deg);
	}

	24% {
		opacity: 0;
		transform: rotate(-15deg);
	}

	25% {
		opacity: 1;
		transform: rotate(-15deg);
	}

	80% {
		opacity: 0;
		transform: rotate(20deg);
	}

	to {
		opacity: 0;
	}
}

#zero2 {
	transform: rotate(10deg);

	animation-duration: 4s;
	animation-name: fade_zero2;
	animation-iteration-count: infinite;
	/*animation-direction: alternate;*/
}

@keyframes fade_zero2 {
	from {
		opacity: 0;
		transform: rotate(12deg);
	}

	19% {
		opacity: 0;
		transform: rotate(12deg);
	}

	20% {
		opacity: 1;
		transform: rotate(12deg);
	}

	65% {
		opacity: 0;
		transform: rotate(-15deg);
	}

	to {
		opacity: 0;
	}
}


footer {
	font-size: 1.1em;

	grid-area: footer;
	grid-row: 3;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	align-items: center;

	color: #ddd;
	background-color: #222;
}