@font-face {
	font-family: 'Text';
	src: url('assets/glacial-indifference/GlacialIndifference-Regular.otf');
}

@font-face {
	font-family: 'Text';
	font-weight:bold;
	src: url('assets/glacial-indifference/GlacialIndifference-Bold.otf');
}

body{
	margin:0;
	padding:0;
	height:100vh;
	width:100vw;
	
	display:flex;
	align-items:center;
	justify-content:space-around;
	flex-direction:column;
	
	background-color:#000;
	
	font-family:'Text';
}

#canvas{
	top:10%;
	
	height:15em;
	width:15em;
	
	border-radius:100%;
	
	box-shadow:0em 0em 1em .25em rgba(0,0,0,.5) inset;
	background-color:rgba(255,255,255,.95);
}

#button-holder{
	user-select:none;
	display:flex;
	justify-content:center;
	align-items:center;

	/* This holds the outer rim, the dark hole for the button, and the inner circle*/
	/* background: radial-gradient(rgba(128, 128, 128, 0.65) 60%, rgb(81, 81, 81) 63%, rgb(177, 177, 177) 20%) rgb(255,0,0);*/
	width:12em;
	height:12em;
	border-radius:100%;
	box-shadow:0.1em 0.1em 0.2em 0.03em rgba(0,0,0,.5);
	background:url("assets/base.png");
	background-size:contain;
	position: relative;
}

#button-holder-coloration{
	width:100%;
	height:100%;
	border-radius:50%;
	mix-blend-mode:multiply;
	position: absolute;
}

#button{
	z-index:2;
	border-radius:100%;
	width:90%;
	height:90%;
	/* position: relative; */
	/* background-size: contain; */
	transform:rotate3d(0,0,0,0deg) translate(0px,0px) scale(1);
	transform-origin:50% 50% -100px;
	transition:transform .02s, box-shadow .02s;
	box-shadow:0 0 10em rgba(0,0,0,0) inset, 0.1em 0.1em 0.2em 0.15em rgba(0,0,0,.5);
	
	background-image:url("assets/knob.png");
	background-size:cover;
	background-position:center;
}

#button-coloration{
	background-color:rgba(255,0,0,.5);
	width:100%;
	height:100%;
	border-radius:50%;
	mix-blend-mode:multiply;
}

#image-top{
	width:70%;
}

#column{
	z-index:1;
	/* border-left: .1em solid rgba(0,0,0,.5); */
	/* border-right: .1em solid rgba(0,0,0,.5); */
	width: 4em;
	height: 4em;
	position: absolute;
	pointer-events: none;
	background:url("assets/stick-01.png");
	background-size:contain;
}

#column-coloration{
	background-color:rgba(255,0,0,.5);
	transform:translate(50%, 0%);
	width:50%;
	height:100%;
	/* border-radius:50%; */
	mix-blend-mode:multiply;
}

#menu-button{
	font-size:1.5em;
}

#measure{
	color:#c6c6c6;
	font-size:4vh;
	text-align:center;
	margin:0;
	padding:0;
}

/*********************/
/******* MENU ********/
/*********************/

/* Overall positioning */
#menu-container{
	width:100%;
	height:100%;
	position:fixed;
	z-index:100;
	
	display:flex;
	align-items:center;
	justify-content:center;
	
	pointer-events:none;
}

#menu{
	max-height:100%;
	
	width:25em;
	max-width:100%;
	overflow:auto;
	box-sizing:border-box;
	padding:1em;
	
	text-align:center;
	
	background-color:#000;
	color:#c6c6c6;
	border:.5em solid #c6c6c6;
	
	pointer-events:auto;
	
	box-shadow:0em 0em 0em .5em black;
}

h2, h3{
	margin:0;
}

h2{
	color:#8f8f8f;
}

h3{
	margin-top:.5em;
}

p{
	margin:0;
}

#logo{
	width:100%;
	margin-bottom:3em;
}

#menu a{
	color:#c6c6c6;
}

#menu a:active{
	color:#8f8f8f;
}

#menu button{
	margin-top:3em;
}

#menu hr{
	margin:2em;
	color:#8f8f8f;
}

button{
	background:#c6c6c6;
	border:.25em solid #000;
	color:#000;
	box-shadow:0em 0em 0em .15em #c6c6c6;
	
	width:10em;
	margin-top:1em;
	
	cursor:pointer;
	
	font-family:'Text';
}

button:hover{	
	background:#8f8f8f;
	box-shadow:0em 0em 0em .15em #8f8f8f;
}

button:active{	
	border:.25em solid #8f8f8f;
	color:#8f8f8f;
	background:#000;
	box-shadow:0em 0em 0em .15em #000;
}

/* Color adjustment */
#r,#g,#b{
	-webkit-appearance:none;
	appearance: none;
	width:100%;
	height:25px;
	background:#d3d3d3;
	outline:none;
	opacity:0.7;
	
	display:block;
	margin:auto;
}

#r{
	background:linear-gradient(to right, #000, rgba(255,0,0,.75));
}

#g{
	background:linear-gradient(to right, #000, rgba(0,255,0,.75));
}

#b{
	background:linear-gradient(to right, #000, rgba(0,0,255,.75));
}

#r::-webkit-slider-thumb
,#g::-webkit-slider-thumb
,#b::-webkit-slider-thumb{
	-webkit-appearance:none;
	appearance:none;
	width:25px;
	height:25px;
	cursor:pointer;
}

#r::-webkit-slider-thumb{
	background:#f00;
}

#g::-webkit-slider-thumb{
	background:#0f0;
}

#b::-webkit-slider-thumb{
	background:#00f;
}