:root {
	--dark: #251729;
	--mediumdark: #6D6374;
	--medium: #B5AEBE;
	--mediumlight: #CFCCD6;
	--light: #DCDBE2;
}
html, body {
	font-family: Georgia;
	font-size: 13px;
	background-color: var(--mediumlight);
	color: var(--dark);
	width: 100%;
	height: 100%;
}
canvas {
  border: solid 1px var(--dark);
}
.mini {
  height: 50px;
  width: 50px;
}
#layers {
  border-collapse: collapse;
}
table, th, tr, td {
  border: 1px solid var(--dark);
  background-color: var(--light);
}
td {
	text-align: center;
}
#screen {
  display:grid;
  grid-template-columns: 510px 1fr 300px;
}
.thumb {
  height: 50px;
  width: 190px;
  object-fit: contain;
}
input[type="range"]::-moz-range-progress {
  background-color: var(--dark); 
}
input[type="range"]::-moz-range-track {  
  background-color: var(--mediumlight);
}

.indicate {
	width: 150px;
	position: absolute;
	font-size: 20px;
}
#workspace {
	display:grid;
	height:100%;
	width:100%;
	overflow:clip;
	position:absolute;
	top:0px;
	left:0px;
	grid-template-columns: 1fr 3fr 1fr;
	visibility:hidden;
}
#mid {
	background-color: var(--medium);
	border: 3px solid var(--mediumdark);
	height:100%;
	width:100%;
}
.sel {
	border-width:3px;
}

/*

todo:
- make gif-able
- carosel/rotate/flap layers

full version
- untie box format
- resize canvas
- timeline with keyframes

more ideas
- 360 picture editor (difficult)

*/