WIP: minor css tweaks

src/main.css

@@ -1,14 +1,25 @@
 @import url(https://fonts.googleapis.com/css?family=Roboto:300);
 @import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);
 
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
 body {
+	height: 100vh;
+	margin: 0;
+	padding: 2rem;
 	background-color: gray;
 	font-family: "Roboto", sans-serif;
 }
 
 .container {
-	max-width: 800px;
-	margin: 0 auto;
+	max-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }
 
 header {
@@ -17,19 +28,19 @@ header {
 }
 
 .video-wrapper {
-	margin-top: 20px;
-	position: relative;
-	width: 100%;
-	padding-bottom: 56.25%;
+	/*position: relative;*/
+	/*width: 100%;*/
+	/*padding-bottom: 56.25%;*/
 	/* 16:9 aspect ratio for responsive video */
 }
 
 video {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	top: 0;
-	left: 0;
+	/*height:;*/
+	max-width: 100%;
+	/*max-height: 400px;*/
+	/*position: absolute;*/
+	/*top: 0;*/
+	/*left: 0;*/
 	border-radius: 10px;
 	border: 2px solid black;
 }
@@ -43,13 +54,14 @@ video {
 }
 
 .subtitle-controls label {
+	width: 400px;
 	font-size: 1rem;
 	margin-bottom: 5px;
 }
 
 #subtitle-size {
 	width: 80%;
-	max-width: 300px;
+	max-width: 400px;
 }
 
 ::cue {

src/main.html

@@ -22,7 +22,7 @@
 			</div>
       <div class="subtitle-controls">
         <label for="subtitle-size">Subtitle Size: <span id="size-value">1.25em</span></label>
-        <input type="range" id="subtitle-size" min="0.8" max="2.5" step="0.1" value="1.25">
+        <input type="range" id="subtitle-size" min="0.8" max="2.5" step="0.05" value="1.25">
       </div>
 		</div>
 	</body>