#gameBoardGridContainer {
	background-color: var(--dt-board-color1);
	border: 10px solid var(--dt-button-border-color3);
	color: var(--dt-colored-text1) !important;
	text-align: center;
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
}

#gameBoardGridContainerFlex {
	background-color: var(--dt-board-color1);
	border: 10px solid var(--dt-button-border-color3);
	color: var(--dt-colored-text1) !important;
	text-align: center;
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	display: flex;
  	align-items: center;
  	justify-content: center;
}

.visuallyHidden {
	position: absolute;
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.questionText {
	margin-top: 5%;
	padding-left: 5%;
	padding-right: 5%;
	font-size: 1.75em !important;
	color: var(--dt-colored-text1) !important;
	text-align: center;
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	direction: ltr;
}

input {
	color: white;
}

.submitButton {
	background: url("dtt-submitbutton_normal.png") no-repeat;
	background-size: 100% 100%;
	border: none;
	font-size: 2.5vh !important;
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	animation-duration: 0.75s;
    animation-iteration-count: 3;
	animation-name: submitBounce;
    animation-timing-function: linear;
	cursor: pointer !important;
}

@keyframes submitBounce {
        0%   { transform: translateY(0); }
        50%  { transform: translateY(-0.85em); }
        100% { transform: translateY(0); }
}

.submitButton:hover {
	background: url("dtt-submitbutton_hover.png") no-repeat;
	background-size: 100% 100%;
	border: none;
	cursor: pointer !important;
    transform: scale(1.05);
}

.submitButton:focus {
	background: url("dtt-submitbutton_normal.png") no-repeat;
	background-size: 100% 100%;
	border: none;
	cursor: pointer !important;
    transform: scale(1.05);
	border: 2px solid var(--dt-button-focus-color1-inside);
	outline: 2px solid var(--dt-button-focus-color1-outside);
}

.gameboardScoreContainer {
	background-color: var(--dt-button-background-color1);
	border-left: 10px solid black;
	border-bottom: 10px solid black;
	border-right: 10px solid black;
	/*
	display: flex;
    align-items:center;
	justify-content: space-between;
	*/
	z-index: 0;
     
}

.gameboardScore {
	color: white;
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 2.5em;
}

.gameboardScoreTutorial {
	color: var(--dt-colored-text4);
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 2.5em;
}

.scoreText {
	display:flex;
	align-items: center;
	justify-content: space-between;
	z-index: 1;
}

#gameboardDTScore {
	margin-left: 8.5%;
}

#gameboardPlayerScore {
	margin-right: 8.5%;
}

.dtGameplayAvi {
	background: url("dtt-dt-2-sb.png") no-repeat;
	background-size: cover;
	z-index: 1;
}

.playerGameplayAvi {
	background: url("dtt-dt-2-sb.png") no-repeat;
	background-size: cover;
	z-index: 1;
}


.gameScore {
	z-index: 1;
}

.categoryText {
	background-color: var(--dt-button-background-color4);
	color: white !important;
	border: none;
	display: table;
	padding: 1px;
	z-index: 1;
}

.categoryText p {
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 2em;
	display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
}

.gameboardInstructionsContainer {
	background-color: var(--dt-text-background-color2);
	border: none;
	display: flex;
	align-items:center;
    justify-content:center;
	padding-right: 0%;
	padding-left: 15%;
	flex-direction: column;
}

.gameboardNameplate {
	background-color: white;
	border: 3.5px solid var(--dt-colored-text1);
	border-radius: 40px;
	color: var(--dt-colored-text1) !important;
	display: flex;
    align-items:center;
	justify-content: center;
	z-index: 2;
}

#gameboardInstructionsText {
	color: white;
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 2.5em;
	padding-left: 0%;
	padding-right: 5%;
	text-align: center;
}

#gameboardInstructionsTextSmall {
	color: white;
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 2em;
	padding-left: 15%;
	padding-right: 5%;
}


#gameboardInstructionsText1 {
	color: white;
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 2.5em;
	margin-bottom: 0;
}


#gameboardInstructionsText2 {
	color: white;
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 2.5em;
	margin-top: 0;
}

.gameboardInstructionsText {
	color: white;
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 2.5em;
	margin: 0;
}

.gameboardNameplate p {
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 1.5em;
}

.miaAvi {
	background: url("dtt-mia_sb.png") no-repeat;
	background-size: cover;
	z-index: 1;
}

.miaAviDT {
	background: url("dtt-dt-2_sb.png") no-repeat;
	background-size: cover;
	z-index: 1;
}



.gameBoardGridSquareButton {
	color: var(--dt-colored-text2);
	background-color: var(--dt-button-background-color1);
	border:none;
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 6vh !important;
	z-index: 1;
}

.gameBoardGridSquareButton:hover {
	color: var(--dt-colored-text2);
	background-color: var(--dt-button-background-color2);
	border: 1px solid var(--dt-button-border-color1);
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 6vh !important;
	cursor: pointer;
}

.gameBoardGridSquareButton:focus {
	color: var(--dt-colored-text2);
	background-color: var(--dt-button-background-color2);
	border: 1px solid var(--dt-button-border-color1);
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 6vh !important;
	border: 2px solid var(--dt-button-focus-color1-inside);
	outline: 2px solid var(--dt-button-focus-color1-outside);
	cursor: pointer;
}

.gameBoardGridSquareCorrect {
	background-color: var(--dt-button-background-color3) !important;
	background: url("dtt-gameboard_fs-correct.png") no-repeat;
	background-position: center;
	background-size: 55%;
	border: none;
	z-index: 1;
}

.gameBoardGridSquareIncorrect {
	background-color: var(--dt-button-background-color4) !important;
	background: url("dtt-gameboard_fs-incorrect.png") no-repeat;
	background-position: center;
	background-size: 55%;
	border: none;
	z-index: 1;
}

.answerButton {
	color: var(--dt-colored-text2);
	background-color: var(--dt-button-background-color1);
	border: 1px solid var(--dt-button-background-color1);
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 3vh !important;
	white-space: normal;
	word-wrap: normal;
}

.answerButton:hover {
	color: var(--dt-colored-text2);
	background-color: var(--dt-button-background-color2);
	border: 1px solid var(--dt-button-border-color1);
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 3vh !important;
	white-space: normal;
	word-wrap: normal;
	cursor: pointer;
}

.answerButton:focus {
	color: var(--dt-colored-text2);
	background-color: var(--dt-button-background-color2);
	border: 1px solid var(--dt-button-border-color1);
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 3vh !important;
	white-space: normal;
	word-wrap: normal;
	border: 2px solid var(--dt-button-focus-color1-inside);
	outline: 2px solid var(--dt-button-focus-color1-outside);
	cursor: pointer;
}

.answerButtonSelected {
	color: var(--dt-colored-text2);
	background-color: var(--dt-button-background-color4);
	border: none;
	outline: 5px solid var(--dt-button-border-color2);
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 3vh !important;
	white-space: normal;
	word-wrap: normal;
}

@media (aspect-ratio < 1024/768) {
	.gameBoardGridSquareButton {
		font-size: 5vw !important;
	}
	
	.gameBoardGridSquareButton:hover {
		font-size: 5vw !important;
	}
	
	.gameBoardGridSquareButton:focus {
		font-size: 5vw !important;
	}
	
	.answerButton {
		font-size: 2.5vw !important;
	}
	
	.answerButton:hover {
		font-size: 2.5vw !important;
	}
	
	.answerButton:focus {
		font-size: 2.5vw !important;
	}
	
	.answerButtonSelected {
		font-size: 2.5vw !important;
	}
	
	.submitButton {
		font-size: 2.5vw !important;
	}
}