Update styles.css

styles.css

@@ -2,19 +2,20 @@ body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     margin: 0;
     padding: 0;
-    background-color: #1e1e1e;
-    color: white;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
-    overflow: hidden;
+    background-color: #1e1e1e;
+    color: white;
 }
 
 #app {
     width: 100%;
     max-width: 800px;
-    background: #1e1e1e;
+    background: #2c2c2c;
+    border-radius: 8px;
+    overflow: hidden;
     display: flex;
     flex-direction: column;
     height: 100vh;
@@ -25,7 +26,7 @@ header {
     color: white;
     padding: 1rem;
     text-align: center;
-    border-bottom: 1px solid #333;
+    border-bottom: 1px solid #444;
 }
 
 main {
@@ -46,12 +47,7 @@ main {
     justify-content: center;
     text-align: center;
     cursor: pointer;
-    background: linear-gradient(135deg, #ff6b6b, #f06595);
-    transition: transform 0.3s;
-}
-
-.grid-item:hover {
-    transform: scale(1.05);
+    background: var(--gradient);
 }
 
 .grid-item img {
@@ -61,28 +57,15 @@ main {
 }
 
 .grid-item h2 {
-    font-size: 1rem;
+    font-size: 1.25rem;
     margin: 0;
 }
 
-.hidden {
-    display: none;
-}
-
-.detail-view {
-    padding: 1rem;
-}
-
-.detail-view img {
-    width: 100%;
-    margin-bottom: 1rem;
-}
-
 footer {
-    background: #1e1e1e;
+    background: #333;
     padding: 1rem;
     text-align: center;
-    border-top: 1px solid #333;
+    border-top: 1px solid #444;
 }
 
 button {