@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&family=Oxanium:wght@200..800&display=swap');

[v-cloak] {
	display: none;
}

body {
	background-color: #000;
}

h2 {
	font-size: 9vh;
}

.score-num {
	font-size: 19vh;
	font-weight: 600;
	line-height: calc(19vh + 0.5rem);
}

#timer {
	font-family: oxanium, orbitron;
	background-color: #000;
	color: #FF0;
}

#timer .timeLeft {
	--timer-font-size: 27vh;
	font-size: var(--timer-font-size);
	line-height: calc(var(--timer-font-size) + 0.25rem);
	border: 1px dotted #333;
}

.scoreboard-timer .quarters-container {
	margin-top: 0.5rem;
	line-height: 20px;
}

.scoreboard-timer .quarters button {
	font-size: 5vh;
	min-width: 120px;
}

.scoreboard-timer .timeLeft .is-halftime,
.scoreboard-timer .timeLeft .is-between {
	color: var(--bs-white);
}

.possession,
.possession .btn {
	font-size: 4vh;
}

.quarter-time-editor {
	font-size: 1rem;
}

.btn-score {
	height: fit-content;
}


/*
================================
	Portrait orientation
================================
*/
@media screen and (orientation: portrait) {
	#timer {
		font-size: 14vw;
	}

	.scoreboard-timer .quarters button {
		font-size: 5vw;
		min-width: 10vw;
	}

	#scores h2 {
		font-size: 10vw;
	}

	#scores .score-num {
		font-size: 24vw;
	}
}