.status{
  color: #fff;
}

.tier{
	display:flex;
}

div.box{
	height: 150px;
	width:150px;
	margin: 5px;
}

div.box[data-i='0']{
	background-color: #00c9b8;
    background-image: url("png/simon0.png");
    background-size: cover;
	border-radius: 220px 20px 20px 20px;
}

div.box[data-i='1']{
	background-color: #e7605f;
    background-image: url("png/simon1.png");
    background-size: cover;
	border-radius: 20px 220px 20px 20px;
}

div.box[data-i='2']{
	background-color: #f6e275;
    background-image: url("png/simon2.png");
    background-size: cover;
	border-radius: 20px 20px 20px 220px;
}

div.box[data-i='3']{
	background-color: #00a9cf;
    background-image: url("png/simon3.png");
    background-size: cover;
	border-radius: 20px 20px 220px 20px;
}

div.simon_container{
    width: 320px;
	margin: 0 auto;	
	font-family: 'Quicksand';
    background: #37517e;
    border-radius: 10px;
    box-shadow: 14px 14px 0 0 #000000;
}

button {
	font-family: 'Quicksand';
	padding: 5px 20px 5px 20px;
	border-radius: 20px;
	outline: none;
	font-size: 12px;
    font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	background-color:#272b38;
	color: lightgoldenrodyellow;
	border:none;
	margin: 5px;
	cursor: pointer;
}

.status{
    text-align: center;
	font-size: 22px;
	
}
.controlkeys{
	text-align: center;
	font-size: 22px;
	
}
.mode{
	margin: 20px;
	font-size: 22px;
	
}
.count{
	display:inline;
}

button#reset:active{
	position:relative;
	color: black;
	background-color:orangered;
}

.controlkeys{
	margin-top: 12px;
}

button#reset:hover{
	color: black;
	font-weight: 600;
	background-color:orangered;
}

button#start:hover{
	color:black;
	font-weight: 600;
	background-color: lightgreen;
}

button#start:active{
	color:black;
    font-weight: 600;
	background-color: lightgreen;
}