Refactor CSS styles for improved layout and aesthetics; enhance body and h1 styles, update image container properties, and adjust image display settings

public/style.css

@@ -1,6 +1,18 @@
-body { font-family: Arial, sans-serif; text-align: center; margin: 0; padding: 0; }
+body {
+  font-family: Arial, sans-serif;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #1f1f22 0%, #232a33 100%);
+  color: #e0e0e0;
+}
 
-h1 { margin-top: 1.5rem; }
+h1 {
+  margin-top: 1.5rem;
+  color: #e0e6f0;
+  letter-spacing: 1px;
+}
 
 
 #gallery {
@@ -18,19 +30,18 @@ h1 { margin-top: 1.5rem; }
 .image-container {
   width: 200px;
   aspect-ratio: 1 / 1;
-  background: #fafafa;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
+  background: transparent;
+  border-radius: 12px;
   transition: transform 0.15s;
   position: relative;
   overflow: hidden;
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .image-container:hover {
   transform: scale(1.04);
-  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
 }
 
 .copy-btn {
@@ -54,9 +65,13 @@ h1 { margin-top: 1.5rem; }
 }
 
 .image-container img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 8px 8px 0 0;
+  max-width: 90%;
+  max-height: 90%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  border-radius: 8px;
   display: block;
+  margin: auto;
+  background: transparent;
 }