@import url("https://use.typekit.net/aiz6bsp.css");

:root {
	--dt-font-family: astounder-squared-lc-bb;
	--dt-font-weight: 400;
	--dt-font-style: normal;
	--dt-colored-text1: rgb(102,45,145); /*Edition Text Color*/
	--dt-colored-text2: rgb(255,255,255); /*Play Button Text Color*/
	--dt-colored-text3: rgb(67,4,117); /*Confirm Prompt Text Color*/
	--dt-colored-text4: rgb(97,193,118); /*Tutorial highlighted text*/
	--dt-text-background-color1: rgb(67,4,117); /* background color of text in select a character */
	--dt-text-background-color2: rgb(0,0,0); /* background color of feedback text */
	--dt-text-background-color3: rgb(254,151,240); /* background color of feedback text */
	--dt-button-background-color1: rgb(67, 4, 117); /* Confirm button background color */
	--dt-button-background-color2: rgb(184,27,195); /* Gamboard correct button color*/
	--dt-button-background-color3: rgb(117,242,117); /* Gamboard correct button color*/
	--dt-button-background-color4: rgb(15,16,86); /* Gamboard incorrect button color*/
	--dt-button-border-color1: rgb(255,255,255); /* Confirm button hover border color */
	--dt-button-border-color2: rgb(117,242,117); /* Confirm button hover border color */
	--dt-button-border-color3: rgb(0,0,0); /* Confirm button hover border color */
	--dt-board-color1: rgb(254,178,249); /* gameboard background color */
	--dt-button-focus-color1-outside: rgb(0,255,255);
	--dt-button-focus-color1-inside: rgb(27,20,100);
	
}

#darkOverlay {
	background-color: rgba(0,0,0,.75) !important;
}

#DisclaimerTextDiv {
	background-color: #FFFFFF;
}

#disclaimerText {
	text-align: center;
	margin-left: 5%;
	margin-right: 5%;
	font-size: 2.25vh !important;
	border-style: groove;
}

#disclaimerButton {
	cursor: pointer;
}

#disclaimerButton:hover {
	background-color: #003d59 !important;
}

#disclaimerButton:focus {
	background-color: #003d59 !important;
}

.exitGameButton {
	background: url("dtt-blanktextbutton_normal.png") no-repeat;
	background-size: 100% 100%;
	border: none;
	font-family: sans-seriff;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 2.75vh !important;
	color: #FFFFFF;
}

.exitGameButton:focus {
	border: 2px solid var(--dt-button-focus-color1-inside);
	outline: 2px solid var(--dt-button-focus-color1-outside);
	font-size: 2.75vh !important;
}

.exitGameButton:hover {
	background: url("dtt-blanktextbutton_hover.png") no-repeat;
	background-size: 100% 100%;
	border: none;
	font-family: sans-seriff;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 2.75vh !important;
	color: #FFFFFF;
	cursor: pointer;
}

.outroTitleText {
	object-fit: contain;
	background-color: transparent;
}

.versionText {
	color: var(--dt-colored-text2);
	font-family: sans-seriff;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 2em;
	white-space: nowrap;
}

#editionText {
	font-family: sans-seriff;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 5vh !important;
	color: var(--dt-colored-text2) !important;
	white-space: nowrap;
	text-align: center;
}

#anyButton {
	background: url("dtt-holdingshape_instructions.png") no-repeat;
	background-size: cover;
	border: none;
	pointer-events: none;
	font-family: sans-seriff;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 4.5vh !important;
	color: var(--dt-colored-text1);
}

#helpButton {
	background: url("dtt-smalltutorialbutton_normal.png") no-repeat;
	background-size: 100% 100%;
	border: none;
	z-index: 2;
}

#helpButton:focus {
	border: 2px solid var(--dt-button-focus-color1-inside);
	outline: 2px solid var(--dt-button-focus-color1-outside);
}

#helpButton:hover {
	background: url("dtt-smalltutorialbutton_hover.png") no-repeat;
	background-size: cover;
	z-index: 2;
	border: none;
	cursor: pointer;
}

#settingsButton {
	background: url("dtt-smallsoundbutton_normal.png") no-repeat;
	background-size: 100% 100%;
	border: none;
	z-index: 2;
}

#settingsButton:focus {
	border: 2px solid var(--dt-button-focus-color1-inside);
	outline: 2px solid var(--dt-button-focus-color1-outside);
}

#settingsButton:hover {
	background: url("dtt-smallsoundbutton_hover.png") no-repeat;
	background-size: cover;
	z-index: 2;
	border: none;
	cursor: pointer;
}

#customEscapeButton {
	background: url("dtt-smallexitbutton_normal.png") no-repeat;
	background-size: cover;
	border: none;
}

#customEscapeButton:focus {
	border: 2px solid var(--dt-button-focus-color1-inside);
	outline: 2px solid var(--dt-button-focus-color1-outside);
}

#customEscapeButton:hover {
	background: url("dtt-smallexitbutton_hover.png") no-repeat;
	background-size: cover;
	border: none;
	cursor: pointer;
}

#characterNextButton {
	background: url("dtt-nextbutton_normal.png") no-repeat;
	background-size: 100%;
	border: none;
	animation-duration: 0.75s;
    animation-iteration-count: 3;
	animation-name: charBounce;
    animation-timing-function: linear;
}

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

#characterNextButton:hover {
	background: url("dtt-nextbutton_hover.png") no-repeat;
	background-size: 100%;
	border: none;
	cursor: pointer;
}

#characterNextButton:focus {
	border: 2px solid var(--dt-button-focus-color1-inside);
	outline: 2px solid var(--dt-button-focus-color1-outside);
}

.menuButtons {
	background: url("dtt-blanktextbutton_normal.png") no-repeat;
	background-size: cover;
	border: none;
	font-family: sans-seriff;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 6vh !important;
	color: #FFFFFF;
}

.menuButtons:focus {
	border: 2px solid var(--dt-button-focus-color1-inside);
	outline: 2px solid var(--dt-button-focus-color1-outside);
	font-size: 6vh !important;
}

.menuButtons:hover {
	background: url("dtt-blanktextbutton_hover.png") no-repeat;
	background-size: cover;
	border: none;
	font-family: sans-seriff;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 6vh !important;
	color: #FFFFFF;
	cursor: pointer;
}

@media (aspect-ratio < 1024/768) {

	.exitGameButton {
		font-size: 2.25vw !important;
	}
	
	#editionText {
		font-size: 5vw !important;
	}
	
	.menuButtons {
		font-size: 4vw !important;
	}
	
	.menuButtons:hover {
		font-size: 4vw !important;
	}
	
	.menuButtons:focus {
		font-size: 4vw !important;
	}
	
	#anyButton {
		font-size: 3.5vw !important;
	}
	
	#disclaimerText {
		font-size: 1.4vw !important;
	}
}