* {
	padding: 0;
	margin: 0;
}

html,
body {
	background-color: black;
	font: small-caps bold 4vmin sans-serif;
	color: white;
	text-align: center;
	position: relative;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

div#ressources {
	display: none;
}

.hidden {
	display: none;
}

#debug {
	top: 50px;
	position: absolute;
	z-index: 999;
	width: 100%;
	text-align: center;
	color: black;
	background-color: #ffffff55;
}

body>nav {
	background-color: whitesmoke;
	color: DarkSlateGray;
	z-index: 100;
}

body>nav:first-of-type {
	border-bottom: 1px solid DarkSlateGray;
	box-shadow: inset 0 -10px 10px -10px DarkSlateGray;
}

body>nav:last-of-type {
	border-top: 1px solid DarkSlateGray;
	box-shadow: inset 0 10px 10px -10px DarkSlateGray;
}

ul {
	list-style: none;
}

div#level.panel ul.presentation {
	width: 100%;
	text-align: center;
	position: absolute;
	color: black;
}

ul.presentation>li {
	margin: 0.5rem 0;
}

#qrcode {
	max-width: 90vw;
}

div#map.panel {
	overflow: auto;
}

div#map.panel>svg#findme {
	position: fixed;
	bottom: 10vmin;
	right: 2vmin;
	background-color: #ffffff99;
	border-radius: 50%;
}

@keyframes levelshow {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes levelview {
	from {
		opacity: 1;
	}

	to {
		opacity: 1;
	}
}

@keyframes levelhide {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

div#shom {
	width: 100%;
	height: auto;
	overflow-x: scroll;
}

li.paypal form {
	border: 1px solid silver;
	width: 200px;
	display: inline-block;
	padding: 0.5rem;
	height: 50px;
	border-radius: 0.25rem;
	background-color: whitesmoke;
}

li.disclaimer {
	padding: 5vmin;
	text-align: justify;
	font: normal normal 3vmin sans-serif;
}

li.disclaimer p {
	padding: 3vmin 0;
}

li.disclaimer ol {
	padding-left: 2vmin;
	margin-left: 2vmin;
}

nav>ul {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

nav>ul>li {
	display: inline-block;
	width: 30vw;
	text-align: center;
	height: 7vmin;
	font-size: 5vmin;
	cursor: pointer;
	margin: 1vmin;
}

nav>ul>li>img {
	height: calc(7vmin - 6px);
	border: 3px solid transparent;
	pointer-events: none;
}

nav>ul>li.active {
	background-color: blue;
	color: whitesmoke;
	border-radius: 2vmin;
}

div.panel {
	display: none;
	overflow-y: scroll;
	height: calc(var(--main-height) - 18vmin);
	width: 100%;
}

div.panel.active {
	display: block;
}

div#credits.panel a {
	color: yellow;
}

div#credits.panel a:visited {
	color: orange;
}

div#level.panel {
	position: relative;
	text-align: initial;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #050118;
	box-shadow: 0 200px 200px 0 #251863 inset;
	animation-name: sunrise, day, sunset;
	animation-delay: var(--sunrise-start), var(--day-start), var(--sunset-start);
	animation-duration: var(--sunrise-duration), var(--day-duration), var(--sunset-duration);
}

@keyframes sunrise {
	0% {
		background-color: #050118;
		box-shadow: 0 200px 200px 0 #251863 inset;
	}

	50% {
		background-color: #b7e8eb;
		box-shadow: 0 200px 200px 0 #251863 inset;
	}

	100% {
		box-shadow: 0 200px 200px 0 #fffeea inset;
	}
}

@keyframes day {
	from {
		background-color: #b7e8eb;
		box-shadow: 0 200px 200px 0 #fffeea inset;
	}

	to {
		background-color: #b7e8eb;
		box-shadow: 0 200px 200px 0 #fffeea inset;
	}

}

@keyframes sunset {
	0% {
		background-color: #b7e8eb;
		box-shadow: 0 200px 200px 0 #fffeea inset;
	}

	50% {
		background-color: #050118;
		box-shadow: 0 200px 200px 0 #fffeea inset;
	}

	100% {
		box-shadow: 0 200px 200px 0 #251863 inset;
	}
}


div#level.panel #scale {
	position: absolute;
	height: 100%;
	width: 5vmin;
	z-index: 10;
	font-size: 5vmin;
}

div#level.panel #scale li.imperial {
	font-size: 2.8vmin;
	width: 3vmin;
}

div#level.panel #scale li {
	position: absolute;
	padding: 0 1vmin;
	text-align: center;
	border-bottom: 1px solid black;
}

div#level.panel #times {
	position: absolute;
	right: 0;
	height: 100%;
	display: block;
	width: 10vmin;
	z-index: 10;
}

div#level.panel #times li {
	text-align: center;
	position: absolute;
	width: 100%;
	text-align: center;
	font-size: 9vmin;
}

div#level.panel #times li:not(:first-of-type) {
	color: transparent;
	border-bottom: 1px solid black;
}

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {

	div#level.panel #times li:not(:first-of-type).hover {
		border-bottom: 3px solid white;
		color: inherit;
		width: 100vw;
		right: 0;
		text-align: right;
		padding-right: 9vw;
	}

	div#level.panel #times li:not(:first-of-type).hover span.label {
		background-color: black;
		padding: 0 10px;
		border-radius: 10px;
	}
}

/* stylus-based screens */
@media (hover: none) and (pointer: fine) {
	/* ... */
}

/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) {

	div#level.panel #times li:not(:first-of-type):hover {
		border-bottom: 3px solid white;
		color: inherit;
		width: 100vw;
		right: 0;
		text-align: right;
		padding-right: 9vw;
	}

	div#level.panel #times li:not(:first-of-type):hover span.label {
		background-color: black;
		padding: 0 10px;
		border-radius: 10px;
	}
}


div#level.panel #times li:first-of-type img {
	width: 10vmin;
}

div#level.panel #times li:first-of-type img.down {
	transform: rotateX(180deg);
}

div#level.panel #sand {
	position: absolute;
	width: 100%;
	bottom: 0;
	height: calc(var(--main-step) * 3);
	background-image: url(estran.png);
}

div#level.panel #road {
	position: absolute;
	width: 100%;
	background-color: black;
	height: calc(var(--main-step) * 0.3);
	bottom: calc(var(--main-step) * 2.7)
}

div#level.panel #waves {
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	z-index: 5;
}

div#level.panel img#car {
	position: absolute;
	display: block;
	bottom: calc(var(--main-step) * 3);
}

div#level.panel img#car.hidden {
	opacity: 0;
}

div#level.panel img#car.left {
	animation-name: slideleft;
	animation-duration: 5s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
}

div#level.panel img#car.right {
	transform: rotateY(180deg);
	animation-name: slideright;
	animation-duration: 5s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
}

div#level.panel img#car.t1 {
	content: url(svg/car1.svg);
	height: calc(var(--main-step) * 1.54);
}

div#level.panel img#car.t2 {
	content: url(svg/car2.svg);
	height: calc(var(--main-step) * 1.45);
}

div#level.panel img#car.t3 {
	content: url(svg/car3.svg);
	height: calc(var(--main-step) * 1.60);
}

div#level.panel img#car.t4 {
	content: url(svg/car4.svg);
	height: calc(var(--main-step) * 1.50);
}

div#level.panel img#car.t5 {
	content: url(svg/car5.svg);
	height: calc(var(--main-step) * 1.35);
}

div#level.panel img#car.t6 {
	content: url(svg/car6.svg);
	height: calc(var(--main-step) * 1.80);
}

@keyframes slideright {
	from {
		left: calc(-100px - var(--main-car));
	}

	to {
		left: calc(100vw + 100px);
	}
}

@keyframes slideleft {
	from {
		left: calc(100vw + 100px);
	}

	to {
		left: calc(-100px - var(--main-car));
	}
}