* {
	box-sizing: border-box;
}
#box-display-container {
	margin: 1em auto;
	width: 10em;
	font-size: 24px;
}
#box {
	border: 1px dotted black;
	margin: 1em auto;
	width: 10em;
	text-align: center;
	padding: 2em;
}
.stylesheet-control-box {
	max-width: 23em;
	width: 100%;
	display: inline-block;
	margin: 1em;
	vertical-align: text-top;
	border: 1px solid black;
	padding: 1em;
	word-break: break-word;
	box-shadow: 2px 2px 5px #777;
}
@media all and (max-width: 420px) {
	.stylesheet-control-box {
		margin: 1em 0;
		max-width: none;
	}
}
.color-swatch {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: text-bottom;
}
.button-container {
	display: inline-block;
	width: 49%;
}
.button {
	height: 2em;
	width: 10em;
	font-size: 14px;
	margin: .1em;
}

@media all and (max-width: 360px) {
	.button {
		 width: 10em;
		font-size: 12px;
	}
}

.sheet-display {
	padding: 1em;
}
.sheet-display.dark {
  background-color: black;
  color: #1BB416;
  border-radius: 5px;
}