added subtitle to main page

src/routes/+layout.svelte

@@ -97,6 +97,13 @@
         font-style: normal;
     }
 
+    @font-face {
+        font-family: "LIGHTYEARS";
+        src: url("/fonts/lightyears.woff2");
+        font-weight: 400;
+        font-style: normal;
+    }
+
     /* OpenMoji */
     @font-face {
     font-family: "OpenMoji";
@@ -154,6 +161,8 @@
             --font-mono: 'Kode Mono', 'OpenMoji', monospace;
             --font-size-mono: 0.9em;
 
+            --font-lightyears: 'LIGHTYEARS', sans-serif;
+
             --font-size-h1: 2.0rem;
             --font-size-h2: 1.5rem;
             --font-size-h3: 1.3rem;
@@ -331,6 +340,10 @@
             border: var(--border-dash-size) var(--border-style) var(--color-highlight); */
         }
 
+        .lightyears-text {
+            font-family: var(--font-lightyears);
+        }
+
         .horizontally-centre-aligned {
             width: var(--media-width);
             display: flex;

src/routes/+page.svelte

@@ -71,10 +71,12 @@
 
 <Content>
     <h1 class="gradient-title"><i>Moin!</i> ~ welcome to my website :)</h1>
+    <p class="page-subtitle gradient-title lightyears-text">you can change the world from your bedroom!</p>
 
     <hr>
 
     <div>
+
         <img class="me-img pixelated-img" src="me.webp" alt="Pixelated mirror selfie of the website creator wearing a green shirt, fitting the website theme. The face is obscured." title="hi!">
 
         <p>Hi! I'm Deniz. Welcome to my website! I keep rewriting this introduction but I'm REALLY bad at this type of stuff.</p>
@@ -243,6 +245,11 @@
         background-clip: text;
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
-        padding-bottom: 12px;
+    }
+
+    .page-subtitle {
+        /* padding-bottom: 12px; */
+        width: fit-content;
+        margin: 4px 0 12px 0;
     }
 </style>