Add initial styles for layout and components

Author: NovaDev404

web/styles.css

@@ -0,0 +1,72 @@
+
+      html, body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+      }
+
+      main {
+        height: 98dvh;
+        width: 98dvw;
+        background-color: whitesmoke;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        border-radius: 3dvw;
+        overflow: hidden;
+        display: flex;
+        flex-direction: row;
+      }
+
+      .header-bar {
+        background-color: gray;
+        height: 5dvh;
+        width: 100%;
+        border-top-left-radius: 3dvw;
+        border-top-right-radius: 3dvw;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+
+      .app-title {
+        margin-left: 2dvw;
+        font-family: "Aptos", "Arial", sans-serif;
+        font-weight: bold;
+        font-size: 4dvh;
+      }
+
+      .dot-container {
+        display: flex;
+        align-items: center;
+        gap: 1dvw;
+        padding-right: 1.5dvw;
+      }
+
+      .dot {
+        height: 3.2dvh;
+        width: 3.2dvh;
+        border-radius: 50%;
+      }
+
+      .sidebar {
+        background-color: #e5e5e5;
+        width: 20dvw;
+        height: 100%;
+        padding-top: 7dvh;
+        display: flex;
+        flex-direction: column;
+        font-family: "Aptos", "Arial", sans-serif;
+        font-size: 2.5dvh;
+        gap: 3dvh;
+        padding-left: 2dvw;
+      }
+
+      .sidebar-item {
+        cursor: pointer;
+        background-color: grey;
+      }