A lot of CSS fuckery, added uzi and a navbar.

assets/css/style.css

@@ -1,66 +1,140 @@
-/* CSS Document */
 @font-face {
   font-family: "Clockopia";
   src: url("../fonts/Clockopia.ttf") format("truetype");
-  font-weight: normal;
-  font-style: normal;
 }
 
 @font-face {
   font-family: "LuxiSans";
   src: url("../fonts/luxisr.ttf") format("truetype");
-  font-weight: normal;
-  font-style: normal;
 }
 
 body {
-	background-color: #0e0016;
-	color: white;
-	font-family: "LuxiSans", sans-serif;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+  background-color: #0e0016;
+  color: white;
+  font-family: "LuxiSans", sans-serif;
 }
 
-h1, h2, h3, h4, h5, h6 {
+/* === 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;
+}
+
+.navbar ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.navbar li {
+  width: 100%;
+  margin: 0.5rem 0;
+}
+
+.navbar a {
+  display: block;
+  color: white;
+  text-decoration: none;
+  text-align: center;
+  padding: 0.75rem 0;
+  transition: background 0.2s ease;
+}
+
+.navbar a:hover {
+  background-color: #5e2b7a;
+}
+
+/* === MAIN CONTENT === */
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  padding: 0 10% 0 10%;
+  gap: 5%;
+  z-index: 10;
+  position: relative;
+}
+
+/* === LEFT SIDE (UZI IMAGE) === */
+.left {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.uzi {
+  width: 90%;
+  max-width: 650px;
+  height: auto;
+  pointer-events: none;
+}
+
+/* === MIDDLE SECTION (TEXT + BADGES) === */
+.middle {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: left;
+  z-index: 10;
+}
+
+.middle h1 {
   font-family: "Clockopia", sans-serif;
-  letter-spacing: 0.05em;
-  color: #CBC3E3;
+  font-size: 3.5rem;
+  margin-bottom: 1rem;
+  color: #fff5a8;
+}
+
+.middle p {
+  font-size: 1.1rem;
+  line-height: 1.7;
+  margin-bottom: 1rem;
+  max-width: 550px;
 }
 
 .buttons {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    justify-content: center;
-    margin-top: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 1.5rem;
 }
 
 .buttons img {
-    width: 88px;
-    height: 31px;
-    border: none;
-    image-rendering: pixelated;
-}
-
-@media (prefers-reduced-motion: reduce) {
-    *,
-    *::before,
-    *::after {
-        -webkit-transition: none !important;
-        -o-transition: none !important;
-        transition: none !important;
-        -webkit-animation: none !important;
-        animation: none !important;
-        -webkit-animation-play-state: paused !important;
-        animation-play-state: paused !important;
-        scroll-behavior: auto !important;
-    }
+  width: 88px;
+  height: 31px;
+  border: none;
+  image-rendering: pixelated;
 }
 
+/* === BACKGROUND CANVAS === */
 #night {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: #0e0016;
-    z-index: -9999;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -9999;
 }
+
+/* === RESPONSIVE === */
+@media (max-width: 900px) {
+  body