Update .gitignore to remove public/ and *.css entries; add new styles.css file for improved layout and design. The new CSS file includes styles for body, image container, images, descriptions, and navigation elements, enhancing the overall user interface.

.gitignore

@@ -1,10 +1,8 @@
 node_modules
 dist
 build
-public/
 images/
 *.html
-*.css
 *.png
 *.jpg
 *.jpeg

public/styles.css

@@ -0,0 +1,76 @@
+body {
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    background: #000;
+    font-family: "Courier New", Courier, monospace;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.image-container {
+    position: relative;
+    height: 100vh;
+    width: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+img {
+    height: 100vh;
+    width: auto;
+    display: block;
+    position: relative;
+}
+
+@media (max-aspect-ratio: 1/1) {
+    img {
+        height: auto;
+        width: 100vw;
+    }
+}
+
+.description {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    max-width: 80%;
+    text-align: left;
+    mix-blend-mode: hard-light;
+    color: white;
+    margin: 0;
+    font-size: 16px;
+    letter-spacing: 0.5px;
+    line-height: 1.4;
+    opacity: 0.7;
+}
+
+.navigation {
+    position: fixed;
+    bottom: 50%;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 40px;
+    pointer-events: none;
+}
+
+.navigation a {
+    text-decoration: none;
+    color: white;
+    mix-blend-mode: difference;
+    font-size: 24px;
+    pointer-events: auto;
+    opacity: 0.7;
+    transition: opacity 0.3s ease;
+    padding: 20px;
+}
+
+.navigation a:hover {
+    opacity: 1;
+}