* {
	margin: 0;
	padding: 0;
}

body, #container {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: grid;
	justify-items: stretch;
	align-items: stretch;
}

svg#canvas {
	background-color: black;
	touch-action: none;
}

#toolbox {
	display: grid;
	grid-gap: 1rem;
	position: absolute;
	padding: 1rem;
	padding-bottom: 1.6rem;
	left: 0;
	top: 0;
	background-color: #00000066;
	justify-items: center;
	border-radius: 1rem;
	user-select: none;
	touch-action: none;
}

#toolbox img, #toolbox svg {
	overflow: visible;
	user-drag: none;
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

#toolbox #logo {
	width: 4rem;
	margin-bottom: 0.2rem;
	margin-top: 0.1rem;
	cursor: grab;
}

#toolbox .button, #toolbox label {
	height: 2rem;
	cursor: pointer;
	transition: transform 0.08s;
	padding: 0.4rem 1rem;
	margin: -0.4rem -1rem;
}
#toolbox .button:hover {
	transform: scale(1.1);
}
#toolbox .button:active, #toolbox img.button.active {
	filter: saturate(1000%);
	transform: scale(0.95);
}

#toolbox #redo {
	margin-top: -0.48rem;
}
#toolbox #colour-picker-input {
	display: none;
}
#toolbox #pen {
	height: 2.4rem;
}

#toolbox #erase {
	height: 2.2rem;
}

#toolbox input[type="file"] {
	display: none;
}

#toolbox #grip {
	margin-top: 0.2rem;
	width: 1.4rem;
	cursor: grab;
	filter: opacity(50%);
	padding: 0.4rem 1rem;
	margin: -0.4rem -1rem;
}