html, body { padding: 0; margin: 0; font-family: sans-serif; font-size: 16px; } #nanopad { margin: 0 auto; } div.nanotouch { border: 1px dashed #333; box-sizing: border-box; padding: 1.5rem; position: relative; width: 10vw; height: 10vw; margin: 1vw; display: inline-block; overflow: hidden; } div.nanotouch.loaded { background: #9aff9a; border: 1px solid #4bff4b; } div.nanotouch.loaded.playing { background: #6aff6a; } div.nanotouch input[type=file] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.01; 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; }