changing styles

nginx/vue/public/css/styles.css

@@ -37,18 +37,20 @@
     --portal_light_blue: #00a2ff;
 
     /* MAIN COLORS */
-    --primary: #fff;
+    --primary: #000;
     --secondary: #000;
     --tertiary: #5a6952;
     --quaternary: #424542;
 
     /* BACKGROUND COLORS */
     --bg-body: #111;
-    --bg_primary: #244;
+    --bg_primary: #fff;
     --bg_secondary: #444;
     --bg_tertiary: #666;
     --bg_quaternary: #888;
 
+    --margin: 3px;
+
     /* FONTS USED */
     --font-heading: big_noodle_titling;
     --font-text: CreatoDisplay;
@@ -67,7 +69,7 @@ a {
     text-decoration: none;
     padding: 0px;
     margin: 0px;
-    background-color: var(--bg_secondary);
+    background-color: var(--bg_primary);
 }
 
 h1,
@@ -76,10 +78,12 @@ h3,
 h4 {
     color: var(--primary);
     font-family: var(--font-heading);
+    margin: var(--margin);
 }
 
 p {
     color: var(--secondary);
+    margin: var(--margin);
 }
 
 video {
@@ -93,18 +97,11 @@ button {
 
 table {
     border: 1px solid var(--primary);
-}
-
-th {
-    border: 1px solid var(--primary);
+    border-collapse: collapse;
 }
 
 tr {
-    border: 1px solid var(--primary);
-}
-
-td {
-    border: 1px solid var(--primary);
+    border-bottom: 1px solid var(--primary);
 }
 
 /* END OF ELEMENTS */
@@ -233,8 +230,7 @@ td {
 /* SIZING */
 
 .fill {
-    width: 100%;
-    height: 100%;
+    flex: 1;
     box-sizing: border-box;
 }
 
@@ -261,15 +257,20 @@ td {
     margin: 0px;
 }
 
+.scroll {
+    overflow: scroll;
+}
+
 .flex {
     display: flex;
+    padding: 2px;
 }
 
 .flex-col {
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
-    margin: 0px;
+    padding: 2px;
 }
 
 .floating {