make scroll hint clickable

assets/scss/home.scss

@@ -36,19 +36,26 @@
     p {
         letter-spacing: 0.15rem;
     }
-    &::after {
-        content: "­☟";
+    #scroll-down {
         font-size: 4.8rem;
         position: absolute;
         bottom: 2rem;
         animation: 1s ease-in infinite alternate scrollDown;
         font-family: serif;
+        text-decoration: none;
+        color: var(--vriish-gradient-text);
+        transition: color 0.2s ease-in-out;
+
+        &:hover {
+            color: var(--vriish-gradient-text-hover);
         }
+
         @keyframes scrollDown {
             from { transform: translateY(0); }
             to { transform: translateY(1rem); }
         }
     }
+}
 
 main > p {
     font-family: "playfair";

assets/scss/main.scss

@@ -2,6 +2,7 @@
 	box-sizing: border-box;
 	scrollbar-color: var(--vriish-rose) var(--background);
 	scrollbar-width: thin;
+	scroll-behavior: smooth;
 	&::-webkit-scrollbar {
 		background: var(--background);
 		width: 6px;

assets/scss/variables.scss

@@ -45,6 +45,7 @@
 	--vriish-gradient: linear-gradient(-35deg, var(--primary-light-300) -50%, var(--primary-dark-300) 150%);
 	--vriish-gradient-shadow: 2px 2px 10px var(--background);
 	--vriish-gradient-text: var(--primary-light-950);
+	--vriish-gradient-text-hover: var(--primary-light-900);
 
 	--vriish-waves: 
 		radial-gradient(2.64rem at 50% calc(100% - 3.67rem),#000 99%,#0000 101%) calc(50% - 3rem) 0/6rem 100%,

layouts/index.html

@@ -7,11 +7,12 @@
 <header id="introduction" class="global-header">
     <h1>{{ i18n "introduction-heading" }}</h1>
     <p>{{ i18n "introduction-sub" }}</p>
+    <a href="#main" id="scroll-down">☟</a>
 </header>
 {{ end }}
 
 {{- define "main" }}
-    <main>
+    <main id="main">
         {{ .Content }}
     </main>
 {{- end }}