body{
	color: orange;
	font-family: Arial, Helvetica, sans-serif;
	touch-action: manipulation;
}
#SOLVE:hover{
	background-color: #0c0;
	box-shadow: 2.5px 7px 10px;
}
#SOLVE:active{
	background-color: #0a0;
	transform: translateY(3px);
	box-shadow: 3px 4px 10px;
}
h{
	font-size: 50px;
}
video{
	image-rendering: pixelated;
	width: 500px;
	height: 500px;
}
#speed{
	-webkit-appearance: none;
	background: transparent;
	width: 100%;
	height: 5vh;
	grid-column: 1/-1;
	display: block;
}
#speed::-webkit-slider-runnable-track{
	border: 1px solid black;
	background-color: lightblue;
	height: 3vh;
	border-radius: 3vh;
}
#speed::-webkit-slider-thumb{
	-webkit-appearance: none;
	background-color: orange;
	height: 100%;
	width: auto;
	aspect-ratio: 3/1;
	border-radius: 16.67% / 50%;
}
table{
	border-spacing: 0px;
	table-layout: fixed;
}
.o{
	background-color: orange;
}
.g{
	background-color: green;
}
.w{
	background-color: white;
}
.b{
	background-color: blue;
}
.y{
	background-color: yellow;
}
.r{
	background-color: red;
}
.o, .g, .w, .b, .y, .r, #controls div, #speed::-webkit-slider-thumb{
	transition-duration: 200ms;
	transition-property: filter;
}
.o:hover, .g:hover, .w:hover, .b:hover, .y:hover, .r:hover, #controls div:hover, #speed::-webkit-slider-thumb:hover{
	filter: brightness(80%);
}
.undefined{
	background-color: gray;
}
td{
	border-radius: 10%;
}
#input-text{
	font-family: monospace;
	font-size: 2.5vh;
	grid-area: input;
}
#controls div{
	background-color: orange;
	color: black;
	border-radius: 2vh;
	width: min(20vh, 100%);
}
#controls div img{
	height: 100%;
	width: 100%;
}
#controls{
	height: 25vh;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto auto;
	column-gap: 2%;
	background-color: #444;
	border-radius: 3vh;
	justify-content: space-between;
	justify-items: center;
	grid-area: ctrl;
}
#orange, #green, #white, #blue, #yellow, #red{
	background-image: black;
	border-radius: calc(10% / 3);
}
#cbcontainer{
	display: flex;
	position: relative;
	grid-area: cbco;
	height: 100%;
	width: 100%;
	overflow: hidden;
	justify-content: center;
	align-items: center;
}
#yay{
	width: 100%;
	display: block;
	grid-area: yay;
	font-size: min(5vh, 7vw);
	text-decoration: underline;
	text-align: center;
	user-select: none;
	-webkit-user-select: none;
}
#progress{
	background-color: #b00;
	z-index: 1;
	height: 5vh;
	grid-area: prog;
	border-radius: 2.5vh;
	position: relative;
	width: 100%;
}
#progressval{
	font-size: 4vh;
	margin-left: 50%;
	position: absolute;
	transform: translate(-50%, 0);
}
#bar{
	background-image: repeating-linear-gradient(-45deg, green, green, darkgreen, green max(1vw, 1vh));
	width: 0%;
	z-index: 2;
	height: 100%;
	border-radius: 2.5vh;
	float: left;
}
#tada{
	height: 100%;
	width: 100%;
	line-height: 104%;
	overflow: hidden;
	white-space: nowrap;
	font-family: monospace;
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	-webkit-user-select: none;
}
#cb{
	max-height: 100%;
	max-width: 100%;
	height: 100%;
	aspect-ratio: 1/1;
	background-image: radial-gradient(black, black, rgba(255, 255, 255, 0.3), transparent, transparent);
}
@media (min-aspect-ratio: 15/10){
	#partb{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: min-content 1fr min-content min-content;
		grid-template-areas: "yay yay" "cbco tada" "cbco ctrl" "prog prog";
		column-gap: 5px;
		row-gap: 5px;
		height: 100vh;
		width: 100vw;
		justify-items: center;
	}
}
@media (min-aspect-ratio: 4/5) and (max-aspect-ratio: 15/10) and (not (aspect-ratio: 4/5)) and (not (aspect-ratio: 15/10)){
	#partb{
		display: grid;
		grid-template-columns: auto auto;
		grid-template-rows: min-content 1fr min-content min-content;
		grid-template-areas: "yay yay" "cbco tada" "ctrl ctrl" "prog prog";
		gap: 5px;
		height: 100vh;
		width: 100vw;
		justify-items: center;
	}
}
@media (max-aspect-ratio: 4/5){
	#partb{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: min-content min-content 1fr min-content min-content;
		grid-template-areas: "yay" "cbco" "tada" "ctrl" "prog";
		gap: 5px;
		height: 100vh;
		width: 100vw;
		justify-items: center;
	}
	#cb{
		height: min(100vw, 45vh);
	}
}
#grid{
	height: 100%;
	grid-area: grid;
	background-image: radial-gradient(75% 50% at 37.5% 50%, black, transparent);
}
#stats{
	font-family: monospace;
	height: 100%;
	overflow: auto;
	line-height: 100%;
	text-align: left;
	grid-area: stats;
	user-select: none;
	-webkit-user-select: none;
}
#top{
	font-size: 1.5vw;
	height: min(8vh, 7.5vw);
	grid-area: title;
}
#SOLVE{
	border-radius: 40px;
	background-color: lime;
	font-size: min(6vh, 10vw);
	transition-duration: 0.25s;
	grid-area: solve;
}
@media (min-aspect-ratio: 19/10){
	#parta{
		display: grid;
		gap: 5px;
		grid-template-columns: min-content 1fr 1fr;
		grid-template-rows: 8vh 4vh auto 7.5vh;
		grid-template-areas: "title title title" "input input input" "grid stats palette" "solve solve solve";
		height: 100vh;
	}
	#palette{
		display: table;
		width: 100%;
		height: auto;
		grid-area: palette;
	}
	#palette2{
		display: none;
	}
}
@media (min-aspect-ratio: 15/10) and (max-aspect-ratio: 19/10){
	#parta{
		display: grid;
		gap: 5px;
		grid-template-columns: auto auto;
		grid-template-rows: 8vh 4vh min-content auto 7.5vh;
		grid-template-areas: "title title" "input input" "grid stats" "grid palette" "solve solve";
		height: 100vh;
	}
	#palette2{
		display: table;
		width: 100%;
		height: auto;
		grid-area: palette;
	}
	#palette{
		display: none;
	}
}
@media (min-aspect-ratio: 9/10) and (max-aspect-ratio: 15/10){
	#parta{
		display: grid;
		gap: 5px;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 8vh 4vh min-content auto 7.5vh;
		grid-template-areas: "title title" "input input" "grid stats" "palette palette" "solve solve";
		height: 100vh;
	}
	#palette2{
		display: table;
		width: 100%;
		height: auto;
		grid-area: palette;
	}
	#palette{
		display: none;
	}
}
@media (min-aspect-ratio: 3/5) and (max-aspect-ratio: 9/10){
	#parta{
		display: grid;
		gap: 5px;
		grid-template-columns: auto auto;
		grid-template-rows: 8vh 4vh min-content auto 7.5vh;
		grid-template-areas: "title title" "input input" "grid grid" "stats palette" "solve solve";
		height: 100vh;
	}
	#palette2{
		display: none;
	}
	#palette{
		display: table;
		width: 100%;
		height: auto;
		grid-area: palette;
	}
}
@media (max-aspect-ratio: 3/5){
	@media (min-aspect-ratio: 4/10){
		#parta{
			display: grid;
			gap: 5px;
			grid-template-columns: auto;
			grid-template-rows: 8vh 4vh min-content 3fr 2fr 7.5vh;
			grid-template-areas: "title" "input" "grid" "stats" "palette" "solve";
			height: 100vh;
		}
	}
	@media (max-aspect-ratio: 4/10){
		#parta{
			display: grid;
			gap: 5px;
			grid-template-columns: auto;
			grid-template-rows: 8vh 4vh min-content min-content auto 7.5vh;
			grid-template-areas: "title" "input" "grid" "stats" "palette" "solve";
			height: 100vh;
		}
	}
	#palette2{
		display: table;
		width: 100%;
		height: auto;
		min-height: 10vh;
		grid-area: palette;
	}
	#palette{
		display: none;
	}
}