changed up the styling a bit

styles/dashboard.css

@@ -54,4 +54,46 @@
     background: none;
     border:none;
     cursor:pointer;
+}
+
+@media only screen and (max-width: 768px) {
+    #main {
+        margin: 0;
+        width: 100%;
+        height: 100vh;
+        overflow-y: visible;
+    }
+
+    #container {
+        text-align: center;
+        border-radius: 0;
+        box-shadow: none;
+
+        overflow-y: scroll !important;
+    }
+
+    #grid {
+        width: 65%;
+        height: fit-content;
+        display: grid;
+        grid-template-columns: 100%;
+        grid-auto-rows: 200px;
+        gap:10px !important;
+    }
+
+    .grid-btn {
+        width: 100% !important;
+        height: 100% !important;
+    }
+}
+
+@media only screen and (max-width: 768px) and (min-width: 500px) {
+    #grid {
+        width: 50%;
+        height: fit-content;
+        display: grid;
+        grid-template-columns: 100%;
+        grid-auto-rows: 200px;
+        gap:10px !important;
+    }
 }

styles/login.css

@@ -3,11 +3,13 @@ body {
     align-items: center;
     justify-content: center;
     height: 100vh;
-    background: var(--discord-blue);
+    background: url("./background.png");
+    background-position: center;
+    background-size: cover;
 }
 
 .login-container {
-    background-color: var(--dark-gray);
+    background-color: var(--medium-gray);
     border-radius: 8px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
     padding: 30px;
@@ -48,5 +50,5 @@ button {
 }
 
 button:hover {
-    background-color: var(--medium-gray);
+    background-color: var(--dark-steel);
 }

styles/project.css

@@ -63,4 +63,51 @@
 #editProjectName,
 #exportProject {
     color: black !important;
+}
+
+
+
+@media only screen and (max-width: 768px) {
+    #main {
+        margin: 0;
+        width: 100%;
+        height: 100vh;
+        overflow-y: visible;
+    }
+    #title {
+        font-size: 8vw;
+    }
+
+    #container {
+        text-align: center;
+        border-radius: 0;
+        box-shadow: none;
+
+        overflow-y: scroll !important;
+    }
+
+    #grid {
+        width: 65%;
+        height: fit-content;
+        display: grid;
+        grid-template-columns: 100%;
+        grid-auto-rows: 200px;
+        gap:10px !important;
+    }
+
+    .grid-btn {
+        width: 100% !important;
+        height: 100% !important;
+    }
+}
+
+@media only screen and (max-width: 768px) and (min-width: 500px) {
+    #grid {
+        width: 50%;
+        height: fit-content;
+        display: grid;
+        grid-template-columns: 100%;
+        grid-auto-rows: 200px;
+        gap:10px !important;
+    }
 }

styles/public.css

@@ -14,7 +14,7 @@
 
 body {
     height: 100vh !important;
-    background: var(--discord-blue);
+    background: url("./background.png");
     overflow: hidden;
 }