Add basic CSS styling

assets/css/main.scss

@@ -0,0 +1,3 @@
+@use './parts/_page.scss';
+@use './parts/_albums.scss';
+

assets/css/parts/_albums.scss

@@ -0,0 +1,64 @@
+@use './_responsive.scss' as r;
+
+.subalbums {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 300px));
+    gap: 15px;
+
+    .subalbum {
+        border: 1px solid lightgray;
+        border-radius: 10px;
+        padding: 5px;
+        display: flex;
+        flex-direction: column;
+
+        .teaser {
+            flex: 0 0 200px;
+            height: 200px;
+            // background-color: lightgray;
+            border-radius: 10px;
+
+            display: flex;
+            justify-content: center;
+
+            img {
+                max-width: 100%;
+                max-height: 100%;
+            }
+        }
+
+        .title {
+            flex: auto 1 0;
+            text-align: center;
+        }
+    }
+}
+
+.breadcrumbs {
+    margin: 10px 0;
+}
+
+.images {
+    margin: 10px 0;
+
+    .download {
+        margin: 10px 0 20px;
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+
+        .button {
+            background-color: #7181e3;
+            color: black;
+            padding: 10px 25px;
+            border-radius: 10px;
+            font-weight: bold;
+            text-decoration: none;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+}

assets/css/parts/_page.scss

@@ -0,0 +1,71 @@
+@use './_responsive.scss' as r;
+
+body {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 10px;
+    box-sizing: border-box;
+    min-height: 100vh;
+    color: white;
+}
+
+.page-background {
+    z-index: -1;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    
+    background-image: url('../img/bg/bg.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+}
+
+a {
+    color: white;
+}
+
+.header, .footer {
+    flex: auto 0 0;
+
+    h1 {
+        margin: 20px 10px;
+    }
+}
+
+.main {
+    flex: 1 0 auto;
+    @include r.desktop {
+        max-width: 1280px;
+        width: 100%;
+        margin: 0 auto;
+    }
+}
+
+.footer {
+    display: flex;
+    justify-content: center;
+    gap: 30px;
+    font-size: smaller;
+
+    border-top: 1px solid white;
+    margin-top: 10px;
+    padding: 10px 0;
+
+    p {
+        margin: 0;
+    }
+}
+
+.header {
+    border-bottom: 1px solid white;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+}
+
+.header a {
+    text-decoration: none;
+}

assets/css/parts/_responsive.scss

@@ -0,0 +1,11 @@
+@mixin responsive-min-width($width) {
+    @media screen and (min-width: $width) {
+        @content;
+    }
+}
+
+@mixin desktop {
+    @include responsive-min-width(1024px) {
+        @content;
+    }
+}