main.site.webcam {
	padding: 0; /* no footer, hence reset main rule */
}

main.site.webcam {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100vw;
	height: 100vh;
}

main.site.webcam div.timelapse {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100vw;
	overflow: hidden;
	background-color: var(--neutral-2);

	--slider-left-right: 32px; /* label size is free but with current text about 50px, hence half of it has enough space to the side */
}

main.site.webcam div.timelapse:has(> span.missing.show) {
	height: 100vh;
}

main.site.webcam div.timelapse svg.logo,
main.site.webcam div.timelapse svg.beetrootle {
	display: inline;
	position: absolute;
	width: auto;
	right: 0;
	top: 0;
	margin: 20px;
	width: 10%;
	fill: var(--theme-1-low);
	z-index: 5;
}
main.site.webcam div.timelapse svg.beetrootle {
	top: calc(10% + 30px);
	fill: var(--neutral-1);
}
main.site.webcam div.timelapse svg.logo.daylight {
	fill: var(--contrast-2-low);
}
main.site.webcam div.timelapse svg.beetrootle.daylight {
	fill: var(--neutral-2);
}

main.site.webcam div.timelapse h3.title {
	display: inline;
	position: absolute;
	width: auto;
	left: 0;
	top: 0;
	margin: 20px;
	padding: 4px 8px;
	color: var(--neutral-1);
	background-color: var(--contrast-2-low);
	border-radius: 12px;
	z-index: 20;
}

main.site.webcam div.timelapse input.slider {
	display: block;
	position: absolute;
	width: calc(100% - 2 * var(--slider-left-right));
	left: var(--slider-left-right);
	height: 16px;
	bottom: 12px;
	cursor: pointer;
	outline: none;
	background-color: var(--invisible);
	-webkit-appearance: none;
	appearance: none;
	z-index: 10;

	--thumb-width: 20px;
}
main.site.webcam div.timelapse input.slider.hidden {
	display: none;
}
main.site.webcam div.timelapse input.slider::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 2px;
	background: var(--theme-1);
}
main.site.webcam div.timelapse input.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	border-radius: 50%;
	width: var(--thumb-width);
	height: var(--thumb-width);
	margin-top: -6px;
	background: var(--contrast-2);
}
main.site.webcam div.timelapse input.slider::-moz-range-track {
	height: 4px;
	border-radius: 2px;
	background-color: var(--theme-1);
}
main.site.webcam div.timelapse input.slider::-moz-range-thumb {
	border-radius: 50%;
	width: calc(var(--thumb-width) - 2 * 3px);
	height: calc(var(--thumb-width) - 2 * 3px);
	border: 3px solid var(--contrast-2);
	background-color: var(--theme-1);
}

main.site.webcam div.timelapse div.slider-label {
	z-index: 10;
	display: inline;
	position: absolute;
	bottom: 42px;
	background-color: var(--contrast-2);
	color: var(--neutral-1);
	padding: 4px 6px;
	font-size: 10px;
	text-align: center;
	pointer-events: none;
	white-space: nowrap;
	border-radius: 4px;
}

main.site.webcam div.timelapse div.slider-label::after {
	--pointer-width: 10px;
	content: "";
	position: absolute;
	right: calc(50% - var(--pointer-width) / 2);
	top: 100%;
	width: 0;
	height: 0;
	border-left: calc(var(--pointer-width) / 2) solid var(--invisible);
	border-top: var(--pointer-width) solid var(--contrast-2);
	border-right: calc(var(--pointer-width) / 2) solid var(--invisible);
}

main.site.webcam div.timelapse div.slider-label.hidden {
	display: none;
}

main.site.webcam div.timelapse div.sunBox {
	display: block;
	position: absolute;
	width: calc(100% - 2 * var(--slider-left-right));
	left: var(--slider-left-right);
	bottom: 28px;
}

main.site.webcam div.timelapse button {
	display: inline-block;
	position: absolute;
	bottom: 0;
	color: var(--theme-1);
	background-color: var(--invisible);
	border: none;
	font-family: "Font Awesome 6 Free";
	font-weight: 600;
}

main.site.webcam div.timelapse button.sunrise::before,
main.site.webcam div.timelapse button.sunset::before,
main.site.webcam div.timelapse button.sunrise::after,
main.site.webcam div.timelapse button.sunset::after {
	display: block;
	--icon-width: 24px; /* must be in sync with timelapse.js updateSunPoints()! */
}

main.site.webcam div.timelapse button.sunrise::before,
main.site.webcam div.timelapse button.sunset::before {
	font-size: 12px;
	width: 12px;
	height: 12px;
	margin-left: calc((var(--icon-width) - 12px) / 2);
}
main.site.webcam div.timelapse button.sunrise::before {
	content: "\f062";
}
main.site.webcam div.timelapse button.sunset::before {
	content: "\f063";
}
main.site.webcam div.timelapse button.sunrise::after,
main.site.webcam div.timelapse button.sunset::after {
	content: "\f185";
	font-size: var(--icon-width);
	width: var(--icon-width);
	height: calc(var(--icon-width) / 2);
	overflow: hidden;
}

main.site.webcam div.timelapse img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.1s ease-in-out;
	z-index: 0;
}
main.site.webcam div.timelapse img.hidden {
	display: none;
}

main.site.webcam div.timelapse span.missing {
	display: none;
}
main.site.webcam div.timelapse span.missing.show {
	display: flex;
	position: relative;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
main.site.webcam div.timelapse span.missing.show > p,
main.site.webcam div.timelapse span.missing.show > i {
	color: var(--contrast-1);
}
main.site.webcam div.timelapse span.missing.show > i {
	font-size: 64px;
}

@media (hover: hover) and (pointer: fine) {

	main.site.webcam div.timelapse input.slider::-webkit-slider-thumb:hover {
		background: var(--contrast-1);
	}
	main.site.webcam div.timelapse input.slider::-moz-range-thumb:hover {
		border-color: var(--contrast-1);
	}

	main.site.webcam div.timelapse button:hover {
		color: var(--contrast-1);
		transform: scale(1.1);
		transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
	}

}

@media only screen and (max-width: calc(5 * 164px + 106.5px + 63.5px)) { /* n * var(--tab-width), where n numer of pages plus sports plus some tolerance */

	main.site.webcam div.timelapse svg.beetrootle {
		top: calc(10% + 20px);
	}

}

@media only screen and (max-width: 600px) {

	main.site.webcam div.timelapse h3.title,
	main.site.webcam div.timelapse svg.logo,
	main.site.webcam div.timelapse svg.beetrootle {
		margin: 12px;
	}
	main.site.webcam div.timelapse svg.beetrootle {
		top: calc(10% + 12px);
	}

}