@charset "utf-8";
/* CSS Document */
html,body { height: 100%;}
        body {  background-color: #556064; margin: 0; transition: opacity 1s ease 0s;}
        #range { width: 100%; height: 30vh; position: relative; }
        #rangeInput { width: 80%; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%);}
 
.intro body { opacity: 0;}
        
        input[type=range] {  background:none;
  -webkit-appearance: none;
  -moz-appearance:none;
  appearance:none;
  margin: 0;
  
  -webkit-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  -o-transform:translate(-50%,-50%);
  -ms-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}
input[type=range]:focus {
  outline: none;
}

/* WebKit・Blink向け 溝のスタイル */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: none;
  background: #F1FFFF;
  border-radius: 0;
  border: none;
}
/* WebKit・Blink向け つまみのスタイル */
input[type=range]::-webkit-slider-thumb {
  box-shadow: none;
  border: none;
  height: 120vh;
  width: 10px;
  border-radius: 0;
  background-color:#F5292A;
  cursor:move;
  -webkit-appearance: none;
  /* 以下は つまみの縦位置調整 */
  margin-top: -20vh;  /* (つまみの高さ - トラックの高さ) / 2 。つまみの高さは border を含む */
  
  background-position:center;
  background-repeat:repeat-y;
  background-size:6px auto;
  transition: all 0.1s cubic-bezier(.07,.91,.14,.84) 0s;
}

/*input[type=range]::-webkit-slider-thumb:hover {
transform:scaleX(2); box-shadow:1px 1px 5px rgba(0,0,0,.7);
 }*/
 

/* 何故か上の margin-top 指定が Edge に効いてしまうので、Edge向けに設定をリセット */
@supports (-ms-ime-align: auto) {
	input[type=range]::-webkit-slider-thumb {
		margin-top: 0 !important;
	}
}

/* WebKit・Blink向け focus時のスタイル */
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #999999;
}

/* Firefox向け 溝のスタイル */
input[type=range]::-moz-range-track {
	 -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: none;
  background: #F1FFFF;
  border-radius: 0;
  border: none;

}
/* Firefox向け つまみのスタイル */
input[type=range]::-moz-range-thumb {
  box-shadow: none;
  border: none;
  height: 83px;
  width: 10px;
  border-radius: 0;
  background-color:#F5292A;
  cursor:move;
  -moz-appearance: none;
  appearance: none;
  /* 以下は つまみの縦位置調整 */
  margin-top: -28px;  /* (つまみの高さ - トラックの高さ) / 2 。つまみの高さは border を含む */
  background-image:url(../img/range.png);
  background-position:center;
  background-repeat:repeat-y;
  background-size:6px auto;
  transition: all 0.1s cubic-bezier(.07,.91,.14,.84) 0s;
}

        video { position: fixed; top:0; left: 0; object-fit: cover; object-position: center; width: 100%; height: 100%; opacity: 0;}
        video.show { opacity: .2;}
        
        #power { position:fixed; bottom: 10%; left: 50%; transform: translateX(-50%); background-color: #F5292A; width: 80px; height: 80px; border-radius: 50%; cursor: pointer; background-image: url("../img/power.svg"); background-position: center; background-repeat: no-repeat; background-size: 30px;}
.power #power { background-color:#20FF2C; }
#output  { width: 1000px; overflow:hidden; 
    height: 1000px; transform-origin: 0% 0%;  position: fixed; top:50%; left: 50%; transform:translate(-50%,-50%); box-sizing:border-box; opacity:0;}

    .pixel {
      position: absolute;
      width: 30px;
      height: 30px;
    }
#output.show { opacity:.8; }