use instant.io as starting point

index.css

@@ -1,27 +1,103 @@
+.clearfix:before,
+.clearfix:after {
+  content: '';
+  display: table
+}
+.clearfix:after {
+  clear: both
+}
+.drag-layer {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+}
+body.drag .drag-layer {
+  display: block
+}
+*,
+*:after,
+*:before {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box
+}
 html,
 body {
-	padding: 0;
-	margin: 0;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow: auto;
+  font-family: -apple-system, 'Helvetica Neue', Helvetica, sans-serif;
 }
-
 body {
-	font-family: -apple-system, 'Helvetica Neue', Helvetica, sans-serif;
+    font-family: sans-serif;
 }
-
-header {
-	position: absolute;
-	width: 500px;
-	height: 250px;
-	top: 50%;
-	left: 50%;
-	margin-top: -125px;
-	margin-left: -250px;
-	text-align: center;
+body.drag::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(255, 0, 0, 0.3);
+    border: 5px #f00 dashed;
 }
-
-header h1 {
-	font-size: 60px;
-	font-weight: 100;
-	margin: 0;
-	padding: 0;
+main {
+  margin: 20px;
+}
+label {
+  margin-right: 10px;
+}
+input,
+button {
+  font-size: 16px;
+}
+input[name=torrentId] {
+  width: 400px;
+}
+.log,
+.speed {
+  font-family: monospace;
+  font-size: 14px;
+}
+.speed:not(:empty) {
+  padding: 20px;
+  margin: 10px 0;
+  background: #eee;
+}
+.log p {
+  margin: 0;
+}
+footer {
+  font-size: .8em;
+  margin: 30px 0;
+}
+video,
+img,
+audio,
+iframe {
+  display: block;
+}
+video,
+img,
+audio {
+  max-width: 100%;
+  margin: 10px 0;
+}
+video {
+  min-width: 480px;
+  min-height: 270px;
+}
+audio {
+  width: 100%;
+  height: 50px;
+}
+iframe {
+  width: 1000px;
+  max-width: 100%;
+  height: 600px;
 }