responsive dashboard structure

assets/dashboard.css

@@ -0,0 +1,62 @@
+body {
+  background-color: #111526;
+  margin: 0;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: minmax(200px, 1fr) 2fr 1.5fr;
+  gap: 20px;
+}
+
+#sidebar {
+  background-color: #171b2e;
+  height: 100vh;
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+}
+
+.left_container {
+  display: grid;
+  grid-template-rows: 200px 450px 230px;
+  gap: 20px;
+  padding-top: 20px;
+}
+
+#top_container,
+#mid_container,
+#bottom_container {
+  background-color: #bb69f4;
+  border-radius: 20px;
+  width: 100%;
+}
+
+.right_container {
+  display: grid;
+  grid-template-rows: 450px 450px;
+  gap: 20px;
+  padding-top: 20px;
+  padding-right: 20px;
+}
+
+.right_box {
+  background-color: #bb69f4;
+  border-radius: 20px;
+  width: 100%;
+}
+
+@media (max-width: 1000px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  #sidebar {
+    display: none;
+    height: 150px;
+    border-radius: 20px;
+    width: 100%;
+  }
+}

assets/login.css

@@ -16,6 +16,7 @@
     height: 100%;
     object-fit: cover;
     z-index: -1;
+    user-select: none;
 }
 
 #login_container {
@@ -57,12 +58,16 @@ h1 {
 }
 
 button {
+    border: none;
+    outline: none;
+    background-color: white;
     display: block;
     margin-top: 20px;
     margin-left: auto;
     margin-right: auto;
     width: max-content;
-    padding: 8px;
-    padding-left: 18px;
-    padding-right: 18px;
+    padding: 10px;
+    padding-left: 20px;
+    padding-right: 20px;
+    border-radius: 8px;
 }