body, input, textarea, select, button {
	font: normal 100% sans-serif;
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
}

#app {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-areas:
		"header header header"
		"sidebar image1 image2";
	grid-template-rows: auto 1fr;
	grid-template-columns: auto 320px 1fr;
}

#site-header {
	background-color: #111;
	color: #fff;
	grid-area: header;
	padding: 20px;
	font-weight: bold;
}

#sidebar {
	background-color: #111;
	color: #fff;
	grid-area: sidebar;
	padding: 20px;
}

.button {
	display: inline-block;
	padding: 0.25em 0.5em;
	background-color: #0bf;
	color: #fff;
	font-weight: normal;
	font-style: normal;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	text-decoration: none;
}

.button:hover {
	background-color: #333;
}

.ctrl:not(.ctrl-load) label {
	display: block;
	margin-bottom: 5px;
}

.ctrl:not(.ctrl-load) input {
	width: 5em;
}

.ctrl + .ctrl {
	margin-top: 10px;
}

.ctrl.ctrl-optimize {
	margin-top: 20px;
}

.ctrl-load {
	margin-bottom: 20px;
}

#ctrl-load {
	display: none;
}

#sidebar .button {
	display: block;
	text-align: center;
}

#image-original {
	grid-area: image1;
}

#image-optimized {
	grid-area: image2;
}

#image-optimized .button {
	margin-top: 20px;
}

section .container {
	position: relative;
	cursor: pointer;
}

section img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}

section .size {
	position: absolute;
	right: 0;
	bottom: 0;
	color: #fff;
	background-color: #0008;
	padding: 5px 10px;
}

section.loading .container::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	background-color: #ccc8;	
}