1 files changed, 97 insertions, 0 deletions
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..5ab2f7e
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,97 @@
+/* Base layout and typography */
+body {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    background-color: #121212;
+    color: #e0e0e0;
+    margin: 0;
+    padding: 20px;
+}
+
+h1 {
+    font-size: 48px;
+    margin-bottom: 30px;
+}
+
+h2 {
+    font-size: 1.5rem;
+    font-weight: 500;
+    color: #ffffff;
+    border-bottom: 1px solid #333;
+    margin-top: 40px;
+    padding-bottom: 8px;
+}
+
+/* Flexible, wrap-aligned image gallery */
+.gallery {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    align-items: flex-start;
+}
+
+/* Gallery item constrains to image width */
+.gallery-item {
+    display: inline-block;
+    margin: 0;
+    box-sizing: border-box;
+    overflow: hidden;
+    vertical-align: top;
+}
+
+/* Image: fixed height, natural width */
+.gallery-item img {
+    display: block;
+    height: 200px;
+    width: auto;
+    max-width: 100vw;
+    object-fit: cover;
+    transition: transform 0.2s ease-in-out;
+}
+
+/* Description: match image width */
+.gallery-item p {
+    margin: 8px 0 0;
+    font-size: 0.85rem;
+    color: #aaaaaa;
+    line-height: 1.4;
+    max-width: 100%;
+    white-space: normal;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    display: block;
+}
+
+/* Hover effect */
+.gallery-item img:hover {
+    transform: scale(1.03);
+}
+
+/* Mobile: full width per row */
+@media (max-width: 600px) {
+    body {
+        padding: 12px;
+    }
+
+    h2 {
+        font-size: 1.2rem;
+    }
+
+    .gallery {
+        flex-direction: column;
+        gap: 12px;
+    }
+
+    .gallery-item {
+        width: 100%;
+    }
+
+    .gallery-item img {
+        width: 100%;
+        height: auto;
+        //max-height: 300px;
+    }
+
+    .gallery-item p {
+        padding: 0 8px 8px;
+    }
+}