demo.css

.hidden {
	display: none !important;
}

span.mobile, span.desktop { display: none; }

/* Main page setup */
body {
	font-family: "Roboto", "Droid Sans", "San Francisco", "Helvetica Neue", sans-serif;
	margin: 0;
	user-select: none;
	background: #fbfdfe;
	transition:	background-color 0.5s;
	height: 100vh;
	box-sizing: border-box;
	justify-items: stretch;
	display: flex;
}

.mid_drag {
	border-color: red;
	background: #fff4f4;
}

#get_image { display: none; }

#canvases {
	margin: 8px;
	flex-grow: 1;
	flex-shrink: 1;
	
	display: flex;
}

footer {
	background: #f1f9fe;
	border-color: #5f889b;
	border-style: solid;
	border-width: 4px 0 0 0;
	border-radius: 10px;
	padding: 6px 8px 8px 8px;
	flex-shrink: 0;
}

/* The three image displays */
#canvases > * {
	border: 1px solid #ccc;
	padding: 4px;
	background: #f6f6f6;
	transition: color, background-color, border-color, ease-in-out 0.1s;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

canvas {
	flex-shrink: 1;
	min-height: 0;
	width: 100%;
	object-fit: contain;
}

.no-canvas-scaling canvas {
	image-rendering: pixelated;
}

/* #Alice can be clicked to upload a file */
#Alice:hover, .mid_drag #Alice {
	cursor: pointer;
	color: red;
	border-color: red;
	background: #fff0f0;
}

/* The last two displays' canvases change on hover. Change the background to highlight this */
canvas.diff { display: none; }

#canvases section:hover canvas:not(.diff) {
	display: none;
}

#canvases section:hover canvas.diff {
	display: block;
}

#Bob:hover, #Bob_decoded:hover {
	border-color: #888;
	background: #e8e8e8;
}

/* Accuracy displays for the last two canvases */
main section {
	position: relative;
}

main section aside {
	display: none;
	position: absolute;
	padding: 4px;
	top: 0;
	right: 0;
	border-radius: 0 0 0 1.25ex;
	color: white;
}

body.image_provided main section aside {
	display: block;
}

main aside label {
	display: none;
	vertical-align: middle;
}

main section:hover aside label {
	display: inline;
}

main aside output {
	font-size: 130%;
	font-weight: bold;
	vertical-align: middle;
}

/* The footer contains settings and statistics */
footer fieldset {
	padding: 0 9px; /* 4px is the smallest unit of padding, 1px+4px from border+padding of #canvases > * */
	border: 0;
	margin: 0;
	line-height: 1.4;
}

footer h3 {
	margin: 1em 0 0.8ex 0;
}

footer h3:first-child {
	margin: 0.8ex 0;
}

#error_probability {
	width: 100%;
}

/* Histogram */
#uncoded_bit_error_distribution {
	position: relative;
	display: flex;
	height: 100px;
	align-items: flex-end;
}

#uncoded_bit_error_distribution div {
	background: #9de;
	height: 0px;
	flex-grow: 1;
	justify-content: space-between;
	margin: 0 0.4%;
}

#uncoded_bit_error_distribution .mode {
	background: #08c;
}

#uncoded_bit_error_distribution header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	text-align: center;
}

/* Infobox containing extra help info */
#info {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 8px;
	max-height: 50%;
	background: #fafafa;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 2px 15px black;
	min-height: 8ex;
	
	display: flex;
}

.emoji {
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
}

#info main, #info #about {
	flex-grow: 1;
	overflow-y: auto;
	padding: 4px 8px;
	max-height: calc(50% - 24px);
}

#info p:first-child { margin-top: 0; }
#info p:last-child { margin-bottom: 0; }

/* Special case: about the application */

#info #about {
	display: none;
}

#info.show_about #about {
	display: block;
}

#info.show_about main {
	display: none;
}

.info_icon {
	font-size: 3.5ex;
	float: left;
	margin-right: 8px;
	margin-bottom: 8px;
}

#info p:first-of-type {
	margin-top: 0;
}

#close {
	font-size: 3.5ex;
	background: none;
	padding: 0;
	border: 1px solid transparent;
	align-self: flex-start;
}

#close:hover {
	background: #fee;
	border-color: red;
}

/* Tooltip sources */

[id][title], [for][title] {
	cursor: help;
	text-decoration: underline;
	text-decoration-skip: ink;
}

[id][title]:hover, [for][title]:hover {
	text-shadow: 0 0 1.5ex currentColor;
}