style.css

body {
	user-select: none;
	-moz-user-select: none;

	font-family: 'Aleo', serif;
}

#container {
	display: flex;
}

#container > div {
	/* child divs of container */
	margin: 10px;
}

#settingWrapper {
	border: 1px solid black;
	padding: 10px;
}

#settingWrapper > * {
	/* everything inside settings */
	margin: 5px;
}


#loadArtLocalWrapper {
	padding-right: 70px;
}

/* canvases */

canvas {
	border: 1px solid black;
}

#transparency {
	position: absolute; /* positioned beneath editor canvas */
	top: 18px;
	left: 18px;
	z-index: -2; /* appears below editor canvas and template canvas */
}

#overlay {
	position: absolute; /* positioned on top of editor canvas */
	top: 18px;
	left: 18px;
}

#template {
	position: absolute; /* positioned on top of editor canvas */
	top: 18px;
	left: 18px;
	z-index: -1; /* appears below editor canvas */
}


/* wrappers in centre of screen */
.saveWrapper {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	border: 1px solid black;
	background-color: white;
	padding: 5px;
}


/* art delete button */
.artDeleteButton {
	color: red;

	padding-right: 5px;

	position: absolute;
	right: 0px;
}

/* close buttons */
.closeButton {
    position: absolute;
	border: 1px solid black;
	background-color: red;
	padding: 2px;

    top: -15px;
    right: -15px;
}

/* new stuff :) */
.new {
    color: red;
	font-weight: 900;
}