/** Layout controls div **/
.controls {
	position: fixed;
	top: 2em;
	width: 100%;
	margin-left: 0em;
	background-image: var(--header-bg-img);
	padding-left: 1em;
	line-height: 2em;
	display: flex;
}

/** Layout a control- set within the controls div **/
.controls .control-set {
	font-size: 1em;
	margin-left: 0;
	padding: 0em;
	margin-right: 1em;
}

/* special  layout for class "caption" */
.controls .caption {
	font-weight: bolder;
}
/* remove the any "before" charcter */
.controls .caption::before {
	content: "";
}

/** Implementierung mit span buttons **/
/* Design the button */
.controls span.control-set .button {
	display: inline-block;
	border: 3px outset gainsboro;
	border-radius: 50px;
	line-height: 0.9em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	text-align: center;
}

/* special cursor on hover */
.controls span.control-set .button:hover {
	cursor: pointer;
}

/* special border if checked */
.controls span.control-set .button.checked {
	border-style: inset;
}

/** Implementierung mit fieldset radio buttons **/
/* display inline and remove border */
.controls > fieldset.control-set
{
	display: inline;
	border: none;
}

/** Adjust screen layout **/
html {
	scroll-padding-top: 5rem;
}

/** Remove image controls for small displays **/
@media (max-width: 36em) {
	.controls #img-controls {
		display: none;
	}
}