body{
	background: DarkSlateGrey;
	color:MintCream;
	font-family: 'Roboto', sans-serif;
  font-size:5rem;
	text-align:center;
	margin: 0 auto;
  font-weight:400;
}
h1{
  font-size:97%;
  font-weight:300;
}
.container{
	height: auto;
	width: 505px;
	height: 505px;
margin: 0px auto;
background: SlateGray;
border: 30px solid SlateGray;
	border-radius: 100%;
	-webkit-border-radius: 100%;
	text-align: center;
	box-shadow: 5px 5px 5px 5px Gray;
}
.corner{
	width:500px;
	height: 500px;
	margin: 0;
	padding: 0;
	background: white;
	opacity: 0.5;
cursor: pointer;
position: relative;
	
}
.marker_select{
	height: 120px;
	width: 100%;
  font-size:25%;
	position: relative;
	vertical-align: middle;
	margin: 50px;
}
span{
  font-size:65%;
}
.round{
  font-size:150%;
  font-weight:700;
}
.red{
	background: red;
	margin:0 0 5px 5px;
	clip-path: inset(0 0 50% 50%);
	-webkit-clip-path: inset(0 0 50% 50%);
	border-radius: 100%;
	border: 1px solid black;
	position: absolute;
}
.yellow{
	background: yellow;
position: absolute;
margin:5px 0 0 5px;
		clip-path: inset(50% 0 0 50%);
	-webkit-clip-path: inset(50% 0 0 50%);
	border-radius: 100%;
	border: 1px solid black;
}
.green{
	background: green;
position: absolute;
margin:5px 5px 0 0;
	-webkit-clip-path: inset(50% 50% 0 0);
	clip-path: inset(50% 50% 0 0);
	border-radius: 100%;
	border: 1px solid black;
}
.blue{
	background: blue;
	position: absolute;
	margin: 0 5px 5px 0;
	border-left-radius: 100%;
			clip-path: inset(0 50% 50% 0);
	-webkit-clip-path: inset(0 50% 50% 0);

	border-radius: 100%;
	border: 1px solid black;
}
.hidden{
	display: none;
}
.play{
	position: relative;
  background-color: azure;
  width: 200px;
  height:50px;
  font-size:120%;
  border-radius:50px;
  -webkit-border-radius:50px;
  border: none;
}
.lite{
	opacity: 1;
}