html, body { padding: 0; margin: 0; font-family: sans-serif; font-size: 16px; } body { background: #f8faf8; } #nanopad { margin: 0 auto; } div.nanotouch { border-radius: 5px; box-shadow: 0 0 5px #666; box-sizing: border-box; padding: 1.5rem; position: relative; width: 10vw; height: 10vw; margin: 1vw; display: inline-block; overflow: hidden; background: white; } div.nanotouch.error { background: #ff9a9a; } div.nanotouch.loaded { background: #9aff9a; } div.nanotouch.loaded.playing { background: #6aff6a; } div.nanotouch input[type=file] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.001; margin: 0; cursor: pointer; } div.nanotouch input[type=range] { position: absolute; bottom: 0; left: 0; width: 100%; padding: 0; margin: 0; } div.nanotouch span.name { position: absolute; } div.nanotouch span.duration { position: absolute; bottom: 2ex; right: 1ex; } div#gitclone { font-size: 12px; position: absolute; bottom: 1ex; right: 1ex; } form { margin: 1em; } form label { display: inline-block; width: 10em; } #devices { position: absolute; bottom: 2em; right: 1em; } #devices div { padding: 1px 5px; margin-top: 2px; } #devices div.on { background: #6aff6a; }