/* https://webdesign-assistant.com */
body{
	font-family: verdana;
	text-align: center;
    background: #eee;
	margin: 0;
}
h1{
    color: #fff;
	background-color: #888;
	border-bottom: 2px solid #555;
	margin: 0;
	padding: 8px 0;
	margin: 0 0 30px 0;
}
#colorpicker-content{
	text-align: left;
	width: 300px;
	margin: 0 auto;
	padding: 10px;
	border: 5px solid #000;
	border-radius: 20px;
	background-color: hsla(0, 0%, 30%, 1);
}
#display-container{
	background-image: url(img/bg.png);
	border-radius: 10px;
}
#color-display{
	width: 290px;
	height: 290px;
	margin: 0 auto;
	border: 5px solid #000;
	border-radius: 11px;
	background-color: hsla(0, 100%, 50%, 1);
}
#result{
	width: 100%;
	text-align: center;
	color: #fff;
}
label{
	color: #fff;
}
.slider {
	-webkit-appearance: none;
	width: 100%;
	height: 23px;
	margin: 0 auto;
	border: 1px solid #000;
	border-radius: 12.5px;
    cursor: pointer;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 23px;
    height: 23px;
	border: 1px solid #000;
	border-radius: 50%;
    background: #ccc;
}

.slider::-moz-range-thumb {
    width: 23px;
    height: 23px;
	border: 1px solid #000;
	border-radius: 50%;
    background: #ccc;
}
#hue{
	background-image: linear-gradient(to right, red, orange, yellow, green, rgb(0, 251, 255), blue, indigo, rgb(255, 0, 119), red);
}
#saturation{
	background-image: linear-gradient(to right, hsl(0, 0%, 50%), red);
}
#saturation{
	background-image: linear-gradient(to right, hsl(0, 0%, 50%), red);
}
#luminosity{
	background-image: linear-gradient(to right, #000, #f00, #fff);
}
#alpha{
	background-image: url(img/bg-alpha.png);
	background-color: #f00;
}
a{
    color: #555;
	display: inline-block;
	margin: 30px 5px;
}