:root {
	--black : #1a1a1a;
	--white : #eeeeee;
	--blue  : #1e71b8;	/* Appic Cistems color */
	--orange: #ee7f08;	/* Appic Cistems color */
}
* {
	margin: 0;
	border: 0;
	padding: 0;
	font-family: 'Roboto','Futura';
	overflow: hidden;
	/* Hight and width of element to include the border */
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	/* Delete default mobile selection indication (last value is 'opacity' from 0 to 1.0 */
	/* This is not standardized, so possibly not well supported */
	/* -webkit-tap-highlight-color:rgba(0,0,0,0); */
	/* -webkit-tap-highlight-color:transparent;	/* For some Androids */
}
.rotate-90 {
	rotate: -90deg;
}
html,body {
	width: 100vw;
	height: 100vh;
	background-color: var(--black);
	font-size: 3vmin;
}
body {
	/* -webkit-text-size-adjust: none;	/* prevent webkit from resizing text to fit */
	/* -webkit-touch-callout: none;		/* prevent callout to copy image, etc when tap to hold */
	/* prevent copy paste, to allow, change 'none' to 'text' */user-select: none;
	-webkit-user-select: none;
}
.hidelmnt {
	display: none !important;
	/* visibility: hidden; */
}
#title-bar {
	position: fixed;
	left: env(titlebar-area-x, 0);
	top: env(titlebar-area-y, 0);
	height: env(titlebar-area-height, 50px);
	width: env(titlebar-area-width, 100%);
	-webkit-app-region: drag;
}
section {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-wrap: wrap;
}
/* ------------------------------------------------------ */
/* landing page: with or without navigation buttons */
#landing {
	justify-content: center;
	align-items: center;
}
#landing figure {
	width: 80%;
}
#landing img {
	width: 100%;
}
#turn {
	position: fixed;
	top:1vmin;
	right: 1vmin;
}
/* ------------------------------------------------------ */
/* mosaic page */
#mosaic {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: flex-start;
	align-items: flex-start;
	/* overflow-x: hidden; */
	overflow-y: scroll;
/*	scrollbar-width: none;*/
}
@media all and (orientation:landscape) {
	#mosaic {
		flex-direction: column-reverse;
		overflow-x: scroll;
	}
}#mosaic::-webkit-scrollbar {
  display: none;
}
#mosaic figure {
	width: 33.333vmin;
	height: 33.333vmin;
	border: 1px solid var(--blue);
	padding: 1vmin;
	position: relative;
}
@media all and (min-width: 1024px) {
	#mosaic figure {
		width: 25vmin;
		height: 25vmin;
	}
}
#mosaic img {
	width: 100%;
	height: 100%;
}
#mosaic figcaption {
	position: absolute;
	bottom:2vmin;
	width: 100%;
	text-align: center;
	color: var(--white);
	text-shadow: 2px 2px var(--black);
}
/* ------------------------------------------------------ */
#takepicture, #qrurl {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#takepicture figure, #qrurl figure {
	width: 80vmin;
	color: var(--white);
	text-align: center;
}
/* ------------------------------------------------------ */
.clock article {
	width: 100vw;
	height: 100vh;
	transition: width 0.5s, height 0.5s;
	-webkit-transition: width 0.5s, height 0.5s;
	display: flex;
	justify-content: center;
	align-items: center;
}
.artinfo {
	/* font-size: 4vmin; */
	color: white;
	padding: 2em;
	flex-wrap: wrap;
}
.artinfo * {
	width: 100%;
}
@media (orientation: portrait) {
	.split {
		height: 50% !important;
	}
	#planets artinfo {
		width: 100%;
		height: 0%;
	}
}
@media (orientation: landscape) {
	.clock {
		flex-direction: column;
	}
	.split {
		width: 50% !important;
	}
	.clock artinfo {
		width: 0%;
		height: 100%;
	}
}
/* ------------------------------------------------------ */
/* Navigations top and bottom screen */
nav {
	position: absolute;
	height: 10vh;
	display: flex;
	justify-content: space-between;
}
#uppernav {
	top: 0;
}
#lowernav {
	bottom: 0;
}
button {
	display: inline-block;
	height: 10vh;
	width: 20vw;
	font-size: 5vmin;
	padding: 2vmin;
	background-color: var(--black);
	border: 2px solid var(--blue);
	color: var(--blue);
}
.active {
	background-color: var(--orange);
}
#uppernav button {
	border-width: 0 2px 2px 0;
}
#lowernav button {
	border-width: 2px 2px 0 0;
}
button:last-child {
	border-right: 0;
}
button svg {
	max-width: 100%;
	height: 100%;
}
button path,
button circle,
button ellipse {
	fill: none;
	stroke: var(--blue);
	stroke-width: 6;
	stroke-linejoin: round;
	stroke-miterlimit: 12;
}
#logo {
	width: 60vw;
}
#logo img {
	max-width: 56vw;
	height: 100%;
}

/* Setings screen layout*/
/* #settings { */
#settings article {
	height: 60vh;
	color: var(--white);
	padding: 2vmin;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
#options {
	width: 30vw;
}
#values {
	width: 70vw;
}
#comment {
	width: 100vw;
	height: 20vh !important;
	font-size: 3vmin;
}
@media all and (orientation:landscape) {
	#settings article {
		height: 80vh;
	}
	#options {
		width: 20vw;
	}
	#values {
		width: 40vw;
	}
	#comment {
		width: 40vw;
		height: 80vh !important;
		font-size: 3vmin;
	}
}
/* Settings input elements */
/* Input */
#values input {
	display: block;
	position: relative;
	/* top: -0.5vh; */
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 3vmin;
	border-radius: 3vmin;
	background: linear-gradient(90deg, var(--blue) 50%, var(--orange) 50%);
	outline: none;
	opacity: 0.7;
	-webkit-transition: 0.2s;
	transition: opacity 0.2s;
	overflow: visible;
}
#values input:focus {
	outline: none;
}
#values input:hover {
	opacity: 1.0;
}
#values input::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 8vmin;
	height: 3vmin;
	background: var(--white);
	border-radius: 1.5vmin;
	box-shadow: 0px 1px 10px 1px black;
	cursor: pointer;
}
/* Output */
#values p {
	position: relative;
}
#values p .output {
	display: block;
	position: absolute;
	width: 8vmin;
	height: 3vmin;
	border-radius: 1.5vmin;
	left: 0px;
	top: 0;
	line-height: 3vmin;
	text-align: center;
	font-size: 0.75em;
	background-color: transparent;
	color: var(--black);
	pointer-events: none; /* ignore mouse */
	z-index: 99;
}
#language output { /* To show the flags */
	background-image: url(../image/flagnl.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
/* Colofon styles */
#colophon {
	color: var(--white);
	padding: 5vmin;
	text-align: center;
}
#colophon p {
	width: 90vw;
}
#colophon img {
	position: relative;
	top: 1.5vh;
	width: 30vw;
	margin: 0 2vmin;
}
@media all and (orientation:landscape) {
	#colophon img {
		top: 3vh;
	}
}
/* Drag title-bar to drag the app window accross the screen */
#drag {
	position: fixed;
	left: env(titlebar-area-x, 0);
	top: env(titlebar-area-y, 0);
	height: env(titlebar-area-height, 50px);
	width: env(titlebar-area-width, 100%);
	-webkit-app-region: drag;
}

#message {
	width: 90vw;
	min-height: 1rem;
	background-color: var(--orange);
	color: var(--blue);
	opacity: 0.8;
	border-radius: 1vmin;
	position: fixed;
	bottom: -20rem;
	left: 5vw;
	padding: 1vmin;
	transition: bottom 0.5s;
	-webkit-transition: bottom 0.5s;
}