Update styles.css

Author: NovaDev404

web/styles.css

@@ -1,75 +1,75 @@
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
 
-      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;
+}
 
-      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;
+}
 
-      .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;
+}
 
-      .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-container {
-        display: flex;
-        align-items: center;
-        gap: 1dvw;
-        padding-right: 1.5dvw;
-      }
+.dot {
+  height: 3.2dvh;
+  width: 3.2dvh;
+  border-radius: 50%;
+}
 
-      .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;
+  gap: 3dvh;
+}
 
-      .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: skyblue;
-        width: 100%;
-        margin: 0;
-        height: 5dvh;
-      }
+.sidebar-item {
+  cursor: pointer;
+  background-color: skyblue;
+  height: 5dvh;
+  width: 100%;
+  padding-left: 2dvw;
+  display: flex;
+  align-items: center;
+  font-size: clamp(1.6dvh, 2.2dvh, 3dvh);
+}