<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!DOCTYPE html>
<head>
<title>video2ascii in a cube!</title>
<style>
html, body, div { margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; display: block; }
body { font-size: 9px; color: black; background-color: #FAFFF5; background-image: -webkit-gradient(radial, 500 300, 400, 500 300, 40, from(#FAFFF5), to(#aaaaaa)); -webkit-user-select: none; -moz-user-select: none; user-select: none;}
aside { display: block; position: absolute; top: 20px; left: 20px; font-family: sans-serif; color: #555; }
div { position: absolute; font-family: monospace; line-height: 1em; white-space: pre; left: 400px; top: 200px; }
#letter { position: absolute; left: -9001px; font-family: monospace; line-height: 1em; }
h1 { font-size: 17px; }
p { font-size: 13px; }
label, ul { font-size: 14px; }
canvas { position: absolute; left: -9001px; }
.fadey #top { -webkit-mask-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(transparent), color-stop(0.2, transparent), to(white)); }
.fadey #right { -webkit-mask-image: -webkit-gradient(linear, 100% 100%, 0% 100%, from(white), color-stop(0.8, transparent), to(transparent)); }
.fadey #bottom { -webkit-mask-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), color-stop(0.2, transparent), to(white)); }
.fadey #left { -webkit-mask-image: -webkit-gradient(linear, 0% 100%, 100% 100%, from(white), color-stop(0.8, transparent), to(transparent)); }
