body {
	font-family: sans-serif;
}

h1.title {
	font-size: 2em;
	text-align: center;
	margin: 30px 0 50px 0;
	text-decoration: underline;
}

#wait {
	color: #f6ab20;
	font-size: 1.5em;
	text-align: center;
	border: 2px dotted #f6ab20;
	width: max-content;
	margin: 0 auto 20px;
	padding: 13px 35px;
	max-width: 100%;
	box-sizing: border-box;
}
body.waiting * {
	cursor: wait !important;
}
body:not(.waiting) #wait {
	display: none;
}

.selector {
	font-weight: bold;
	color: steelblue;
	display: flex;
	justify-content: center;
	align-items: center;

	border: 2px dotted steelblue;
	padding: 10px 30px;
	width: max-content;
	margin: 0 auto 30px;
}
.selector > div:not(:last-child) {
	margin-right: 40px;
}
.selector select {
	border: 2px solid cornflowerblue;
	border-radius: 3px;
	padding: 5px 10px;
	font-weight: bold;
	color: royalblue;
	background: transparent; /* in Chrome Android it's gray */
	font-size: 1.05em;
	margin-left: 10px;
	cursor: pointer;
}
.selector a {
	text-decoration: none;
	cursor: pointer;
	font-variant-caps: petite-caps;
	margin: 0 4px;
}
.selector a.selected {
	border-bottom: 2px solid cornflowerblue;
}

article {
	margin: 0 10px;
	border-bottom: 3px solid cadetblue;
}

h1, h2 {
	color: steelblue;
	font-weight: bold;
}
h1:not(.title), h2 {
	display: flex;
	align-items: center;
}
h1 {
	font-size: 1.5em;
	margin: 20px 0;
}
h2 {
	font-size: 1.2em;
	margin-top: 0; /* replaced h2 top margin to section's top padding to make smooth animation */
	margin-bottom: 15px;
}

section {
	margin-left: 15px;
	padding-top: 15px; /* replaced h2 top margin to section's top padding to make smooth animation */
}

article, h1, p {
	transition: 1s ease;
}

.colors {
	margin-bottom: 10px;
	transition: 1s ease;
	display: flex;
}
.colors.hidden {
	height: 0;
	opacity: 0.2;
	margin-bottom: 0;
}

.colors > div {
	height: 20px;
	width: 30px;
	margin: 1px;
	transition: 0.5s cubic-bezier(0.6, 0, 0.4, 1),
		height 0.5s cubic-bezier(0.6, 0, 0.4, 1),
		opacity 1s ease,
		margin 1s ease;
	cursor: help;
}
.colors.hidden > div {
	margin-top: -30px;
	height: 0;
	opacity: 0.2;
	transition: 1s ease;
}


p {
	margin: 15px;
}

button {
	/* margin: 15px 0; */
	margin-left: 30px;
	background: cornflowerblue;
	border: 1px solid blue;
	padding: 5px 15px;
	cursor: pointer;
	border-radius: 2px;
}

a {
	color: steelblue;
}


body.samples-small .colors > div {
	width: 10px;
	height: 10px;
}

body.samples-large .colors > div {
	width: 50px;
	height: 60px;
	margin-right: 2px;
}


body.verbosity-minimum h1:not(.title),
body.verbosity-minimum h2 {
	font-size: 75%;
	margin: 0;
	color: #aaa;
	font-weight: normal;
}
body.verbosity-none p:not(#wait),
body.verbosity-minimum p:not(#wait) {
	display: none;
}
body.verbosity-none button,
body.verbosity-minimum button {
	transform: scale(0.8);
	background: transparent;
	border: none;
	text-decoration: underline;
	color: inherit;
}
body.verbosity-none article,
body.verbosity-minimum article {
	border: 0;
}
body.verbosity-none section,
body.verbosity-minimum section {
	padding: 0;
}
body.verbosity-minimum .colors {
	margin-bottom: 0;
}


body.verbosity-none h1:not(.title),
body.verbosity-none h2 {
	display: none !important;
}
body.verbosity-none .colors {
	  margin-bottom: 10px;
}


@media(max-width: 800px) {
	h1.title {
		padding: 0 20px;
	}
	.selector {
		flex-direction: column;
	}
	.selector > div:not(:last-child) {
		margin-right: 0;
		margin-bottom: 20px;
	}
}