html, body {
	height: 100vh;
	width: 100vw;
	margin: 0;
	font-family: 'Roboto Slab', serif;
}

body {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff900a+0,ffef68+100 */
	/*PERUSbackground:*/
	/*background: radial-gradient(ellipse at bottom center, #ff900a 0%, #ffef68 100%);*/
	/*PERVObackground:*/
	/*background: radial-gradient(ellipse at bottom center, hsl(-66,100%,50%) 0%, hsl(163,100%,74%) 70%)*/
	/*VIOLETTIbackground:*/
	/*background: radial-gradient(ellipse at bottom center, hsl(230, 100%, 50%) 0%, hsl(244, 100%, 74%) 70%);*/
	background: radial-gradient(ellipse at bottom center, hsl(28,100%,50%) 0%, hsl(54,100%,50%) 70%);
}

/* I18N_huhhuh hommat */
html:lang(fi) :lang(sv),
html:lang(sv) :lang(fi) {
	display: none;
}

/* GLOBAL */
a {
	text-decoration: none;
	color: inherit;
}
a.aktive {
	color: orange !important;
}

/*a.toggle:not(.aktive):hover,*/
aside a:not(.aktive):hover,
nav a:not(.aktive):hover {
	color: yellow;
}

/* TITLE & METSÄHOMMAT */

#title {
	/* CENTER IT */
	position: absolute;
	top: 50%;
	width: 100%;
	transform: translateY(-50%);

	z-index: 9;

	transition: opacity 2s, transform 2s, visibility 2s 0s;
}

#title > h1 {
	margin: 0;
	font-size: 2.5em;
	text-align: center;
	background-color: rgba(255,255,255,0.8);
}
@media (min-width: 720px) {
	#title > h1 {
		font-size: 4em;
	}
}

body.ignite #title {
	transform: translateY(-100%);	
}

body.ignite #title,
body.ignite #takametsä {
	opacity: 0;
	visibility: hidden;
}
body.ignite #etumetsä {
	opacity: 1;
}

#takametsä {
	background: url(img/metsa.png);
	background-position: center 0%;
	background-size: cover;
	background-color: white;

	z-index: 5;

	transition: opacity 2s, visibility 2s 0s;
}
#etumetsä {
	background: url(img/metsa_etu.png);
	background-position: center 0%;
	background-size: cover;

	z-index: 1;
	pointer-events: none;

	opacity: 0;
	transition: opacity 4s;
}
#etumetsä.hide {
	opacity: 0 !important;
}

/* TOP NAV HOMMAT */

nav {
	position: absolute;
	top: 0.5em; left: 0.5em; right: 0.5em;
	z-index: 9;

	font-size: 2rem;
	line-height: 1;
	color: white;

	/* ALERT */
	pointer-events: none;
}
nav.aktive {
	/* OVER FOOTER & CONTROLS */
	z-index: 11;
}
@media (min-width: 720px) {
	nav {
		top: 1em; left: 1em; right: 1em;
	}
}
nav > * {
	pointer-events: auto;
	opacity: 0.9;
}
nav > .left {
	float: left;
	margin-right: 1em;
}
nav > .right {
	float: right;
	margin-left: 1em;
}
nav > #reset {
	margin-right: 1em;
	font-size: 1.7rem;
	line-height: 1.3;
	opacity: 0.8;
	transition: opacity 2s, visibility 2s 0s;
}
body:not(.ignite) #reset {
	opacity: 0;
	visibility: hidden;
}

nav > a[href='#debug'] {
	/* toggle ≡ */
	margin-right: 0.5em;
	/* TODO: saispa tän aina z-index 9999 */
}
nav > #debug {
	/* undo nav > * */
	opacity: 1;

	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.4rem;

	background-color: rgba(0,0,0,0.2);
	padding: 0 0.5em 0.3em;

	/* when height: 0 */
	overflow: hidden;

	/*transition: opacity 1s, height 1s step-end;*/
}
/* OBS: riippuu oleellisesti tavaran määrästä */
@media (max-height: 520px) {
	nav > #debug {
		font-size: 4.2vh;
	}
}
nav:not(.aktive) > #debug {	
	opacity: 0;
	height: 0;
}
#debug > li {
	line-height: 1.1;
	margin-top: 0.2em;
}
#debug a:not(.played) {
	opacity: 0.7;
}
#debug a:not(.ended) {
	font-weight: bold;
}
#debug a + span {
	font-size: 50%;
	opacity: 0.8;
	margin-right: 1em;
	margin-left: -0.2em;
}
#debug small {
	color: #eee;
}

/* TEKIJÄT & DOKUMENTISTA */
#debug li[role=meta] {
	margin-top: 0.5em;
}
#debug li[role=meta] > a {
	opacity: 0.9;
}
#debug li[role=meta] > a:not(:last-child) {
	margin-right: 1em;
}
#debug li[role=meta] > a > span:first-child {
	font-weight: normal;
	opacity: 0.7;
}

/* CUSTOM AUDIO PLAYERZ CHROME (re: bäkkärit) */
#controls {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 4px;
	opacity: 1;
	transition: opacity 1s, visibility 1s;
	z-index: 10; /* over footer */

	display: flex;
	align-items: center;

	color: white;
	font-size: 1.1em;
	/*background: rgba(0,0,0, 0.2);*/
}
body:not(.ignite) #controls {
	visibility: hidden;
	opacity: 0;
}
#controls > * {
	margin-right: 0.5em;
}
#controls > :first-child {
	margin-left: 0.5em;
}
#controls > .id {
	white-space: nowrap;
}
#controls > .playpause,
#controls > .prev,
#controls > .next {
	font-size: 1.2em;
	position: relative;
	opacity: 0.4;
}
#controls > .alive {
	opacity: 1;
	cursor: pointer;
}
#controls > .playpause > * {
	opacity: 0;
	transition: opacity 0.4s;
}
#controls.play > .playpause > .fa-pause,
#controls:not(.play) > .playpause > .fa-play {
	opacity: 1;
}
#controls > .playpause > :first-child {
	position: absolute;
	top: 4px; /* SURULLINEN HACK */
}
#controls > .time {
	font-size: smaller;
	font-family: sans-serif;
}
#controls > .progressbar {
	flex-grow: 1; /*tyhjä tila mulle*/
	height: 8px;
	margin-left: 0.2em;

	cursor: pointer;
	background-color: rgba(255,255,255, 0.15);
}
#controls > .progressbar > .progress {
	width: 0%;
	height: 100%;
	background-color: rgba(255,255,255, 0.9);
}

/* SUBTITLE JUDUD (re: panchakarma) */
#subtitles:not(.play) {
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s, visibility 1s step-end;
}
#subtitles {
	position: fixed;
	z-index: 8;
	left: 0;
	right: 0;
	bottom: 60px;
	margin: auto;
	/*max-width: 720px;*/
	text-align: center;
	font-size: 1.1em;
	opacity: 1;
	transition: opacity 1s;
	pointer-events: none;
}
@media (min-width: 480px) {
	#subtitles {
		font-size: 1.2em;
	}
}
#subtitles > span:empty {
	visibility: hidden;
}
#subtitles > span {
	display: inline-block;
	padding: 0.5em 0.8em;
	background-color: rgba(255,255,255,0.8);
	pointer-events: auto;
}

/* SEITTI/TULIKÄRPÄS_CANVAS */

#seitti {
	position: absolute;
	z-index: 7;
	transition: opacity 2s;
}

body:not(.ignite) #seitti {
	opacity: 0.7;
}

#seitti > canvas {
	filter: drop-shadow(0px 0px 12px yellow);
	/*position: absolute;*/
	/*width: 100%;*/
	/*height: 100%;*/
	/*opacity: 0.4;*/
}

#seitti > canvas.firefly {
	cursor: pointer;
}

section {
	position: absolute;
	width: 100vw;
	height: 100vh;

	/* NO IMG PEEKING YO */
	overflow: hidden;
}

section > img, section > video {
	position: absolute;
	display: block;

	/* center that thing like pro */
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);

	transition: opacity 2s;
	opacity: 0;
}

section > video {
	/* hack video controls to the bottom */
	bottom: 0;
}

/* 1920x1080 MIXINS */
/* TODO: CHROME ANDROID LANDSCAPE BUG */
@media (min-aspect-ratio: 16/9) {
	section > img, section > video {
		width: 100%;
	}
}
@media (max-aspect-ratio: 16/9) {
	section > img, section > video {
		height: 100%;
	}
}

section.aktive > img,
section > .aktive {
	opacity: 1;
}

/* FOOTER HOMMAT */

#tekijät, #dokumentista {
	/* snap to bottom also on mobile chrome scroll-down-to-get-rid-of-address-bar mode */
	position: fixed;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;

	max-height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;

	font-size: 0.9em;
	background-color: rgba(255,255,255, 0.8);
	padding: 1em 2em 2.5em; /* bottom space for controls */

	/* ALERT nämä on nav:not(.aktive)n päällä, jotta close-x pääsee klikkaamaan :~~~] */
	z-index: 9;
}
#tekijät:not(.show), #dokumentista:not(.show) {
	display: none;
}
#tekijät a.toggle, #dokumentista a.toggle {
	float: right;
	opacity: 0.4;
/*	line-height: 1;
	font-size: 1.2em; */
}
#tekijät a.toggle:hover, #dokumentista a.toggle:hover {
	opacity: 0.7;
}
#dokumentista {
	font-size: 1em;
}

#tekijät > *, #dokumentista > * {
	margin: auto;
	max-width: 840px;
}
@media (min-width: 480px) {
	#tekijät {
		font-size: 1em;
	}
	#tekijät > dl:first-of-type {
		columns: 2;
	}
}

#tekijät > h2, #dokumentista > h2 {
	margin-bottom: 0.8em;
}
#tekijät > h3, #dokumentista > h3 {
	margin-bottom: 0;
}

#tekijät > dl {
	margin-bottom: 1em;
}
#tekijät > dl > dt {
	break-after: avoid;
	-webkit-column-break-after: avoid;
	-moz-column-break-after: avoid;
}
#tekijät > dl > dd {
	margin-left: 0;
	font-weight: bold;
	color: #333;
	margin-bottom: 0.5em;

	page-break-inside: avoid;
	-moz-page-break-inside: avoid;
}

#logot {
	list-style: none;
	padding-left: 0;
	line-height: 0;
}
#logot > li {
	float: right;
	clear: right;
	padding-left: 2em;
}
#dr {
	height: 29px; /* 50% */
	margin-top: 3em; /* baseline */
}
@media (min-width: 802px) {
	#logot > li {
		clear: none;
		padding-left: 1em;
	}
	#logot > li:last-child {
		padding-left: 2em;
	}
}
@media (min-width: 880px) {
	#logot > li {
		/* HELLO BASELINE HACK */
		margin-top: -0.7em;
	}
}