.color-Wrapper{
	display:flex;
	justify-content: center;
	height:100%;
	padding:10px;
}

.play-ground{
	position:relative;
	margin-left:100px;
}

.kreis-aussen{
	position:relative;
	z-index:10;
	width:250px;
	height:250px;
	background-color:transparent;
	border-radius:50%;
	overflow:hidden;
	margin:35% 0;
	animation: spinn 28s infinite;
	animation-timing-function: linear;
}

@keyframes spinn {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
	
	.kreis-aussen:before, .kreis-aussen:after {
		content: ' ';
		position: absolute;
		z-index: 20;
		width: 247px;
		height: 10px;
		background-color: black;
		border: 1px solid black;
	}
	.kreis-aussen:before{
		left: 0px;
		top: 119px;
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.kreis-aussen:after{
		right: 0px;
		bottom: 118px;
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	
.kreis-2{
	width:200px;
	height:200px;
	background-color:black;
	border-radius:50%;
	border-top:25px solid    rgba(0,225,70,1);
	border-right:25px solid  rgba(0,255,70,1);
	border-bottom:25px solid rgba(0,255,70,1);
	border-left:25px solid   rgba(0,255,70,1);
}


/* START::: Regler anpassen */
.steuerung{
	margin-left:20px;
}

.steuerung p{
	border-bottom: 1px dotted var(--white);
    padding-bottom: 10px;
}

output{
	display:inline-block;
	width:40px;
	height:25px;
	line-height:25px;
	border:1px solid var(--skillflow-base-font-color);
	padding:4px;
}

input[type="range"]{
	width:300px;
}

/* ENDE::: Regler anpassen */