body {
	overscroll-behavior: none;
	overflow: hidden;
	height: calc(100vh - env(safe-area-inset-bottom));
	margin: 0;
	padding: 0;
	background: black;
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
}

/* Disable selection */
body {
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none;    /* Firefox */
	-ms-user-select: none;     /* Internet Explorer/Edge */
	user-select: none;         /* Non-prefixed version, currently supported by Chrome, Opera, and Safari */
}

/* Hide scrollbars */
body {
	-ms-overflow-style: none; /* for Internet Explorer, Edge */
	scrollbar-width: none; /* for Firefox */
}
body::-webkit-scrollbar {
	display: none; /* for Chrome, Safari, and Opera */
}

body.morning {
	background-image: url('../img/landscape/morning.png');
}
body.day {
	background-image: url('../img/landscape/day.png');
}
body.afternoon {
	background-image: url('../img/landscape/afternoon.png');
}
body.evening {
	background-image: url('../img/landscape/evening.png');
}
body.night {
	background-image: url('../img/landscape/night.png');
}

.if-morning,
.if-day,
.if-afternoon,
.if-evening,
.if-night {
	display: none;
}

body.morning .if-morning {
	display: initial;
}
body.day .if-day {
	display: initial;
}
body.afternoon .if-afternoon {
	display: initial;
}
body.evening .if-evening {
	display: initial;
}
body.night .if-night {
	display: initial;
}

.container {
	position: absolute;
	top: 3vw;
	left: 3vw;
	width: calc(100vw - 6vw);
	height: 5.6vw;
}

.shape.shadow {
	top: .5vw;
	left: .4vw;
	background: #dd8488;
}

.shape {
	position: absolute;
	width: 100%;
	height: 5.1vw;
	border-radius: 6vw 10vw 8vw 12vw;
	background-color: #f0e5cf;
	transform: skewX(-10deg);
}

.shape.vial-border,
.shape.vial {
	border-radius: 6vw 8vw 8vw 11vw;
}

.shape.vial-border {
	top: .75vw;
	left: 1vw;
	width: calc(100% - 2vw);
	height: 3.5vw;
	background: #dd8488;
}

.shape.vial {
	top: 1.3vw;
	left: 5.3vw;
	width: calc(100% - 7.1vw);
	height: 2.35vw;
	background: linear-gradient(to bottom, #444 0%, #444 80%, #333 80%, #333 100%);
}

.shape.vial.progress {
	clip-path: inset(0 100% 0 0);
	background: linear-gradient(to bottom, #fad94a 0%, #fad94a 80%, #cfb53f 80%, #cfb53f 100%);
	transition: clip-path 2.5s ease;
}

.vial-reflection {
	opacity: .25;
	position: absolute;
	top: 1.7vw;
	left: 10%;
	width: calc(80%);
	height: .35vw;
	border-radius: 20%;
	background: white;
}

.stamp.shadow {
	top: -.25vw;
	left: .15vw;
	background: #dd8488;
}

.stamp {
	position: absolute;
	top: -.75vw;
	width: 6vw;
	height: 6vw;
	border-radius: 2vw 2vw 1.75vw 2vw;
	background: #f0e5cf;
	transform: rotate(45deg);
}

.time-icon {
	display: none;
	position: absolute;
	top: -.25vw;
	left: .5vw;
	width: 5vw;
	height: 5vw;
}

body.night .shape.vial.progress {
	background: linear-gradient(to bottom, #4394e5 0%, #4394e5 80%, #1560ab 80%, #1560ab 100%);
}

.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
		clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
}

@media only screen and (max-width: 600px) {
	.container {
		top: 6vw;
		left: 6vw;
		width: calc(100vw - 12vw);
		height: 5.6vw;
	}
}