/* keyboard */

section.keyboard {
	position: absolute;
	bottom: 0px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 640px;
	color: white;
	/* background-color:rgb(22 22 22); */
}

.keyboard_module {
	width: 100%;
	/* height: 280px; */
	height: 17.5rem;
	height: 13.125rem;
}

.keyboard_row {
	display: flex;
	justify-content: center;
	/*margin-bottom:8px;*/
	height: 24%;
	perspective: 500px;
}

/* not sure what this did or why it does nothing now */
/* .keyboard_row:last-child {
	margin-bottom: 4px;
} */

/* only needed if we bring back buttons left and right of enter key */
/* .keyboard_row .space {
	width: 40px;
} */

.keyboard .key {
	width: 9.9%;
	margin: 0 0%;
	/* font-size: 30px; */
	font-size: 1.875rem;
	font-size: 1.40625rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background-color: rgb(0 190 255 / 20%);
	border-radius: 6px;
	border-radius: 0.275rem;
	border: 4px solid rgb(22 22 22);
	border: 4px solid transparent;
	border: 0.1875rem solid transparent;
	/*border: 4px solid red;*/
	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Old versions of Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
	user-select: none;
	/* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
	transition: background-color 0.1s;
	cursor: pointer;
	touch-action: none;
}

.keyboard.flippedup .key {
	transform: rotateX(90deg);
}

.keyboard.flipdown .key {
	animation: keys_flip_down 0.8s ease-in;
}

@keyframes keys_flip_down {
	0% {
		transform: rotateX(90deg);
	}

	50% {
		transform: rotateX(-10deg);
	}

	100% {
		transform: rotateX(0deg);
	}
}

.keyboard .key.enter {
	width: 280px;
	width: 13.125rem;
}

.keyboard .key.undo {
	width: 12%;
	margin-right: 12px;
	margin-right: 0.5625rem;
	background-image: url(../images/up_arrow.png);
	background-size: auto 70%;
	background-repeat: no-repeat;
	background-position: center;
}

.keyboard .key.backspace {
	width: 12%;
	margin-left: 12px;
	margin-left: 0.5625rem;
	background-image: url(../images/backspace.png);
	background-size: auto 70%;
	background-repeat: no-repeat;
	background-position: center;
}

.keyboard.archive .key {
	background-color: rgb(255 255 255 / 7%);
	box-shadow: inset 1px 1px 0px rgb(255 255 255 / 60%), inset -1px -1px 1px rgb(255 255 255 / 60%);
}

.keyboard.current .key {
	background-color: rgb(0 190 255 / 10%);
	box-shadow: inset 1px 1px 0px rgb(65 190 250), inset -1px -1px 1px rgb(65 190 255);
}

@media (hover: hover) { /* limits hover to desktop */
	.keyboard.archive .key:hover {
		background-color: rgb(255 255 255 / 20%);
	}

	.keyboard.current .key:hover {
		background-color: rgb(0 190 255 / 20%);
	}
}


.keyboard.archive .key.lume {
	background-color: rgb(255 255 255 / 20%);
}

.keyboard.current .key.lume {
	background-color: rgb(0 190 255 / 30%);
}

.keyboard.archive .key.flash {
	animation: archive_flash 0.2s;
}

.keyboard.current .key.flash {
	animation: current_flash 0.2s;
}

@keyframes archive_flash {
	0% {
		background-color: rgb(255 255 255 / 7%);
	}

	50% {
		background-color: rgb(255 255 255 / 27%);
	}

	100% {
		background-color: rgb(255 255 255 / 7%);
	}
}

@keyframes current_flash {
	0% {
		background-color: rgb(0 190 255 / 10%);
	}

	50% {
		background-color: rgb(0 190 255 / 30%);
	}

	100% {
		background-color: rgb(0 190 255 / 10%);
	}
}

/* difficulty colored keys (old, decommissioned game mode) */

/* .keyboard.easy .key {
	background-color: rgb(9 255 0 / 7%);
	box-shadow: inset 1px 1px 0px rgb(118 255 122), inset -1px -1px 1px rgb(114 255 118);
}

.keyboard.medium .key {
	background-color: rgb(0 190 255 / 10%);
	box-shadow: inset 1px 1px 0px rgb(0 190 255), inset -1px -1px 1px rgb(0 190 255);
}

.keyboard.hard .key {
	background-color: rgb(255 0 0 / 11%);
	box-shadow: inset 1px 1px 0px rgb(255 44 44 / 90%), inset -1px -1px 1px rgb(255 44 44 / 90%);
}

.keyboard.infuriating .key {
	background-color: rgb(255 46 214 / 15%);
	box-shadow: inset 1px 1px 0px rgb(255 4 248 / 73%), inset -1px -1px 1px rgb(255 4 248 / 73%);
}

.keyboard.easy .key:hover {
	background-color: rgb(9 255 0 / 17%);
}

.keyboard.medium .key:hover {
	background-color: rgb(0 190 255 / 20%);
}

.keyboard.hard .key:hover {
	background-color: rgb(255 0 0 / 21%);
}

.keyboard.infuriating .key:hover {
	background-color: rgb(255 46 214 / 25%);
} */

/* .keyboard.easy .key.flash {
	animation: ef1 0.2s;
}

.keyboard.medium .key.flash {
	animation: mf1 0.2s;
}

.keyboard.hard .key.flash {
	animation: hf1 0.2s;
}

.keyboard.infuriating .key.flash {
	animation: if1 0.2s;
}


.keyboard.easy .key.lume {
	background-color: rgb(9 255 0 / 27%);
}

.keyboard.medium .key.lume {
	background-color: rgb(0 190 255 / 30%);
}

.keyboard.hard .key.lume {
	background-color: rgb(255 0 0 / 31%);
}

.keyboard.infuriating .key.lume {
	background-color: rgb(255 46 214 / 35%);
} */


/* @keyframes ef1 {
	0% {
		background-color: rgb(9 255 0 / 7%);
	}

	50% {
		background-color: rgb(9 255 0 / 27%);
	}

	100% {
		background-color: rgb(9 255 0 / 7%);
	}
}

@keyframes mf1 {
	0% {
		background-color: rgb(0 190 255 / 10%);
	}

	50% {
		background-color: rgb(0 190 255 / 30%);
	}

	100% {
		background-color: rgb(0 190 255 / 10%);
	}
}

@keyframes hf1 {
	0% {
		background-color: rgb(255 0 0 / 11%);
	}

	50% {
		background-color: rgb(255 0 0 / 31%);
	}

	100% {
		background-color: rgb(255 0 0 / 11%);
	}
}

@keyframes if1 {
	0% {
		background-color: rgb(255 46 214 / 15%);
	}

	50% {
		background-color: rgb(255 46 214 / 35%);
	}

	100% {
		background-color: rgb(255 46 214 / 15%);
	}
} */



/* nav buttons on keyboard */
/* .button.pu,
.button.ru {
	height: 100%;
	width: auto;
	opacity: 0.7;
	width: 70px;
	position: relative;
}

.ru.icon,
.pu.icon,
.play.icon {
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: contain;
	background-size: 84%;
	background-repeat: no-repeat;
	background-position: center;
	transition: opacity 0.3s;
}

.play_icon {
	opacity: 0;
}

.toggle_ru .play.icon {
	transform: rotate(180deg);
}

.play.icon {
	background-image: url('../images/play_icon_triangle.png');
	opacity: 0;
}

.ru.icon {
	background-image: url('../images/rulebook2.png');
	opacity: 1;
}

.pu.icon {
	background-image: url('../images/puzzle_icon_horizontal.png');
	opacity: 1;
}

.ru.icon,
.pu.icon,
.play.icon {
	transition: opacity 0.3s;
}

.show_rules .button.ru .ru.icon {
	opacity: 0;
}

.show_rules .button.ru .play.icon {
	opacity: 1;
}

.show_puzzles .button.pu .pu.icon {
	opacity: 0;
}

.show_puzzles .button.pu .play.icon {
	opacity: 1;
}

.button.ru {
	opacity: 0.55;
}

.button.pu img,
.button.ru img {
	margin-top: 10%;
	height: 80%;
}
*/