.player-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.player-container {
	.player-table {
		height: min(20vh, 4em);
		font-size: min(7.5vh, 1.5em);
	}
	.player-lectern-mini {
		display: flex;
		flex-direction: column;
		align-items: center;
		.name-display,
		.score-display {
			color: var(--white);
			text-align: center;
			display: flex;
			margin: auto;
			width: 100%;
			.display-inner {
				margin: auto;
			}
		}
		.display-inner:empty::after {
			content: '--';
			margin: auto;
		}
		.name-display {
			padding-left: 0.5em;
			padding-right: 0.5em;
			text-wrap: wrap;
		}
		.score-display {
			font-family: Arial, Helvetica, sans-serif;
			.display-inner.neg {
				color: red;
			}
			.display-inner.neg::before {
				content: '-';
				color: red;
				margin-right: 0.1em;
			}
		}
	}

	.player-lectern-mini.control {
		border-bottom: 3px solid white;
	}

	.player-lectern-mini.lit .name-display {
		color: var(--blue);
		background-color: var(--white);
	}

	.board-display-container {
		width: min(600px, 100%, 72vh);
		height: min(450px, 75vw, 54%);
		position: relative;
		text-shadow: 2px 2px #000;

		.category-large {
			width: 90%;
			height: 90%;
			position: absolute;
			z-index: 3;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			border: 2px solid var(--white);
			background-color: var(--blue);
			font-family: 'Swiss 911 Compressed', sans-serif;
			.category-text {
				margin: auto;
				text-align: center;
				color: var(--white);
			}
		}

		.game-board {
			width: 100%;
			height: 100%;
			.clue-box,
			.category-box {
				background-color: var(--blue);
				color: var(--white);
				border: 1px solid var(--white);
			}

			.clue-box {
				font-family: 'Swiss 911 Compressed', serif;
				text-align: center;
				display: flex;
				padding: 10%;
				color: var(--yellow);
				cursor: pointer;

				.clue-value {
					margin: auto;
					font-size: min(30px, 5vw) !important;
				}
			}
			.category-box {
				display: flex;
				flex-direction: column;
				padding: 0 5%;
				font-size: min(15px, 2.5vw) !important;

				.category-div {
					font-family: 'Swiss 911 Compressed', sans-serif;
					margin: auto;
					text-align: center;
					text-transform: uppercase;
				}
				.comment-div {
					font-family: 'Korinna Regular BT', serif;
					text-transform: uppercase;
					text-shadow: 2px 2px #000;
				}
			}

			.dd-div {
				width: 16%;
				height: 16%;
				transform: translate(-50%, -50%);
				position: absolute;
				display: none;
				background-image: url('/img/dd.jpg');
				background-color: var(--blue);
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center;
				z-index: 3;
			}

			.dd-div.animation {
				display: block;
				animation-name: dd-animate;
				animation-duration: 3s;
			}
		}
	}

	/*when the window is at least 600px wide, we do the font size by*/

	/* wider aspect ratio*/
	@media (min-aspect-ratio: 0.89) {
		.category-display,
		.clue-display,
		.value-display {
			font-size: min(24px, 4vw) !important;
		}
		.category-large {
			font-size: min(80px, 13.3vw) !important;
		}
		.category-box {
			font-size: min(15px, 2.5vw) !important;
		}
	}

	@media (max-aspect-ratio: 0.89) {
		.category-display,
		.clue-display,
		.value-display {
			font-size: min(24px, 3vw) !important;
		}
		.category-large {
			font-size: min(80px, 10.8vw) !important;
		}

		.category-box {
			font-size: min(12px, 1vw) !important;
		}
	}

	.buzzer-container {
		width: min(100%, 500px);
		.btn-buzzer {
			background-color: var(--lt-blue);
			color: white;
			text-wrap: wrap;
		}
		.btn-buzzer.armed {
			background-color: white;
			color: var(--blue);
		}
	}
}

.input-row-h button {
	width: 20%;
	height: 70%;
	margin-top: auto;
	margin-bottom: auto;
}