@font-face {
 font-family:"Cabin Sketch";
 font-weight:700;
 font-display:swap;
 src:url("CabinSketch-Bold.ttf");
}

html,
body {
	margin: 0;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(#d0e9f1, #9abcc7);
	font-family: "Cabin Sketch";
	font-size: 8px !important;
	font-weight: 700;
	transition: background-image 5s;
    z-index:-2;
    position:relative;
}
body>.stars{
    width:100%;
    height:100%;
    position:fixed;
    opacity:0;    
    z-index:-1;
    transition: opacity 4s;
}
body>.stars>#stars{
    width:100%;
    height:100%;
	background: url("img/starrynight.png") repeat-x top;
    opacity:1;
}
body.morning>.stars{    
    opacity:0.2;
}
body.night>.stars{    
    opacity:1;
}
body.evening>.stars{    
    opacity:0.3;
}

/*
body.night {
	background: url("img/starrynight.png") repeat-x top, linear-gradient(#010010, #0b0c2b);
}

body.morning {
	background: linear-gradient(#90afc3, #f9bd80);
}

body.afternoon {
	background: linear-gradient(#5daeee, #afe3fb);
}

body.evening {
	background: linear-gradient(#90afc3, #f9bd80);
}

body.cloudy.morning {
	background: url("img/clouds.png") repeat-x top, linear-gradient(#90afc3, #f9bd80);
}

body.cloudy.afternoon {
	background: url("img/clouds.png") repeat-x top, linear-gradient(#5daeee, #afe3fb);
}

body.cloudy.evening {
	background: url("img/clouds.png") repeat-x top, linear-gradient(#90afc3, #f9bd80);
}
*/
#mountain-target {
	height: 100%;
    z-index:2;
}


/* ICONS */

.iconset {
	position: absolute;
	z-index: 3;
	width: 100%;
	top: 0;
	right: 0;
	text-align: right;
	margin: 2em;
}

.icon {
	width: 48px;
	height: 48px;
	content: "";
	display: inline-block;
	background-size: cover;
	margin: 1.25em;
	cursor: pointer;
	opacity: 0.5;
}

.icon:hover {
	opacity: 1 !important;
}

.icon#image {
	background-image: url("img/icon/camera.png");
}

.icon#toggleTime {
	background-image: url("img/icon/weather.png");
}

.icon#random {
	background-image: url("img/icon/random.png");
}

.icon#planet {
	background-image: url("img/icon/rocket.png");
}

.icon#toggleFullscreen {
	background-image: url("img/icon/screen.png");
}

.icon#toggleUI {
	background-image: url("img/icon/toolbox.png");
}

#olay {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	display: flex;
	z-index: 10;
	background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	transition: opacity 400ms, visibility 400ms;
    cursor:wait;
}

#olay.vis {
	visibility: visible;
	opacity: 1;
}
#rays {
	width: 100vmax;
	height:100vmax;
	background: linear-gradient(#852, #325);
	mask: repeating-conic-gradient(#000 0% 0.05%, transparent 0% 1%), repeating-radial-gradient(closest-side, transparent 0% 20%, rgba(0, 0, 0, 0.2) 0% 40%);
	align-self: center;
}

#travel {
	align-self: center;
	width: 100%;
	text-align: center;
	position: absolute;
	color: rgba(255, 255, 255, 0.5);
	font-size: 2em;
}


/* RIBBON */

.wrapper {
	position: absolute;
	z-index: 3;
	max-width: 100%;
	bottom: 0;
}

#ribbon {
	width: inherit;
	max-width: 55%;
	position: relative;
	background: #ba89b6;
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
	padding: 0.5em 1em;
	margin: 0 0 3em 4em;
	cursor: default;
}

#ribbon.night {
	background: #000080;
}

#ribbon.morning {
	background: #e3957d;
}

#ribbon.afternoon {
	background: #ba89b6;
}

#ribbon.evening {
	background: #b2b558;
}

#ribbon:before,
#ribbon:after {
	content: "";
	position: absolute;
	display: block;
	bottom: -1em;
	border: 1.5em solid #986794;
	z-index: -1;
}

#ribbon:before {
	left: -2em;
	border-right-width: 1.5em;
	border-left-color: transparent !important;
}

#ribbon:after {
	right: -2em;
	border-left-width: 1.5em;
	border-right-color: transparent !important;
}

#ribbon.night:before,
#ribbon.night:after {
	border: 1.5em solid #000067;
}

#ribbon.morning:before,
#ribbon.morning:after {
	border: 1.5em solid #b37360;
}

#ribbon.afternoon:before,
#ribbon.afternoon:after {
	border: 1.5em solid #986794;
}

#ribbon.evening:before,
#ribbon.evening:after {
	border: 1.5em solid #808244;
}

#ribbon .ribbon-content:before,
#ribbon .ribbon-content:after {
	content: "";
	position: absolute;
	display: block;
	border-style: solid;
	border-color: #804f7c transparent transparent transparent;
	bottom: -1em;
}

#ribbon.night .ribbon-content:before,
#ribbon.night .ribbon-content:after {
	border-color: #000052 transparent transparent transparent;
}

#ribbon.morning .ribbon-content:before,
#ribbon.morning .ribbon-content:after {
	border-color: #916355 transparent transparent transparent;
}

#ribbon.afternoon .ribbon-content:before,
#ribbon.afternoon .ribbon-content:after {
	border-color: #804f7c transparent transparent transparent;
}

#ribbon.evening .ribbon-content:before,
#ribbon.evening .ribbon-content:after {
	border-color: #676836 transparent transparent transparent;
}

#ribbon .ribbon-content:before {
	left: 0;
	border-width: 1em 0 0 1em;
}

#ribbon .ribbon-content:after {
	right: 0;
	border-width: 1em 1em 0 0;
}


/* TOOLTIP */

.tooltip {
	position: relative;
	display: inline-block;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 7em;
	background-color: #fff;
	color: #000;
	text-align: center;
	padding: 5px 0;
	border-radius: 0.5em;
	position: absolute;
	z-index: 1;
	top: 125%;
	left: 50%;
	margin-left: -3.5em;
	opacity: 0;
	transition: opacity 0.3s;
	font-size: 1.5em;
}

.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent #fff transparent;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 0.3;
}


/* SIZES */

@media only screen and (min-width: 1200px) {
	body {
		font-size: 12px !important;
	}
	.wrapper {
		max-width: 50%;
	}
	#ribbon {
		max-width: 70%;
	}
	.ribbon-content {
		white-space: nowrap;
	}
	.iconset {
		position: absolute;
		z-index: 1;
		width: 50%;
		top: initial;
		bottom: 0;
	}
	.icon {
		margin: 1em 0.75em;
	}
	.tooltip .tooltiptext {
		top: initial;
		bottom: 125%;
		font-size: 1em;
	}
	.tooltip .tooltiptext::after {
		bottom: initial;
		top: 100%;
		border-color: #fff transparent transparent transparent;
	}
	#travel {
		font-size: 3em;
	}
	@media only screen and (min-width: 1600px) {
		.wrapper {
			max-width: 60%;
		}
		.iconset {
			width: 40%;
		}
		body {
			font-size: 16px !important;
		}
	}
}
#imprint {
position: absolute;
bottom: 1em;
right: 2.5em;
color: white !important;
opacity: 0.4;
text-decoration: none;
}