video controls

static/main.css

@@ -36,7 +36,8 @@ textarea,
 .button,
 .area,
 form,
-.video {
+.video,
+.controls {
     border: solid var(--dark-2) 3px;
     border-radius: 5px;
 
@@ -45,6 +46,11 @@ form,
     margin-bottom: 0.5rem;
 }
 
+video {
+    border: solid var(--dark-2) 3px;
+    border-radius: 5px;
+}
+
 form span {
     font-weight: bold;
 }
@@ -77,7 +83,7 @@ form {
     font-style: italic;
 }
 
-#main-content {
+.main-content {
     width: 720px;
 }
 
@@ -115,7 +121,8 @@ form {
 }
 
 video {
-    width: 690px;
+    width: 900px;
+    max-width: 90vw;
 }
 
 .video img {
@@ -135,6 +142,12 @@ video {
     justify-content: space-around;
 }
 
+.controls {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
 .videos a {
     color: var(--dark-1);
 }
@@ -143,7 +156,7 @@ textarea {
     display: block;
 }
 
-#progressbar {
+.progressbar {
     background-color: var(--light-1);
     border: solid var(--dark-2) 2px;
     border-radius: 13px;
@@ -151,12 +164,25 @@ textarea {
     margin: 0;
     position: relative;
     top: -40px;
-    width: 680px;
+    width: 893px;
+    max-width: 89vw;
 }
 
-#progressbar>div {
+.progressbar>div {
     background-color: var(--light-2);
     width: 40%;
     height: 20px;
     border-radius: 10px;
+}
+
+.controls {
+    margin-top: -30px;
+}
+
+.controls img {
+    width: 45px;
+}
+
+img.dark {
+    filter: invert(1);
 }