Data-binding implementation

css/style.css

@@ -4,10 +4,28 @@ body {
     font-size: 3vh;
 }
 
-button {
+br {
+    clear: both;
+}
+
+label {
+    display: block;
+}
+
+label > div, input {
+    float: left;
+    width: 40vw;
+}
+
+
+button, input {
     font-size: 3vh;
 }
 
+input {
+    padding: 1px;
+}
+
 pre {
     background-color: black;
     overflow-x: auto;
@@ -44,17 +62,21 @@ slide-deck img.expandable:hover {
     body {
         font-size: 14px;
     }
-    button {
+    button, input {
         font-size: 14px;
     }
+
+    label > div, input {
+        width: 90vw;
+    }
 }
 
 @media only screen and (max-width: 1200px) {
     body {
         font-size: 2vh;
     }
-    button {
-        font-size: 14px;
+    button, input {
+        font-size: 2vh;
     }
 }
 
@@ -98,7 +120,7 @@ img {
     text-align: center;
 }
 
-slide-deck div {
+slide-deck > div {
     height: 80vh;
     padding: 1em;
 }
@@ -116,7 +138,7 @@ slide-deck div {
     .left {
         text-align: center;
     }
-    slide-deck div {
+    slide-deck > div {
         height: 75vh;
     }
 }