body
{
	background:#0ff000;
	font-family: sans-serif;
}

#matrix
{
	position: relative;
	background:#6aa8ff;
	width: 800px;
	height: 600px;
	
}

.matrixButtOn
{
	background:#FFFFFF;
	width:25px;
	height:25px;
	position:absolute;
}

.matrixButtOff
{
	background:#000000;
	width:25px;
	height:25px;
	position:absolute;
}

.playButton
{
	background:#000000;
	width:800px;
	height:600px;
	position:absolute;
	font-size:300px ;
	color: #ffff00;
	z-index:2;
}


.playButtoff
{
	background:#000000;
	width:0px;
	height:0px;
	position:absolute;
	z-index:-2;
}

.scrubber
{
	background:#FF0000;
	width:30px;
	height:600px;
	position:absolute;
}

.offsets
{
	color:#000000;
	background:#FFFFFF;
	width:25px;
	height:25px;
	position:absolute;
	font-size:20px ;
	text-align: center;

}

.octave
{
	color:#000000;
	background:#FFFFFF00;
	font-size:50px ;
	width:25px;
	height:25px;
	position:absolute;
}

.subdivisions
{
	color:#000000;
	background:#FFFFFF00;
	width:25px;
	height:25px;
	position:absolute;
}
.upTriangle
{
		background-image: url("triangle.svg");
		background-size: contain;
	position:absolute;

}

.downTriangle
{
		background-image: url("triangle.svg");
		background-size: contain;
		filter:invert(1);
		rotate:180deg;
	position:absolute;

}