body {

	margin:0px;

	background-color:#333333;

	overflow:hidden;

}

button {

	position:absolute;

	width:10.5vw; height:10.5vw;

	font-size:7vw; line-height:100%;

	background-color:#444444;

	border:none;

	border-radius:1.5vw;

	color:#ffffff;

}

.container {

	width:100vw;

	margin:1vw auto;

	overflow:hidden;

}



h1 {

	text-align:center;

	background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);

	-webkit-background-clip: text;

	-webkit-text-fill-color: transparent;

	font-family: 'Molle', cursive;

	font-size:9.5vw;

	margin:1vw 15% 0vw;

}



#showCode {

	top:2.5vw; right:2vw;

	font-size:7vw; line-height:1;

}

	

.grid {

	height:98vw;

	display:flex;

	flex-direction:column;

	align-items:stretch;

	flex:1;

	margin:0 1vw;

}

.row {

	display:flex;

	flex-direction:row;

	align-items:stretch;

	flex-wrap:nowrap;

	flex:1;

}

.cell {

	height:auto;

	display:flex;

	flex:1;

}	

.pigment {

	flex:1;

	margin:0.3vw;

	border:1px solid #000000;

	background-color:#000000;

	border-radius:50%;

}





.tools {

	display:flex;

	flex-direction:row;

	align-items:stretch;

	margin-top:3vw;

	margin-left:1vw;

}

.colour {

	display:flex;

	flex:1;

}

.colour .pigment {

	border-radius: 3vw;

	background-color:#ff0000;

}



.controls {

	display:flex;

	flex:7;

	flex-direction:column;

	align-items:stretch;

}

.hue, .saturation, .lightness {

	flex:1;

	margin:0 2vw;

}

input[type=range] {

	-webkit-appearance: none;

	width:100%;

	border:none;

}

input[type=range]::-webkit-slider-runnable-track {

	-webkit-appearance: none;

}

input[type=range]::-webkit-slider-thumb {

	-webkit-appearance: none;

	height:6vw;

	width:4vw;

	border-radius:2vw;

	background-color: transparent;

	border:.7vw solid #000000;

}

#H, #S, #L {

	width:100%;

	height:6vw;

	border:none;

	border-radius:2vw;

}

#H {

	background: -webkit-linear-gradient(left, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); /* For Safari 5.1 to 6.0 */

	background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); /* Standard syntax */

}

#S {

	background: -webkit-linear-gradient(left, #808080, #ff0000); /* For Safari 5.1 to 6.0 */

	background: linear-gradient(to right, #808080, #ff0000); /* Standard syntax */

	margin:2vwx 0;

}

#L {

	background: -webkit-linear-gradient(left, black, #ff0000, white); /* For Safari 5.1 to 6.0 */

	background: linear-gradient(to right, black, #ff0000, white); /* Standard syntax */

}



.output {

	position:absolute; 

	top:0; left:100vw;

	/*padding-top:1vw;*/

	width:100vw;

	height:100%;

	background:#222222;

	display:none;

}

#hideCode {

	top:2vw; left:2vw;

	font-size:7vw; line-height:1;

}

.content {

	padding:2vw;

	color:#ffffff;

	font-family:monospace;

	position:absolute;

	top:12vw; left:0; right:0; bottom:0;

	overflow:auto;

}