* {
	box-sizing:border-box;
	color:#1a1a1a;
	font-family:Sans-serif;
	margin:0px;
	padding:0px;
}

body {
	background-color:gray;
	background-image:linear-gradient(to bottom, #cccccc, #666666);
	height:100svh;
	padding-top:1.3svh;
	padding-right:2vw;
	padding-bottom:1.3svh;
	padding-left:2vw;
	position:fixed;
	
	overscroll-behavior:contain;
	overflow:hidden;
}

button {
	appearance:none;
}

#button-play {
	appearance:none;
	-webkit-appearance:none;
	background-image:linear-gradient(#e6e6e6, white, #b3b3b3, #b3b3b3, #e6e6e6);
	border:0.1svh solid black;
	border-color:rgba(0, 0, 0, 0.6) rgba(0, 0, 0, 0.3) transparent rgba(0, 0, 0, 0.3);
	border-radius:9.7svh;
	box-shadow:0svh 0.5svh 0.25svh black;
	color:#666666;
	display:none;
	font-size:3svh;
	height:19.4svh;
	line-height:19.4svh;
	margin:auto;
	outline:0.3svh solid white;
	position:relative;
	text-shadow:0px 1px 0px white;
	width:19.4svh;
	z-index:100;
}

#button-start {
	appearance:none;
	-webkit-appearance:none;
	background-image:linear-gradient(#e6e6e6, white, #b3b3b3, #b3b3b3, #e6e6e6);
	border:0.1svh solid black;
	border-color:rgba(0, 0, 0, 0.6) rgba(0, 0, 0, 0.3) transparent rgba(0, 0, 0, 0.3);
	border-radius:9.7svh;
	box-shadow:0svh 0.5svh 0.25svh black;
	color:#666666;
	display:block;
	font-size:3svh;
	height:19.4svh;
	line-height:19.4svh;
	margin:auto;
	outline:0.3svh solid white;
	position:relative;
	text-align:center;
	text-shadow:0svh 0.1svh 0svh white;
	width:19.4svh;
	z-index:100;
}

#button-stop {
	appearance:none;
	-webkit-appearance:none;
	background-image:linear-gradient(#e6e6e6, white, #b3b3b3, #b3b3b3, #e6e6e6);
	border:0.1svh solid black;
	border-color:rgba(0, 0, 0, 0.6) rgba(0, 0, 0, 0.3) transparent rgba(0, 0, 0, 0.3);
	border-radius:9.7svh;
	box-shadow:0svh 0.5svh 0.25svh black, 0px 0.5svh 1svh rgba(0, 0, 0, 0.6) inset;
	color:white;
	display:none;
	font-size:3svh;
	height:19.4svh;
	line-height:19.4svh;
	margin:auto;
	outline:0.3svh solid white;
	position:relative;
	text-shadow:0svh 0svh 1svh white;
	width:19.4svh;
	z-index:100;
}

h3 {
	animation-name:h3-spacing;
	animation-duration:2s;
	background-image:linear-gradient(rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.0));
	font-size:125%;
	font-weight:normal;
	letter-spacing:10px;
	text-shadow:0px 3px rgba(0, 0, 0, 0.2);
}

@keyframes h3-spacing {
  from {opacity:0; letter-spacing:5px; text-shadow:0px 3px rgba(0, 0, 0, 0.0)}
  to {opacity:1; letter-spacing: 10px; text-shadow:0px 3px rgba(0, 0, 0, 0.2)}
}

.flex-container {
	align-items:center;
	display:flex;
	height:40svh;
	justify-content:center;
	width:100%;
}

.flex-item-slider {
	background-color:white;
	box-shadow:0svh 2vw 2vw rgba(0, 0, 0, 0.6);
	height:40svh;
	margin:2vw;
	position:relative;
	width:15vw;
}

.flex-item-slider-title {
	background-color:white;
	height:4svh;
	line-height:4svh;
	text-align:center;
	width:15vw;
}

.flex-item-slider-skala {
	background-color:white;
	bottom:0px;
	height:4svh;
	line-height:4svh;
	position:absolute;
	text-align:center;
	width:15vw;
}

.footer-inside-left {
	border-right:1px solid #cccccc;
	display:inline-block;
	float:left;
	line-height:4svh;
	text-align:left;
	width:44vw;
}

.footer-inside-right {
	display:inline-block;
	float:right;
	line-height:4svh;
	text-align:right;
	width:44vw;
}

#main-card-morning {
	background:url('../pics/sweet-morning.webp');
	background-clip:padding-box;
	background-position:bottom;
	background-repeat:no-repeat;
	background-size:cover;
	
	border-top:2.3svh solid white;
	border-right:4vw solid white;
	border-bottom:2.3svh solid white;
	border-left:4vw solid white;
	
	box-shadow: 0px 0px 2vw black;
	height:97.4svh;
	margin:auto;
	width:96vw;
	z-index:100;
}

#main-card-rain {
	background:url('../pics/gentle-rain-background.webp');
	background-clip:padding-box;
	background-position:bottom;
	background-repeat:no-repeat;
	background-size:cover;
	
	border-top:2.3svh solid white;
	border-right:4vw solid white;
	border-bottom:2.3svh solid white;
	border-left:4vw solid white;
	
	box-shadow: 0px 0px 2vw black;
	height:97.4svh;
	margin:auto;
	width:96vw;
	z-index:100;
}

#main-card-sea {
	background:url('../pics/the-endless-sea-transient.webp');
	background-clip:padding-box;
	background-position:top;
	background-repeat:no-repeat;
	background-size:cover;
	
	border-top:2.3svh solid white;
	border-right:4vw solid white;
	border-bottom:2.3svh solid white;
	border-left:4vw solid white;
	
	box-shadow: 0px 0px 2vw black;
	height:97.4svh;
	margin:auto;
	width:96vw;
	z-index:100;
}

.part-title {
	background-color:white;
	border-bottom-left-radius:2.5svh;
	border-bottom-right-radius:2.5svh;
	height:5svh;
	line-height:5svh;	
	margin:auto;
	margin-top:-2.2svh;
	text-align:center;
	width:60vw;
}

.part-theme {
	height:5svh;
	line-height:5svh;
	margin:auto;
	margin-top:2.5svh;
	text-align:center;
	width:88vw;
}

.part-play {
	height:20svh;
	margin:auto;
	margin-top:3.5svh;
	width:88vw;
}

.part-sleep-mode {
	height:10svh;
	margin:auto;
	width:88vw;
}

.part-fader {
	font-size:80%;
	height:40svh;
	margin:auto;
	margin-left:-2vw;
	width:92vw;
}

.part-footer {
	height:4svh;
	margin:auto;
	margin-top:2.5svh;
	width:88vw;
}

#sleep-mode {
	display:none;
	background-color:black;
	height:100%;
	left:0px;
	opacity:0.8;
	position:fixed;
	top:0px;
	width:100%;
	z-index:9999;
}

#sleep-mode-starter {
	background-image:linear-gradient(#e6e6e6, white, #b3b3b3, #b3b3b3, #e6e6e6);
	border:0.1svh solid black;
	border-color:rgba(0, 0, 0, 0.6) rgba(0, 0, 0, 0.3) transparent rgba(0, 0, 0, 0.3);
	border-radius:2.5svh;
	box-shadow:0px 0.5svh 0svh black;
	color:#666666;
	cursor:pointer;
	font-size:80%;
	height:4.4svh;
	line-height:4.4svh;
	margin:3.5svh auto 0svh auto;
	outline:0.3svh solid white;
	position:relative;
	text-align:center;
	text-shadow:0svh 0.1svh 0svh white;
	width:15svh;
	z-index:100;
}

.slider {
    -webkit-appearance:none;
    appearance:none;
    background-image:linear-gradient(-90deg, #e6e6e6, white, #b3b3b3, #b3b3b3, #e6e6e6);
	border-left:0px solid black;
	height:12vw;
	left:1.5vw;
	overflow:hidden;
	position:relative;
	top:32svh;
	transform:rotate(270deg);
	transform-origin:top left;
	width:32svh;
	z-index:900;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance:none;
    appearance:none;
    background-image:linear-gradient(#666666, white, white, #999999);
    box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.6), -100vw 0 0 calc(100vw) #6699ff;
	border-left:2px solid black;
	border-right:1px solid white;
    cursor:grab;
    height:13vw;
	position:relative;
    width:3svh;
	z-index:999;
}