body { font-family: Arial, sans-serif; margin: 20px; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
textarea { width: 100%; height: 100px; margin-bottom: 20px; }
main { margin: 150px 0 100px 0; }
canvas { width: 100%; margin-bottom: 50px; border: 1px solid #ccc; }
hr { margin: 30px 0; }

#generate-qr, #download-link { min-width: 200px; position: fixed; color: #fff; }
#generate-qr { bottom: 70px; right: 20px; }
#download-link { bottom: 20px; right: 20px; }

em { display: inline-block; color: #bbb; font-size: 0.8rem; line-height: 1rem; }

h2 + .tileset { margin-top: 15px; }
.tileset { margin: 45px 0 0 0; padding: 15px; border: 3px solid transparent; }
.tileset.choosed { background-image: repeating-linear-gradient(120deg, #fff 0px, #fff 12px, #e1f5e1 13px, #e1f5e1 24px); border: 3px solid #0b0; border-radius: 4px; }
.tileset input { width: 20px; height: 20px; }
.tile-option, .line-option {
	display: inline-block;
	padding: 5px;
	text-align: center;
	background-color: #e1f5e1;
	cursor: pointer;
	border: 1px solid #ccc;
}
.tile-option input[type="number"],
.line-option input[type="number"] {
	width: 50px;
	display: block;
	margin: 5px auto;
}
.tile-option:not(.used-in-code),
.line-option:not(.used-in-code) {
	background-color: #f5dede;
}
.tile-option img { width: 20px; height: 20px; display: block; margin: auto; }
a.download-link { display: inline-block; margin-top: 20px; }