body
{
    color: black; 
    background-color: #CFCA96; 
    width: 98%; 
    text-align: center; 
    font-size: 40px;
}

hr
{
    background: black;
    height: 2px; 
    border: none;
}

audio {
    width: 75%;
    height: 100px;
}

button {
    width: 75%;
    height: 100px;
    font-size: 40px;
    border-radius: 0.5em;
}

.toggle label {
	position: relative;
	display: inline-block;
	width: 10em;
	height: 5.5em;
}

.toggle input {
	display: none;
}

.toggle .slider {
	/* Grundfläche */
	
	position: absolute;
	cursor: pointer;
	top: 1.5em;
	left: 2em;
	width: 4em;
	height: 2em;
	background-color: #c32e04;
	/* red */
	
	transition: all .3s ease-in-out;
	border-radius: 1em;
}

.toggle .slider:before {
	/* verschiebbarer Button */
	
	position: absolute;
	content: "";
	height: 1.6em;
	width: 1.6em;
	left: 0.2em;
	bottom: 0.2em;
	background-color: white;
	border-radius: 50%;
	transition: all .3s ease-in-out;
}

.toggle input:checked + .slider {
	background-color: #5a9900;
	/* green */
}

.toggle input:focus + .slider {
	background-color: pink;
	box-shadow: 0 0 1px #5a9900;
}

.toggle input:checked + .slider:before {
	-webkit-transform: translateX(1.9em);
	/* Android 4 */
	
	-ms-transform: translateX(1.9em);
	/* IE9 */
	
	transform: translateX(1.9em);
}


.toggle-buttons input[type="radio"] {
    visibility: hidden;
}

.toggle-buttons label {
    background: #fff;
	border: 1px solid #000;
	border-radius: 0.5em;
	padding: 0.5em;
}

.toggle-buttons input:checked + label {
	background: #aaaaaa;
	box-shadow: none;
}

