.matrix-row{

}
.matrix-cell{
    float: left;
    border: solid 1px grey;
    width: 50px;
    height: 50px;
}


.matrix-filled{
    background: #ccc;
}
.matrix-filled-food{
    background-color: red;
}
.clr{
    clear: both;
    height: 0;
}

.controls-block{
	justify-content: center;
	align-items: center;
	height: 28vh;
	display: none;
	width: auto;
}

.play{
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #43BCD1;
	color: #fff;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.up{
	width: 0;
	height: 0;
	border-left: 35px solid transparent;
	border-right: 35px solid transparent;
	border-bottom: 60px solid #43BCD1;
}

.down{
	width: 0;
	height: 0;
	border-left: 35px solid transparent;
	border-right: 35px solid transparent;
	border-top: 60px solid #43BCD1;
}

.left{
	width: 0;
	height: 0;
	border-top: 35px solid transparent;
	border-right: 60px solid #43BCD1;
	border-bottom: 35px solid transparent;
}

.right{
	width: 0;
	height: 0;
	border-top: 35px solid transparent;
	border-left: 60px solid #43BCD1;
	border-bottom: 35px solid transparent;
}

.play:active{
	background-color: orange;
}

.up:active{
	border-bottom: 60px solid orange;
}

.down:active{
	border-top: 60px solid orange;
}

.left:active{
	border-right: 60px solid orange;
}

.right:active{
	border-left: 60px solid orange;
}


@media(max-width: 768px){
	.controls-block{
		display: flex;	
	}
}



@media(max-width: 564px){
	.controls-block{
		height: 46vh;
		display: flex;
	}
}

@media(max-width: 385px){

	.up{
		top: -90px;
	}

	.down{
		bottom: -90px;
	}

	.left{
		left: -90px;
	}

	.right{
		right: -90px;
	}
}

@media(max-width: 340px){
	.controls-block{
		height: 48vh;
	}
	.play{
		width: 70px;
		height: 70px;
		font-size: 20px;
	}

	.up{
		top: -85px;
	}

	.down{
		bottom: -85px;
	}

	.left{
		left: -85px;
	}

	.right{
		right: -85px;
	}
}