Update styles.css

styles.css

@@ -6,16 +6,19 @@ body {
     justify-content: center;
     align-items: center;
     height: 100vh;
-    background-color: #f0f0f0;
+    background-color: #1e1e1e;
+    color: white;
 }
 
 #app {
-    width: 80%;
+    width: 90%;
     max-width: 800px;
-    background: white;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    background: #2c2c2c;
     border-radius: 8px;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
 }
 
 header {
@@ -25,14 +28,52 @@ header {
     text-align: center;
 }
 
-.list-item {
+main {
+    flex: 1;
+    overflow-y: auto;
     padding: 1rem;
-    border-bottom: 1px solid #e0e0e0;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 1rem;
+}
+
+.grid-item {
+    padding: 1rem;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
     cursor: pointer;
+    background: linear-gradient(135deg, #ff6b6b, #f06595);
+}
+
+.grid-item:nth-child(2n) {
+    background: linear-gradient(135deg, #51cf66, #20c997);
 }
 
-.list-item:hover {
-    background-color: #f9f9f9;
+.grid-item:nth-child(3n) {
+    background: linear-gradient(135deg, #339af0, #5c7cfa);
+}
+
+.grid-item:nth-child(4n) {
+    background: linear-gradient(135deg, #fcc419, #fab005);
+}
+
+.grid-item:hover {
+    opacity: 0.9;
+}
+
+.grid-item img {
+    width: 50px;
+    height: 50px;
+    margin-bottom: 1rem;
+}
+
+.grid-item h2 {
+    font-size: 1.25rem;
+    margin: 0;
 }
 
 .detail-view {
@@ -56,4 +97,10 @@ button {
 
 button:hover {
     background-color: #005bb5;
+}
+
+footer {
+    background: #333;
+    padding: 1rem;
+    text-align: center;
 }