Add clounds on the bottom, and mess around with the navbar and change some stuff in the head tag.

assets/css/style.css

@@ -21,43 +21,72 @@ body {
 
 /* === NAVBAR ON THE RIGHT === */
 .navbar {
-  width: 100px;
-  background-color: #3c1a4d;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 2rem 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 20;
+	width: 140px;
+	background-color: #3c1a4d;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: center;
+	padding-top: 2rem;
+	padding-bottom: 2rem;
+	position: fixed;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	z-index: 20;
 }
 
 .navbar ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  width: 100%;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	width: 100%;
 }
 
 .navbar li {
-  width: 100%;
-  margin: 0.5rem 0;
+	width: 100%;
+	position: relative;
 }
 
 .navbar a {
-  display: block;
-  color: white;
-  text-decoration: none;
-  text-align: center;
-  padding: 0.75rem 0;
-  transition: background 0.2s ease;
+	display: block;
+	color: white;
+	text-decoration: none;
+	text-align: center;
+	padding: 0.75rem 0;
+	position: relative;
+	transition: background 0.2s ease, color 0.2s ease;
+}
+
+/* === Full-width divider lines === */
+.navbar a::before,
+.navbar a::after {
+	content: "";
+	display: block;
+	position: absolute;
+	left: 0;
+	width: 100%;
+	height: 1px;
+	background-color: rgba(255, 255, 255, 0.25);
+	transition: background-color 0.2s ease;
+}
+
+.navbar a::before {
+	top: 0;
+}
+
+.navbar a::after {
+	bottom: 0;
 }
 
 .navbar a:hover {
-  background-color: #5e2b7a;
+	background-color: #5e2b7a;
+	color: #fff5a8;
+}
+
+.navbar a:hover::before,
+.navbar a:hover::after {
+	background-color: #fff5a8;
 }
 
 /* === MAIN CONTENT === */
@@ -135,6 +164,25 @@ body {
   z-index: -9999;
 }
 
+.clouds {
+	position: fixed;
+	bottom: -70px;
+	left: 0;
+	width: 100%;
+	height: auto;
+	z-index: -1; /* behind content but above star canvas */
+	pointer-events: none;
+	overflow: hidden;
+}
+
+.clouds img {
+	width: 100%;
+	height: auto;
+	display: block;
+	opacity: 0.5; /* soften the layer */
+	filter: blur(1px);
+}
+
 @media (max-width: 900px) {
   body {
     flex-direction: column;
@@ -163,4 +211,4 @@ body {
   .uzi {
     width: 70%;
   }
-}
+}