Style video and text

src/scss/mediaoverlay.scss

@@ -259,15 +259,27 @@ $header-inset: 10px;
   flex-direction: row;
   height: 100%;
   transition: transform 0.6s ease 0s;
+  width: 100%;
   // min-width: $panel-width - 30px;
   // min-height: $panel-height;
 }
 
 .source-text-container {
-  padding: 0 10em;
+  padding: 20px;
   display: flex;
   justify-content: center;
-  align-items: center;
+  background: $lightwhite;
+  box-sizing: border-box;
+  padding: 0 calc(50% - 400px);
+  overflow-y: scroll;
+  font-family: 'Merriweather', Georgia, serif;
+  line-height: 1.5em;
+
+  a {
+    color: $darkgrey;
+    border-bottom: 1px solid $red;
+    &:hover { border-bottom: 1px solid $darkgrey; color: $darkgrey; }
+  }
 }
 
 .source-image-container, .media-player {
@@ -281,12 +293,29 @@ $header-inset: 10px;
   border-radius: 2px;
 }
 
+.media-player {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  padding: 20px 10%;
+  align-self: center;  
+}
+
 .source-image, .source-video {
   max-width: calc(100% - 20px);
   max-height: calc(100% - 20px);
-  padding: 10px;
+  padding: 0px;
+  font-family: 'Lato', Helvetica, sans-serif;
 }
 
-.media-player {
-  // overflow-y: hidden;
+.video-react .video-react-progress-control {
+  align-self: center;
 }
+
+.video-react .video-react-control {
+  min-height: 100%;
+}

yarn.lock

@@ -5062,6 +5062,7 @@ quick-lru@^1.0.0:
 ramda@^0.26.1:
   version "0.26.1"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
+  integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==
 
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   version "2.0.6"