.back
.center
  .pair
    label H
    input.slider#hue( type="range" min="0" max="360" value="360") 
  .pair
    label S
    input.slider#sat( type="range" min="0" max="100" value="65") 
  .pair
    label L
    input.slider#lig( type="range" min="0" max="100" value="75") 
  .pair
    label B
    input.slider#border( type="range" min="0" max="300" value="150") 
  
a#hide-controls Hide the controls and let me take a screenshot

a(href="http://nathan.tokyo" target="_blank").sig NATHAN.TOKYO

$main: hsl(0,0%,100%);



$sans: 'Open Sans', sans-serif;
$serif: 'Merriweather', serif;


body{
  font-family: $sans;
  max-height: 100vh;
  max-width: 100vw;
  overflow: hidden;
}
.back{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    //background: linear-gradient( 35deg, darken( adjust-hue( $main, -5% ), 10% ), darken( adjust-hue($main,5%),5%));
    z-index: -1;
}

.center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
  width: 60vh;
  height: 60vh;
  box-shadow: 0px 1vh 5vh rgba(darken(adjust-hue($main,-20%),45%),0.2);
  border-radius: 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: lighten($main,2%);
  background-position: center;
  background-size: cover;
  padding: 10vh 10vh 8vh;
  box-sizing: border-box;
  &.faded{
    cursor: pointer;
    &:after{
      content: 'Click here when you are done to bring them back';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%,-50%,0);
      color: white;
      font-family: $sans;
      width: 50%;
      font-size: 4vh;
      line-height: 1.5;
      font-weight: 100;
      opacity: 0;
      @keyframes fadeinout{
        0%{ opacity: 0;}
        20%{ opacity: 1;}
        80%{ opacity: 1;}
        100%{ opacity: 0;}
      }
      animation-name: fadeinout;
      animation-duration: 2s;
      animation-delay: 300ms;
      animation-fill-mode: forwards;
    }
  }
}

.pair{
  margin: auto;
  width: 100%;
}
label{
  display: inline-block;
  width: 10%;
  color: rgba(white,1);
  text-align: left;
  font-size: 4vh;
  margin-bottom: 1vh;
  font-weight: 100;
}
.slider{
  display: inline-block;
  width: 80%;
  margin-left: 5%;
}

#hide-controls{
  width: 40vh;
  text-align: center;
  margin: auto;
  font-size: 2vh;
  padding: 2vh;
  color: white;
  cursor: pointer;
  position: absolute;
  bottom: 1vh;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.3;
  font-weight: 100;
  &:hover{
    opacity: 1;
  }
}

.sig{
  position: fixed;
  bottom: 8px;
  right: 8px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 100;
  font-family: sans-serif;
  color: rgba(0,0,0,0.4);
  letter-spacing: 2px;
}

//sliders

input[type=range] {
  -webkit-appearance: none;
  background: transparent;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 1.5vh;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: inset 0 0.15vh 0.4vh rgba(0,0,0,0.3);
  background: white;
  border-radius: 1.5vh;
  border: none;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0 0.2vh 0.5vh rgba(0,0,0,0.2);
  border: none;
  height: 4vh;
  width: 4vh;
  border-radius: 4vh;
  background: #FFFFFF;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -1.5vh;
}

input[type=range]::-moz-range-track {
  height: 1.5vh;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: inset 0 0.15vh 0.4vh rgba(0,0,0,0.3);
  background: white;
  border-radius: 5px;
  border: none;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0 0.2vh 0.5vh rgba(0,0,0,0.2);
  border: none;
  height: 4vh;
  width: 4vh;
  border-radius: 4vh;
  background: #FFFFFF;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -1.5vh;
}

var clr = {
  h: Number($('#hue').val()),
  s: Number($('#sat').val()),
  l: Number($('#lig').val()),
}

br = String( Number($('#border').val() / 10 ) ) + 'vh';

function updateUI(){
  var centerColor = 'hsl('+clr.h+','+clr.s+'%,'+clr.l+'%)';
  var centerShadow = '0px 1vh 3vh hsla('+(clr.h-30)+','+(clr.s*0.7)+'%,'+(clr.l*0.5)+'%, 0.3)';
  $('.center').css('background-color', centerColor);
  $('.center').css('box-shadow', centerShadow);
  $('.center').css('border-radius', br);
  
  var backDark = 'hsl('+(clr.h-30)+','+(clr.s*0.8)+'%,'+(clr.l*0.9)+'%)';
  var backLight = 'hsl('+(clr.h+30)+','+(clr.s*1.2)+'%,'+(clr.l*1.1)+'%)';
  var backGrad = 'linear-gradient( 35deg, '+backDark+', '+backLight+' )';
  $('.back').css('background', backGrad);  
}

$('#hue').on('mousemove change', function(){
  clr.h = Number($('#hue').val());
  updateUI();
})
$('#sat').on('mousemove change', function(){
  clr.s = Number($('#sat').val());
  updateUI();
})
$('#lig').on('mousemove change', function(){
  clr.l = Number($('#lig').val());
  updateUI();
})
$('#border').on('mousemove change', function(){
  br = String( Number($('#border').val() / 10 ) ) + 'vh';
  updateUI();
})

$('#hide-controls').on('click', function(){
  $('.pair, #hide-controls').fadeOut();
  $('.center').addClass('faded');
})
$('.center').on('click', function(){
  $('.pair, #hide-controls').fadeIn();
  $('.center').removeClass('faded');
})


$(document).ready(function(){
  var direction = -1;
  var ease = 1.01;
  var testSlide = setInterval(function(){
    clr.h += direction;
    direction *= ease;
    direction
    $('#hue').val( clr.h );
    if (clr.h <= 180){
      ease = 0.99;
    }
    if (clr.h <= 0){
      clearInterval(testSlide);
    }
    updateUI();
  },20);
  
})