@font-face {
    font-family: 'arvo';
    src: url('../fonts/Arvo-Regular.ttf');
}

html, body {
    margin: 0;
    font-family: 'arvo';
    color: #213215;
    font-size:  20;
    background: black;
}

.button-holder {
    width: 100%;
	margin-bottom: 2px;
}

.canvas-holder {
	position: relative;
	display: block;
    width: 100%;
	height: 100vh;
}

#canvas {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
    /* background: url(../images/bg.jpg); */
    background-size: 100% 100%;
    background: #ffebd2;
    margin: auto;
    display: block;
}

#params {
    font-family: 'sans';
    display: none; 
    position: absolute; 
    top: 0;
	right: 0;
    background: #716060;
    padding: 1em;
    width: 350px;
	color: white;
}

#edit-button {
	position: absolute;
	top:0;
	right:0;
	z-index: 100;
}

.param-list {
    height: 400px;
    overflow-y: scroll;
}

.param-row {
    display: table;
	border-bottom: 1px solid black;
}

.param-key {
    display: table-cell;
    width: 200px;
    font-size: 75%;
}

.param-value {
    display: table-cell;
    font-family: 'sans';
    width: 50px;
    border: none;
    background: #129490;
}

.param-units {
    display: table-cell;
    font-size: 50%;
    width: 100px;
}


button {
    background: #129490;
    border: none;
}

.logo-outer {
	min-width: 800px;
	width: 100%;
}

.logo-holder {
	color: black;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
	width: 30vw;
}


.logo-holder img {
	width: 20vw;
	height: 20vw;
}

progress {
	width: 20vw;
	height: 2vw;
}

/* background: */
progress::-webkit-progress-bar { background-color: #c6af98; width: 100%; }
progress { background-color: #c6af98; }

/* value: */
progress::-webkit-progress-value { background-color: #1d6052 !important; }
progress::-moz-progress-bar { background-color: #1d6052 !important; }
progress { color: #1d6052; }