@font-face {
	font-family: Scrabble;
	src: url("Arial-BoldMT.ttf");
}

:root {
	--scale-factor: calc(1845 / 1292.0);
	--scrabble-color: #b38726;
}

.page-content {
}

.page-content #mainContainer {
	display: grid;
	grid-template-columns: 5fr 2fr;
	gap: 1em;
	font-family: Arial, sans-serif;
	text-align: center;
	color: black;
}

.page-content #innerContainer1 {
}

.page-content #innerContainer2 {
	display: grid;
	grid-template-rows: min-content 1fr;
	row-gap: 1em;
	container-type: size;
}

.page-content hr {
	border-top: 2px solid black;
	width: 75%;
}

.page-content .fa {
	color: white;
	font-size: 80cqmin !IMPORTANT;
}

.page-content .doubleLetter {
	background-color: lightskyblue;
}

.page-content .tripleLetter {
	background-color: dodgerblue;
}

.page-content .doubleWord {
	background-color: pink;
}

.page-content .tripleWord, .star {
	background-color: orangered;
}

.page-content #board {
	display: grid;
	grid-template-columns: repeat(15, calc(100% / 15));
	grid-template-rows: repeat(15, calc(100% / 15));
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	aspect-ratio: 1 / 1;
	border: 10px solid var(--scrabble-color);
	padding: 4px;
	user-select: none;
	grid-column: 1;
	grid-row: 1;
}

.page-content #board > div {
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	border: 1px solid rosybrown;
	container-type: size;
}

.page-content #board > div > span {
	font-size: 60cqmin;
}

.page-content #board > div > .boardInputContainer {
	display: none;
	width: 100cqmin;
	height: 100cqmin;
	background-color: antiquewhite;
	position: relative;
}

.page-content #board > div > .boardInputContainer > input {
	width: 75cqmin;
	height: 80cqmin;
	font-size: 80cqmin;
	font-weight: bold;
	text-align: center;
	border: 0px;
	background-color: antiquewhite;
	font-family: 'Scrabble';
	padding: 0px 25cqmin 20cqmin 0px;
}

.page-content #board .points {
	position: absolute;
	bottom: -5cqmin;
	right: 0;
	font-size: 40cqmin;
	pointer-events: none;
}

.page-content #board > .boardInput {
	background-color: antiquewhite;
}

.page-content #board > .boardInput > span {
	display: none;
}

.page-content #board > .boardInput > .boardInputContainer {
	display: flex;
}

.page-content #board > div > .boardSolutionContainer {
	display: none;
	width: 100%;
	height: 100%;
	background-color: palegreen;
	justify-content: center;
	align-items: center;
	font-size: 100cqmin;
}

.page-content #board > .boardSolution > span {
	display: none;
}

.page-content #board > .boardSolution > .boardSolutionContainer {
	display: flex;
}

.page-content #hand {
	display: grid;
	grid-template-columns: repeat(7, calc(100% / 7));
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	aspect-ratio: 7 / 1;
	border: 10px solid var(--scrabble-color);
	padding: 2px;
	user-select: none;
	margin-top: 1%;
	grid-column: 1;
	grid-row: 2;
}

.page-content #hand > div {
	display: flex;
	border: 1px solid rosybrown;
	margin: 2px;
	aspect-ratio: 1 / 1;
	background-color: antiquewhite;
	position: relative;
	font-weight: bold;
	container-type: size;
}

.page-content #hand > div > input {
	width: 80cqmin;
	background-color: antiquewhite;
	border: 0px;
	font-size: 90cqmin;
	font-family: 'Scrabble';
	height: 80cqmin;
	text-align: center;
	padding: 0px 20cqmin 20cqmin 0px;
}

.page-content #hand > div > input:has(+ .points:empty) {
	width: 100cqmin;
	padding-right: 0px;
}

.page-content #hand .points {
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 30cqmin;
	pointer-events: none;
}

.page-content #submitButton {
    background: white;
	padding: 0.3em;
	font-size: 10cqw;
	font-weight: bold;
	background-color: #c9ffc9;
	cursor: pointer;
	white-space: nowrap;
	border: 2px solid black;
}

.page-content #solutionsContainer {
	border: 2px solid black;
	padding: 2px;
	position: relative;
}

.page-content #solutions {
	position: absolute;
	top: 0;
	bottom: 0;
	overflow-y: auto;
	left: 0;
	right: 0;
	display: grid;
	padding: 2px;
}

.page-content #solutions > div {
	margin: 2px;
	border: 1px solid rosybrown;
	padding: 0.3em;
	background-color: antiquewhite;
	display: grid;
	grid-template-columns: 1fr max-content;
	text-align: left;
	font-size: 7cqw;
	cursor: pointer;
}

.page-content #solutions > .selectedSolution {
	background-color: navajowhite;
}

.page-content #boardStateContainer {
	grid-column: 1 / 3;
}

.page-content #boardStateContainer h1 {
	margin: 0px;
}

.page-content #boardState {
	font-size: 100%;
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 769px){
    .page-content #mainContainer {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr auto;
		column-gap: 0px;
	}
	
	.page-content #innerContainer1 {
		grid-row: 1;
	}
	
	.page-content #innerContainer2 {
		grid-row: 2;
		max-width: 300px;
		justify-self: center;
		width: 100%;
	}
	
	.page-content #boardStateContainer {
		grid-row: 3;
	}
}