Fix alignment of video control bar

app/assets/stylesheets/thyme.scss

@@ -1,4 +1,3 @@
-
 #thyme-container {
   position: absolute;
   top: 0;
@@ -8,7 +7,7 @@
 }
 
 #editor-container {
-  height:100vh;
+  height: 100vh;
   width: 100vw;
 }
 
@@ -33,13 +32,14 @@
 
 #hypervideo-container figcaption {
   position: absolute;
-  right: 0; top: 0;
+  right: 0;
+  top: 0;
   background: white;
   width: 18%;
   font-size: .8rem;
   color: #666;
   height: 100%;
-	outline: 0;
+  outline: 0;
 }
 
 #hypervideo-container figcaption ol {
@@ -63,17 +63,19 @@
 }
 
 #video-controls {
-  position: relative;
-  display: inline-block;
-  height: 30px;
-  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  height: 2.5em;
+  padding: inherit;
 }
 
 
 #timeline {
   position: absolute;
   display: flex;
   width: 50%;
+  padding-left: inherit;
 }
 
 #current-time {
@@ -97,8 +99,7 @@
   left: 52%;
 }
 
-.clickable
-{
+.clickable {
   cursor: pointer;
 }
 
@@ -165,11 +166,11 @@
   transition: .4s;
 }
 
-input:focus + .slider {
+input:focus+.slider {
   box-shadow: 0 0 1px #2196F3;
 }
 
-input:checked + .slider:before {
+input:checked+.slider:before {
   transform: translateX(13px);
 }
 
@@ -183,21 +184,21 @@ input:checked + .slider:before {
 }
 
 #size-buttons {
+  display: flex;
   position: absolute;
   right: 0%;
+  padding-right: inherit;
 }
 
 input[type=range] {
   appearance: none;
   border-radius: 6px;
   height: 10px;
-  background-image: linear-gradient(
-    to right,
-    #2497E3,
-    #2497E3 0%,
-    #ffffff 0%,
-    #ffffff
-  );
+  background-image: linear-gradient(to right,
+      #2497E3,
+      #2497E3 0%,
+      #ffffff 0%,
+      #ffffff);
 }
 
 input[type="range"]::-moz-range-track {
@@ -269,6 +270,7 @@ figure {
   from {
     background: gold;
   }
+
   to {
     background: #fff;
   }
@@ -295,7 +297,8 @@ figure {
   padding: 3px;
 }
 
-.item:hover, .item:focus{
+.item:hover,
+.item:focus {
   background: #f0f0f0;
   cursor: pointer;
 }
@@ -362,7 +365,6 @@ figure {
   background: lightgrey;
 }
 
-:full-screen::backdrop
- {
-   background-color: black;
- }
+:full-screen::backdrop {
+  background-color: black;
+}