:root {
	background-color: black;
	font-family: sans-serif;
	color: grey;
	font-size: 20px;
	
	--accent-color: hsl(330 100 50);

	--canvas-rotation: 0deg;
	--canvas-scale-x: 1;
	--canvas-scale-y: 1;
	--canvas-translate-x: 0px;
	--canvas-translate-y: 0px;
	
	--canvas-left: 0px;
	--canvas-top: 0px;
	--canvas-right: 0px;
	--canvas-bottom: 0px;
}

html {
	overflow: hidden;
	position: absolute;
	inset: 0;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

#canvas {
	transform: translate(
				var(--canvas-translate-x),
				var(--canvas-translate-y)
			);
	
	& #strokeArea, .layer, #backgroundLayer {
		touch-action: none;
		position: absolute;
		inset: 
			var(--canvas-top) 
			var(--canvas-right) 
			var(--canvas-bottom) 
			var(--canvas-left) 
			;
		
		transform-origin: center;
		transform: 
			rotate(var(--canvas-rotation)) 
			scale(
				var(--canvas-scale-x),
			   var(--canvas-scale-y)
			) ;
		}
		& #backgroundLayer {background-color: hsl(0 0 50); z-index: 2000;}
		& #strokeArea {z-index: 6000;}
}

#ui {
	position: absolute;
	z-index: 8000;
	background-color: hsl(0 0 30);
	color: hsl(0 0 80);
	left: 0px;
	top: 0px;
	bottom: 0px;
	width: 300px;
	padding: 1em;
	cursor: default;
	
	button {
    appearance: none;
    background-color: inherit;
    border: none;
    font-size: inherit;
    color: inherit;
		cursor: pointer;
		padding: 0.3em;
		background-color: hsl(0 0 35);
		
		&:hover {background-color: hsl(0 0 45);}
  }
	
	input[type="checkbox"] {
		scale: 1.3;
	}
	
	& > div {
		display: flex;
		flex-direction: column;
		gap: 0.5em;
		
		& > div {
			display: flex;
		  flex-direction: column;
			
			&:has(input[type="checkbox"]) {
				display: grid;
				grid-template-columns: 1fr 10fr;
				gap: 1em;
				align-items: center;
				justify-items: start;
	
			}
		}
		
		& input {
			accent-color: var(--accent-color);
			cursor: pointer;
		}
	}
}