Update main.css

styles/main.css

@@ -52,12 +52,12 @@ body {
 .toolbar-item {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 4px;
 }
 
 .toolbar-item label {
     cursor: pointer;
-    font-size: 16px;
+    font-size: 14px;
 }
 
 .toolbar-item input[type=file] {
@@ -69,9 +69,11 @@ body {
     border: none;
     color: var(--button-text-color);
     cursor: pointer;
-    font-size: 16px;
+    font-size: 12px;
     font-weight: 600;
-    padding: 8px 16px;
+    padding: 6px 12px;
+    border-radius: 4px;
+    transition: background 0.3s;
 }
 .toolbar-item button:hover {
     background: var(--button-hover-color);
@@ -98,14 +100,14 @@ body {
 }
 
 .toolbar-item-controls button {
-    font-size: 12px;
-    padding: 4px 10px;
+    font-size: 10px; 
+    padding: 4px 8px;
 }
 
 .toolbar-filename-label {
     color: var(--text-faint-color);
     cursor: help;
-    font-size: 14px;
+    font-size: 12px;
     text-align: right;
 }
 
@@ -129,6 +131,8 @@ body {
 /* CANVAS STYLING. */
 
 .canvas-container {
+    width: 960px; 
+    height: 540px;
     max-height: 540px;
     aspect-ratio: 16 / 9;
 }
@@ -137,3 +141,27 @@ body {
     width: 100%;
     height: 100%;
 }
+
+/* MEDIA QUERIES FOR RESPONSIVENESS. */
+
+@media (max-width: 768px) {
+    .content {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .toolbar {
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+    
+    .toolbar-item {
+        flex: 1 1 100%;
+    }
+    
+    .toolbar-item--oneline {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}