body {
	margin: 0;
	/* background-image: radial-gradient(ellipse at top, #335476 0.0%, #31506e 11.1%, #304b67 22.2%, #2f4760 33.3%, #2d4359 44.4%, #2c3f51 55.6%, #2a3a4a 66.7%, #293643 77.8%, #28323d 88.9%, #262e36 100.0%); */
	background-image: url(https://media.tenor.com/JYKx4QQuaD4AAAAd/chemistry.gif);
	background-color: rgba(0, 0, 0, 0.5);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100vh;
	font-family: monospace;
	font-weight: bold;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.75);
}

.sound-control {
	border: #000;
	border-radius: 50%;
	position: absolute;
	z-index: 500;
	bottom: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.3);
	border-color: rgba(0, 0, 0, 0);
}


/*//////////////////////
//        GAME        //
//////////////////////*/

.game--canvas {
	display: flex;
	align-items: center !important;
	justify-items: center !important;
}

.game {
	visibility: hidden;
	display: flex;
	max-height: 80vh;
	gap: 10vh;
	margin: 5vh 5vh;
	flex-wrap: wrap;
}

.game.active {
	visibility: visible;
	display: flex;
	justify-content: center;

}

.game--space {
	width: 60vw;
	background-color: rgba(255, 255, 255, 0.80);
	margin: 0.8em 0.6em;
	border-radius: 15px;
	overflow: hidden ;
}

.game--command {
	max-width: 20%;
	display: flex;
	padding: 0.8em 0.6em;
}

#c {
	display: block;
	touch-action: none;
	transform: translateZ(0);
}

.game > .duplicates {
	overflow: scroll;
	display: flex;
	flex-direction: column;
	justify-items: center;
	max-height: 80vh;
	overflow-y: scroll;
	overflow-x: auto;
	border: solid;
	border-radius: 15px;
	border-width: 3px;
	border-color: #fff;
}

.duplicates::-webkit-scrollbar {
	display: none;
  }

.results {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.duplicates>h2 {
	margin: 0.8em 0.6em;
	text-align: left;
}

.duplicates>span {
	margin: 10px 5px;
}

.icon {
	position: absolute;
	visibility: hidden;
	z-index: 7;
	left: 0;
	right: 0;
	top: 30%;
	margin: auto;
	padding: 20px;
	border-radius: 100%;
	background-color: rgba(128, 128, 128, 0.8);
}

#icon-correct {
	color: greenyellow;
}

#icon-duplicate {
	color: yellow;
}

#icon-wrong {
	color: red;
}

#icon-unfinish {
	color: magenta;
}

.alert {
	position: absolute;
	visibility: hidden;
	z-index: 7;
	left: 0;
	right: 0;
	top: 52%;
	margin: auto;
	color: rgb(252, 235, 6);
}

.mol-check.active {
	visibility: visible;
}


/*/////////////////////
//        HUD        //
/////////////////////*/

.hud {
	width: 90vw;
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
}

.hud__score,
.pause-btn,
.timer {
	font-size: calc(5px + 2vw + 1vh);
}

.hud__score,
.timer {
	pointer-events: none;
	user-select: none;
	padding: 0.4em 0.3em;
}


.pause-btn {
	position: static;
	display: flex;
	justify-content: end;
	padding: 0.4em 0.3em;
}

.pause-btn>div {
	position: relative;
	width: 0.8em;
	height: 0.8em;
	opacity: 0.75;
}

.pause-btn>div::before,
.pause-btn>div::after {
	content: '';
	display: block;
	width: 34%;
	height: 100%;
	position: absolute;
	background-color: #fff;
}

.pause-btn>div::after {
	right: 0;
}


/*/////////////////////
//       MENUS       //
/////////////////////*/

.menus::before {
	content: '';
	pointer-events: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #000;
	opacity: 0;
	transition: opacity 0.2s;
	transition-timing-function: ease-in;
}

.menus.has-active::before {
	opacity: 0.08;
	transition-duration: 0.4s;
	transition-timing-function: ease-out;
}

.menus.interactive-mode::before {
	opacity: 0.02;
}



/* Menu containers */
#menu1{
	flex-direction: row;
	overflow-y:scroll;
	flex-wrap: wrap;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}
#menu1::-webkit-scrollbar {
	display: none;
  }
  
.menu {
	pointer-events: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	user-select: none;
	text-align: center;
	color: rgba(255, 255, 255, 0.9);
	opacity: 0;
	visibility: hidden;
	transform: translateY(30px);
	transition-property: opacity, visibility, transform;
	transition-duration: 0.2s;
	transition-timing-function: ease-in;
}

.menu.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-duration: 0.4s;
	transition-timing-function: ease-out;
}

.menus.interactive-mode .menu.active {
	opacity: 0.6;
}

.menus:not(.interactive-mode) .menu.active>* {
	pointer-events: auto;
}


/* Common menu elements */

h1 {
	font-size: 4rem;
	line-height: 0.95;
	text-align: center;
	font-weight: bold;
	margin: 0 0.65em 1em;
}

.game-name {
	animation: 1s anim-flipX ease infinite;
}

@keyframes anim-flipX {
	0% {
		opacity: 0;
		transform: rotateX(90def);
	}

	50% {
		opacity: 1;
		transform: rotateX(720deg);
	}

	100% {
		/* animate nothing to pause animation at the end */
		opacity: 1;
		transform: rotateX(720deg);
	}
}


h2 {
	font-size: 1.2rem;
	line-height: 1;
	text-align: center;
	font-weight: bold;
	margin: -1em 0.65em 1em;
}

audio {
	display: none;
}

sub {
	font-size: 2rem;
}

.level-descrptn {
	font-size: 2rem;
}

.final-score-lbl,
.level-score-lbl {
	font-size: 5rem;
	margin: -0.2em 0 0;
	animation: 2s anim-popoutin ease infinite;
}

@keyframes anim-popoutin {
	0% {
		color: white;
		transform: scale(0);
		opacity: 0;
		text-shadow: 0 0 0 rgba(0, 0, 0, 0);
	}

	25% {
		color: white;
		transform: scale(2);
		opacity: 1;
		text-shadow: 3px 10px 5px rgba(0, 0, 0, 0.5);
	}

	50% {
		color: white;
		transform: scale(1);
		opacity: 1;
		text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
	}

	100% {
		/* animate nothing to add pause at the end of animation */
		transform: scale(1);
		opacity: 1;
		text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
	}
}

.high-score-lbl--main {
	font-size: 5rem;
	margin: -0.2em 0 0;
}

.high-score-lbl {
	font-size: 1.2rem;
	margin: 0 0 2.5em;
}

.button {
	display: block;
	position: relative;
	max-width: 500px;
	padding: 12px 20px;
	background: transparent;
	border: none;
	outline: none;
	user-select: none;
	font-family: monospace;
	font-weight: bold;
	font-size: 1.4rem;
	color: #fff;
	opacity: 0.75;
	transition: opacity 0.3s;
}

.button::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(255, 255, 255, 0.15);
	transform: scale(0, 0);
	opacity: 0;
	transition: opacity 0.3s, transform 0.3s;
}

.game-btn {
	font-size: 1rem;
	color: #000;
}

/* No `:focus` styles because this is a mouse/touch game! */
.button:active {
	opacity: 1;
}

.button:active::before {
	transform: scale(1, 1);
	opacity: 1;
}

.credits {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 20px;
}

a {
	color: white;
}

/* Tutorial page */
menu--tutorial-pause,
menu--tutorial-main {
	position: static;
}

.tutorial {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	width: 100vw;
	margin-bottom: 3%;
}

.tutorial-description {
	background-color: rgba(255, 255, 255, 0.90);
	color: #000;
	padding: 1em 2em;
	text-align: justify;
	font-size: 1rem;
	max-width: 50vw;
	line-height: 1.5;
	border-radius: 15px;
}

.game-interface {
	aspect-ratio: 1249/887;
	max-width: 40vw;
	height: auto;
	border: solid;
	border-color: #fff;
	border-radius: 15px;
	background-color: rgba(255, 255, 255, 0.8);
	overflow: hidden;
}

/* Only enable hover state on large screens */
@media (min-width: 1025px) {
	.button:hover {
		opacity: 1;
	}

	.button:hover::before {
		transform: scale(1, 1);
		opacity: 1;
	}
}

@media screen and (max-width: 1140px) and (orientation: portrait){
	.game--space {
		width: 90vw;
	}
	.tutorial-description {
		max-width: 80vw;
	}
	.game-interface {
		margin: 50px 0 0 0;
		max-width: 80vw;
		min-height: 50%;

	}
}


@media screen and (max-width: 500px){
	.game-interface {
		min-height: 55vh;
	}
}

/* @media () */