#blobbo_target{
	display:grid;
	grid-template-columns:max-content auto;
	grid-gap:16px;
	
}
#blob_name{
	max-height:1.2rem;
	max-width:200px;
}
#blob_style,#submit_button{
	max-height:1.5rem;
	width:fit-content;
}
#submit_button{
	justify-self:center;
}
.optionsPanel{
	display:grid;
	grid-template-columns:max-content max-content;
	grid-template-rows:min-content;
	grid-gap:8px;
}

#blobbo_name{
	font-family:"Retron2000";
	text-align:center;
	padding:4px 0;
}
:root {
	--pixel-bg: #fae0ed; /* Inner background color */
	--pixel-border: black; /* Inner border color: */
	--pixel-border-2: white; /* Middle border color: */
	--pixel-border-3: var(--pixel-border); /* Outer border color */
	--pixel: .12rem; /* Pixel size */
}
#controlsWrapper{
	display:grid;
	grid-template-columns:repeat(2,auto);
	width:200px;
	justify-content:center;
	padding:0 12px;
}
#canvasWrapper{
	position:relative;
}
#blobbo_target.loaded{
	max-width:300px;
	width:300px;
	justify-self:center;
}
.uiButton:hover{
	filter:brightness(1) contrast(1.15);
}
.uiButton:active{
	filter:brightness(1) contrast(1.065);
}
.uiButton{
	margin:0 8px;
	width:fit-content;
	height:fit-content;
	background: var(--pixel-bg);
	width:3rem;
	display:flex;justify-content:center;
	box-shadow:
		
	/* Inner Background Color */
		0 calc(var(--pixel) * -3) 0 calc(var(--pixel) * -1) var(--pixel-bg),
		0 calc(var(--pixel) * 3) 0 calc(var(--pixel) * -1) var(--pixel-bg),
		0 calc(var(--pixel) * -6) 0 calc(var(--pixel) * -2) var(--pixel-bg),
		0 calc(var(--pixel) * 6) 0 calc(var(--pixel) * -2) var(--pixel-bg),
		0 calc(var(--pixel) * -9) 0 calc(var(--pixel) * -4) var(--pixel-bg),
		0 calc(var(--pixel) * 9) 0 calc(var(--pixel) * -4) var(--pixel-bg),
		0 calc(var(--pixel) * -12) 0 calc(var(--pixel) * -6) var(--pixel-bg),
		0 calc(var(--pixel) * 12) 0 calc(var(--pixel) * -6) var(--pixel-bg),
		
	/* Pixel Border Layer 1 */
		calc(var(--pixel) * -1) 0 0 0 var(--pixel-border),
		var(--pixel) 0 0 0 var(--pixel-border),
		0 calc(var(--pixel) * -2) 0 0 var(--pixel-border),
		0 calc(var(--pixel) * 2) 0 0 var(--pixel-border),
		0 calc(var(--pixel) * -5) 0 calc(var(--pixel) * -1) var(--pixel-border),
		0 calc(var(--pixel) * 5) 0 calc(var(--pixel) * -1) var(--pixel-border),
		0 calc(var(--pixel) * -7) 0 calc(var(--pixel) * -2) var(--pixel-border),
		0 calc(var(--pixel) * 7) 0 calc(var(--pixel) * -2) var(--pixel-border),
		0 calc(var(--pixel) * -10) 0 calc(var(--pixel) * -4) var(--pixel-border),
		0 calc(var(--pixel) * 10) 0 calc(var(--pixel) * -4) var(--pixel-border),
		0 calc(var(--pixel) * -13) 0 calc(var(--pixel) * -6) var(--pixel-border),
		0 calc(var(--pixel) * 13) 0 calc(var(--pixel) * -6) var(--pixel-border),
		
	/* Pixel Border Layer 2 */
		calc(var(--pixel) * -2) 0 0 0 var(--pixel-border-2),
		calc(var(--pixel) * 2) 0 0 0 var(--pixel-border-2),
		0 calc(var(--pixel) * -1) 0 var(--pixel) var(--pixel-border-2), 
		0 var(--pixel) 0 var(--pixel) var(--pixel-border-2),
		0 calc(var(--pixel) * -4) 0 0 var(--pixel-border-2),
		0 calc(var(--pixel) * 4) 0 0 var(--pixel-border-2),
		0 calc(var(--pixel) * -6) 0 calc(var(--pixel) * -1) var(--pixel-border-2),
		0 calc(var(--pixel) * 6) 0 calc(var(--pixel) * -1) var(--pixel-border-2),
		0 calc(var(--pixel) * -8) 0 calc(var(--pixel) * -2) var(--pixel-border-2),
		0 calc(var(--pixel) * 8) 0 calc(var(--pixel) * -2) var(--pixel-border-2),
		0 calc(var(--pixel) * -11) 0 calc(var(--pixel) * -4) var(--pixel-border-2),
		0 calc(var(--pixel) * 11) 0 calc(var(--pixel) * -4) var(--pixel-border-2),
		0 calc(var(--pixel) * -14) 0 calc(var(--pixel) * -6) var(--pixel-border-2),
		0 calc(var(--pixel) * 14) 0 calc(var(--pixel) * -6) var(--pixel-border-2),
		
	/* Border Layer 3: --pixel-border-3 */
		calc(var(--pixel) * -3) 0 0 0 var(--pixel-border-3),
		calc(var(--pixel) * 3) 0 0 0 var(--pixel-border-3),
		0 0 0 calc(var(--pixel) * 2) var(--pixel-border-3),
		0 calc(var(--pixel) * -3) 0 var(--pixel) var(--pixel-border-3),
		0 calc(var(--pixel) * 3) 0 var(--pixel) var(--pixel-border-3),
		0 calc(var(--pixel) * -5) 0 0 var(--pixel-border-3),
		0 calc(var(--pixel) * 5) 0 0 var(--pixel-border-3),
		0 calc(var(--pixel) * -7) 0 calc(var(--pixel) * -1) var(--pixel-border-3),
		0 calc(var(--pixel) * 7) 0 calc(var(--pixel) * -1) var(--pixel-border-3),
		0 calc(var(--pixel) * -9) 0 calc(var(--pixel) * -2) var(--pixel-border-3), 
		0 calc(var(--pixel) * 9) 0 calc(var(--pixel) * -2) var(--pixel-border-3),
		0 calc(var(--pixel) * -12) 0 calc(var(--pixel) * -4) var(--pixel-border-3), 
		0 calc(var(--pixel) * 12) 0 calc(var(--pixel) * -4) var(--pixel-border-3),
		0 calc(var(--pixel) * -15) 0 calc(var(--pixel) * -6) var(--pixel-border-3), 
		0 calc(var(--pixel) * 15) 0 calc(var(--pixel) * -6) var(--pixel-border-3);
}
#playButton{
	--pixel-bg: #f0f0f0;
}
#statsButton{
	--pixel-bg: #d0eaff;
}
.uiButton > .uiButtonImage{
	min-width:32px;
	min-height:32px;
}.uiButton > .uiButtonImage.thirty{
	margin:1px 0;
	min-width:30px;
	min-height:30px;
}
#cursor_object{
	display:block;
	width:32px;
	height:32px;
	position:fixed;
	left:0;
	top:0;
	z-index:10001;
	pointer-events:none;
}
#stats_panel{
	box-sizing:border-box;
	width:200px;
	height:140px;
	position:absolute;
	left:0;
	top:0;
	background-color:white;
	font-size:8pt;
	grid-gap: 0px 8px;
	padding:12px;
	display:grid;grid-template-columns:max-content auto;
	grid-template-rows:16px;
	
}
#stats_panel>.percentBar{
	width:100%;
	height:12px
}
#stats_panel>label{
	height:16px
}
@media(max-aspect-ratio:0/2){
	label,span,select,option,input,button{
		font-size:9pt;
	}
	.optionsPanel{
		grid-template-columns:max-content auto;
	}
	#blob_name{
		max-height:1rem;
		width:100%;
		min-width:60px;
	}
	#blob_style,#submit_button{
		max-height:1.25rem;
		width:fit-content;
	}
}
@media(max-aspect-ratio:2/3){
	#blobbo_target:not(.loaded){
		display:flex;
		flex-direction:column;
		align-items:center;
		
	}
	#blob_style{width:auto;}
	
	.optionsPanel{
		justify-content:center;
		align-items:center;
	}
}
#blobbo_target.loaded{
	display:flex;
	flex-direction:column;
	align-items:center;
	
}