#pageHeader {
	max-width: 420px;
	margin: 0 auto 1em auto;
	text-align: center;
	position: relative;
}


#canvas-container {
	text-align: center;
}



#controlsWidget {
	position: absolute;
	right: 2rem;
	top: 4rem;

	width: 300px;
	height: auto;
	padding: 3rem 1rem 1rem 1rem;

	border: 2px solid var(--lab-purple-alpha-point10);
	border-radius: 4px;
	background-color: var(--lab-off-white);
}


#widgetHeader {
	width: calc(300px - 3px);
	margin: -3rem -1rem 1rem -1rem;
	padding: 2px;

	border-bottom: 2px solid var(--lab-purple-alpha-point10);
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}


.polka-dot-texture {
	height: 2rem;
	
	background-color: #f5f2ea;
	background-image: radial-gradient(rgba(203, 157, 245, 0.315) 1px, transparent 0);
	background-size: 5px 5px; /* Determines the grid spacing */
	border-style: solid;
	border-width: 1px;
	border-color: var(--lab-off-white);

	cursor: grab;
}