fixed

public/css/Root.css

@@ -1,67 +1,78 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400,500,600,700&display=swap');
 
 :root {
-    --body-bg: radial-gradient(#393939, #000000);
-    --border: 0.5px solid rgb(255 255 255 / 32%);
-    --border-radius: 1rem;
+    /* Red Color Scheme from 404 page */
+    --primary-red: #e53935;
+    --dark-red: #c62828;
+    --light-red: #ff5252;
+    --accent-red: #ff8a80;
+    
+    /* Background and text colors */
+    --body-bg: linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%);
+    --border: 1px solid rgba(229, 57, 53, 0.2);
+    --border-radius: 8px;
+    
+    /* Main containers */
     --msger-width: 800px;
     --msger-height: 700px;
     --msger-bubble-width: 85%;
-    --msger-bg: radial-gradient(#393939, #000000);
+    --msger-bg: #ffffff;
+    --box-shadow: 0 8px 32px rgba(229, 57, 53, 0.1);
+    
+    /* Whiteboard */
     --wb-width: 800px;
     --wb-height: 600px;
-    --wb-bg: radial-gradient(#393939, #000000);
-    --select-bg: #2c2c2c;
-    --left-msg-bg: #252d31;
-    --right-msg-bg: #056162;
-    --private-msg-bg: #6b1226;
-    --box-shadow: 0px 8px 16px 0px rgb(0 0 0);
-    --btns-hover-scale: scale(1.1);
-    --settings-bg: radial-gradient(#393939, #000000);
-    --tab-btn-active: rgb(42 42 42 / 70%);
-    --btns-bg-color: rgba(0, 0, 0, 0.7);
-    /* buttons bar horizontal */
+    --wb-bg: #ffffff;
+    
+    /* Selection and messages */
+    --select-bg: #f8f9fa;
+    --left-msg-bg: #f1f3f4;
+    --right-msg-bg: var(--primary-red);
+    --private-msg-bg: var(--dark-red);
+    
+    /* Buttons and interactive elements */
+    --btns-bg-color: var(--primary-red);
+    --btns-hover-scale: scale(1.05);
+    --settings-bg: #ffffff;
+    --tab-btn-active: rgba(229, 57, 53, 0.1);
+    
+    /* Button bars positioning */
     --btns-top: 50%;
     --btns-right: 0%;
-    --btns-left: 10px;
+    --btns-left: 20px;
     --btns-margin-left: 0px;
     --btns-width: 60px;
     --btns-flex-direction: column;
-    /* buttons bar horizontal
-    --btns-top: 95%;
-    --btns-right: 25%;
-    --btns-left: 50%;
-    --btns-margin-left: -160px;
-    --btns-width: 320px;
-    --btns-flex-direction: row;
-    */
-    /* bottom buttons bar horizontal default */
+    
+    /* Bottom buttons bar */
     --bottom-btns-top: auto;
     --bottom-btns-left: 50%;
     --bottom-btns-bottom: 0;
     --bottom-btns-translate-X: -50%;
     --bottom-btns-translate-Y: 0%;
-    --bottom-btns-margin-bottom: 18px;
+    --bottom-btns-margin-bottom: 20px;
     --bottom-btns-flex-direction: row;
 
+    /* Transcription */
     --transcription-height: 680px;
     --transcription-width: 420px;
-    --trx-bg: radial-gradient(#393939, #000000);
+    --trx-bg: #ffffff;
 
+    /* Editor */
     --editor-container-width: 100%;
     --editor-container-height: 100%;
     --editor-height: 85vh;
 
+    /* Video */
     --vmi-wh: 15vw;
-    /* https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */
     --videoObjFit: cover;
+    --videoBar-active: 2px solid var(--primary-red);
 
-    --dd-color: #ffffff;
-
-    --videoBar-active: 1px solid rgba(102, 190, 255, 0.32);
+    /* Dropdown and text */
+    --dd-color: #333333;
 }
 
 * {
     outline: none;
-    font-family: 'Montserrat';
-}
+    font-family: 'IBM Plex Sans', sans-serif;
+}