UI updates

static/main.css

@@ -8,7 +8,6 @@ body {
     align-items: center;
 
     overflow-y: auto;
-
 }
 
 :root {
@@ -41,6 +40,7 @@ form,
 .comment {
     border: solid var(--dark-2) 3px;
     border-radius: 5px;
+    background: var(--light-1);
 
     font-size: 1rem;
     padding: 0.5rem;
@@ -50,6 +50,21 @@ form,
 video {
     border: solid var(--dark-2) 3px;
     border-radius: 5px;
+    width: 900px;
+    max-width: 90vmin;
+}
+
+.full video {
+    width: 100vw;
+    height: 80vh;
+    max-width: none;
+    border: none;
+}
+
+.full .progressbar  {
+    width: 95vw;
+    max-width: 95vw;
+    margin: auto;
 }
 
 form span {
@@ -124,20 +139,15 @@ form {
     height: 2em;
 }
 
-video {
-    width: 900px;
-    max-width: 90vmin;
-}
-
 .video img {
-    width: 190px;
-    height: 150px;
-    margin-left: 5px;
+    width: 180px;
+    height: 130px;
 }
 
 .video {
-    width: 200px;
+    width: 180px;
     height: 200px;
+    overflow-y: auto;
 }
 
 .videos {
@@ -151,6 +161,7 @@ video {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
+    align-items: center;
 }
 
 .videos a {
@@ -186,6 +197,16 @@ textarea {
 
 .controls img {
     width: 45px;
+    margin: 5px;
+}
+
+.video-wrapper.full {
+    background: rgba(0,0,0,0.5);
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    left: 0;
 }
 
 img.dark {