body {
    margin:0;
    padding:0;
    font-family:sans-serif;
    width: 100vw;
    height: 100vh;
	min-width: 330px;
	background-color: #000000;
}
#wrapper {
    min-width: calc(100% - 4rem);
	min-height: calc(100% - 4rem);
	padding: 2rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
#colorpicker {
    background:#333435;
    max-width:500px;
    min-height:300px;
    position:relative;
    margin:0 auto;
	display: flex;
	flex-flow: row wrap;
	width: calc(100% - 20px);
	padding:10px;
	min-width: 330px;
}
#basecolor {
    background:#ff0000;
    position:relative;
    width:300px;
    height:300px;
    top:0;
    left:0;
}
#saturation {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-image:linear-gradient(to right,white,rgba(255,255,255,0));
}
#brightness {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-image:linear-gradient(to top,black,rgba(255,255,255,0));
}
#hue {
    height:300px;
    width:20px;
    position:relative;
    top:0;
    left:10px;
    background-image:linear-gradient(to bottom,
        #ff0000 0%,
        #ffff00 16.6667%,
        #00ff00 33.3334%,
        #00ffff 50%,
        #0000ff 66.6667%,
        #ff00ff 83.3334%,
        #ff0000 100%);
}
#values {
    position:relative;
    height:300px;
    width:160px;
    top:0;
    box-sizing:border-box;
    left:20px;
    color:#e1e2e3;
	font-size:.9rem;
    user-select:none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
#values > div {
  border-bottom: 1px solid;
  padding-bottom: 2px;
}
#values > div:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}
#values strong {
    text-shadow:0 1px 2px rgba(0,0,0,0.5);
}
#values .hexvalue {
  float: right;
}
#result {
    height:30px;
    width:100%;
    position:relative;
    background:#fff;
}
#chooserarea {
    position:absolute;
    width:calc(100% + 10px);
    height:calc(100% + 10px);
    top:-5px;
    left:-5px;
}
#sliderarea {
    position:absolute;
    width:calc(100% + 6px);
    height:calc(100% + 8px);
    top:-4px;
    left:-3px;
}
#chooser {
    width:10px;
    height:10px;
    border:1px solid #fff;
    box-sizing: border-box;
    border-radius: 50%;
    box-shadow:0 0 0 1px #000;
    cursor:move;
}
#slider {
	width: 26px;
	height: 8px;
    border:1px solid #fff;
    box-sizing: border-box;
    border-radius: 3px;
    box-shadow:0 0 0 1px #000;
    cursor:n-resize;
}
@media(max-width:600px) {
	#wrapper {min-width: calc(100% - 2rem);min-height: calc(100% - 2rem);padding: 1rem;}
	#basecolor {position:relative;left: calc((100% - 330px) / 2);}
	#saturation,#brightness {width:100%;height:100%;}
	#chooserarea {width: calc(100% + 10px);height: calc(100% + 10px);}
	#hue {position: relative;left: calc((100% - 310px) / 2);}
	#values {width:100%;height: auto;padding-top: 10px;left:0;flex-flow: row wrap;justify-content: flex-start;}
	#values > div {width: calc(33.333% - 7px);margin-right: 10px;margin-bottom: 10px;}
	#values > div:nth-of-type(3) {margin-right: 0;}
	#values > div:last-of-type {flex-grow: 1;margin-right:0;}
}
@media(max-width:440px) {
	#wrapper {min-width: 100%;padding: 1rem 0;}
	#values > div, #values > div:nth-of-type(3) {width: calc(50% - 5px);margin-right: 10px;margin-bottom: 10px;}
	#values > div:nth-of-type(2n-2) {margin-right: 0;}
	#values .hexvalue {float:none;}
	#values .hexvalue::before {content: "\A";white-space: pre;}
}