:root {
	--floral-white: #FBFBF2;
	--coral: #ff8552ff;
	--green: #0CCE6B;
	--raisin-black: #181d27ff;
	--red: #F97068;
	user-select: none;
	cursor: default;
	--text-white: #FBFBF2;
}

html {
	margin: 0;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	font-family: 'Roboto Mono', monospace;
}

body {
	margin: 0;
	height: 100vh;
	width: 100vw;
	background-color: var(--raisin-black);
	display: grid;
	grid-template-rows: repeat(20, 5vh);
	grid-template-columns: repeat(20, 5vw);
	background-repeat: no-repeat;
  	background-size: 100% 100%;
}

#timer {
	font-family: 'Roboto Mono', monospace;
	color: var(--floral-white);
	grid-area: 7 / 4 / 12 / 18;
	text-align: center;
	overflow: hidden;
	min-width: 100%;
	font-size: 11vw;
	transition: 0.2s;
}

#ao5 {
	font-family: 'Roboto Mono', monospace;
	color: var(--floral-white);
	grid-area: 13 / 8 / 18 / 14;
	text-align: center;
	overflow: hidden;
	min-width: 100%;
	font-size: 2.5vw;
	transition: 0.2s;
}

#scramble {
	color: var(--floral-white);
	transition: 0.2s;
	grid-area: 20 / 3 / 20 / 19;
	line-height: 5vh;
	text-align: center;
	font-size: 1.5vw;
	word-spacing: 10px;
	cursor: pointer;
}

#menu {
	position: absolute;
	height: 0;
	width: 100%;
	background-color: #393E41;
	opacity: 0.96;
	transition: 0.4s;
	z-index: 1;
}

#menuOpen {
	grid-area: 1 / 20 / 1 / 20;
	height: 100%;
	margin: auto;
	transition: 0.4s;
	opacity: 0.2;
	z-index: 2;
}

#menuOpen:hover {
	transform: scale(1.2);
	opacity: 1;
}

#options {
	font-family: 'Roboto Mono', monospace;
	position: absolute;
	opacity: 0;
	color: var(--text-white);
	font-size: 2.5vw;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

}

#options input, select {
	padding: 30px;
	font-size: 30px;
	margin: 10px;
	background-color: #181d27ff;
	border: none;
	font-family: 'Roboto Mono', monospace;
	color: var(--text-white);
}

#ao5Toggle, #scrambleToggle, #lightMode {
	height: 30px;
	margin: 10px;
	transform: scale(3);
	border: none;
}