html, body {
	margin: 0;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

body, #settingsPage {
	--theme-bg: black;
	--theme-fg: white;
	background-color: black;
	color: white;
}

body[data-setting-theme = "light"], [data-setting-theme = "light"] #settingsPage {
	--theme-bg: white;
	--theme-fg: black;
	background-color: white;
	color: black;
}

#centerDisplay {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.bigDisplayActive #centerDisplay {
	width: 100vw!important;
	height: 100vh!important;
	position: fixed!important;
	top: 0!important;
	left: 0!important;
	transform: none!important;
	z-index: 1001!important;
}

#timeDisplay {
	font-size: calc(60px + 10vw);
	font-family: 'Courier New', Courier, monospace;
	white-space: nowrap;
	user-select: none;
}

#currentTimePeriod {
	text-align: center;
	font-size: calc(16px + 1vw);
}

[data-setting-hideTimePeriod = true] #currentTimePeriod {
	display: none;
}

.shiftDown #currentTimePeriod {
	display: block;
}

#timeOver {
	position: fixed;
	top: 50%;
	left: 2vw;
	display: none;
}

[data-pointerpos = "left"] #timeOver {
	display: block;
}

#timeLeft {
	position: fixed;
	top: 50%;
	right: 2vw;
}

[data-pointerpos = "left"] #timeLeft {
	display: none;
}

body.shiftDown #timeOver, .shiftDown[data-pointerpos = "left"] #timeLeft {
	display: block;
}

#dateDisplay {
	font-size: calc(20px + 0.5vw);
	color: #777777;
	position: fixed;
	left: 50%;
	bottom: 2vh;
	transform: translate(-50%, -50%);
}

#consoleView {
	position: fixed;
	top: 0%;
	left: 50%;
	transform: translate(-50%, 50%);
	z-index: 1000;
}

#settingsIcon, #closeSettingsIcon {
	position: fixed;
	top: 0%;
	right: 0%;
	transform: translate(-50%, 50%);
	cursor: pointer;
}

.stillLoading #settingsIcon {
	display: none;
}

.fadeEnabled#settingsIcon {
	opacity: 0;
	transition: opacity 0.5s;
}

#settingsIcon::before {
	content: "";
	position: absolute;
	border-radius: 50%;
	width: 500%;
	height: 500%;
	transform: translate(-50%, -50%);
}

.fadeEnabled#settingsIcon:hover {
	opacity: 1;
}

.shiftDown #settingsIcon {
	transition: none;
	opacity: 1;
}

#settingsPage {
	width: 100vw;
	height:  100vh;
	position: fixed;
	top: 0%;
	left: 0%;
	display: none;
	text-align: center;
}

.settingsView #settingsPage {
	display: block;
}

#settingsTitle {
	font-size: calc(40px + 2vw);
	margin-top: 8vh;
	margin-bottom: 5vh;
}

#settingsPage label {
	font-size: calc(14px + 0.5vw);
}

#overrideIndicator {
	font-size: calc(12px + 0.25vw)
}

.bigDisplay {
	display: flex!important;
	justify-content: center!important;
	align-items: center!important;
	width: 100vw!important;
	height: 100vh!important;
	background-color: var(--theme-bg)!important;
	font-size: calc(10px + 10vw)!important;
	position: fixed!important;
	top: 0!important;
	left: 0!important;
	line-height: 1;
	z-index: 1002!important;
	white-space: initial!important;
	user-select: none!important;
	padding: 0 5vw!important;
	box-sizing: border-box!important;
}

.bigDisplay#timeDisplay {
	font-size: calc(10px + 20vw)!important;
}

@media (prefers-color-scheme: dark) {
	:root {
		--theme-bg: black;
		--theme-fg: white;
	}
	body[data-setting-theme = "system"], [data-setting-theme = "system"] #settingsPage {
		background-color: black;
		color: white;
	}
}

@media (prefers-color-scheme: light) {
	:root {
		--theme-bg: white;
		--theme-fg: black;
	}
	body[data-setting-theme = "system"], [data-setting-theme = "system"] #settingsPage {
		background-color: white;
		color: black;
	}
}