Improve subtitle positioning (#551)

Before this commit, we tweaked the subtitle position by modifying the
VTT file, line by line with a regex because I did not know it was
possible to use CSS for it.

But apparently there are Shadow DOM elements that we can use instead.

This new approach improves:

- Wrapping long lines. Before, the text would go off the edge of the
screen. Now it wraps intelligently.

- The subtitles move up to get out of the way of the controls when
those are visible.

renderer/index.css

@@ -837,15 +837,22 @@ body.drag .app::after {
   height: 14px;
 }
 
+/**
+ * Set the cue text position so it appears above the player controls.
+ */
+video::-webkit-media-text-track-container {
+  bottom: 60px;
+  transition: bottom 0.1s ease-out;
+}
+.app.hide-video-controls video::-webkit-media-text-track-container {
+  bottom: 30px;
+}
 ::cue {
   background: none;
   color: #FFF;
-  font: 24px;
-  line-height: 1.3em;
   text-shadow: #000 -1px 0 1px, #000 1px 0 1px, #000 0 -1px 1px, #000 0 1px 1px, rgba(50, 50, 50, 0.5) 2px 2px 0;
 }
 
-
 /*
  * CHROMECAST / AIRPLAY CONTROLS
  */