a:link, a:hover, a:active, a:visited{color: #000;}

html, body{margin: 0; padding: 0; height: 100%; width: 100%;}

canvas{margin: 0; padding: 0; border: none; display: block;}

button:hover{cursor: pointer;}

@font-face{
	font-family: "Rametto";
	src: url("data/styles/font.ttf");
}

*{ 
	font-family: "Rametto";
	color: #888;
	font-size: 25px;
}

:root{
	--iw: 200px;
	--cw: 750px;
}

body{
	background-color: rgb(40, 40, 40);
	text-align: center;
}

#content{
	width: calc(var(--iw) + var(--cw));
	height: 750px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

#interface{
	float: left;
	width: var(--iw);
	height: 750px;
	text-align: center;
}

#canvasHolder{
	float: left;
	width: 750px;
	height: 750px;
	
}

#canvasHolder canvas{
	border-radius: 30px;
	box-shadow: 10px 10px 15px #000;
	border: 5px solid #000;
}

.x, .y, .z{
	height: 60px;
	margin-top: calc((750px - 9 * 60px) / 10);
}

button:not(.actions){
	float: left;
	width: 30%;
	height: 100%;
	background-color: rgb(50, 50, 50);
	border-color: rgb(50, 50, 50);
	border: 3px solid #000;
}

button:first-child:not(.actions){
	margin-left: 4%;
	border-radius: calc(var(--iw) / 20) 0px 0px calc(var(--iw) / 20);
	border-right: none;
}

button:last-child:not(.actions){
	margin-right: 4%;
	border-radius: 0px calc(var(--iw) / 20) calc(var(--iw) / 20) 0px;
	border-left: none;
}

.label{
	float: left;
	width: 30%;
	height: 90%;
	background-color: rgb(50, 50, 50);
	border-bottom: 3px solid #000;
	border-top: 3px solid #000;
	cursor: pointer;
}

.actions{
	margin: 30px;
	background-color: rgb(30, 30, 30);
	border-radius: 10px;
	border: 3px solid #000;
}