.background,.canvas{position:absolute;width:100vw;height:100vh}.background{z-index:0}.canvas{z-index:1;opacity:.75}.title{position:absolute;top:50%;left:0;width:100%;margin:0;padding:0;font-family:open sans condensed,sans-serif;font-size:2em;text-align:center;color:#ffffb9;transform:translateY(-50%);z-index:3;mix-blend-mode:soft-light}form{position:absolute;padding:30px;width:150px;mix-blend-mode:overlay;font-size:1.1em;z-index:2}label{display:block;text-align:center;font-family:open sans condensed,sans-serif;color:#fff}input[type=range]{-webkit-appearance:none;margin-bottom:18px;width:100%}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:2px;cursor:pointer;background:#fff}input[type=range]::-webkit-slider-thumb{height:14px;width:14px;border-radius:50%;background:#fff;cursor:pointer;-webkit-appearance:none;margin-top:-6px}input[type=range]::-moz-range-track{width:100%;height:2px;cursor:pointer;background:#fff}input[type=range]::-moz-range-thumb{height:16px;width:16px;border-radius:50%;border:2px solid #fff;background:transparent;cursor:pointer;-webkit-appearance:none;margin-top:-7px}.codepen-link{position:absolute;bottom:30px;right:30px;height:40px;width:40px;z-index:10;border-radius:50%;box-sizing:border-box;mix-blend-mode:overlay;filter:invert(100%);background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg);background-position:50%;background-size:cover;opacity:.5;transition:all .25s}.codepen-link:hover{opacity:.8;box-shadow:0 0 60px #000}