Change the CSS to work better on smaller screens and mobile.

assets/css/style.css

@@ -25,9 +25,9 @@ body {
 	color: white;
 	font-family: "system-ui", sans-serif;
 	overflow-x: hidden;
+	padding-right: 140px;
 }
 
-/* === NAVBAR ON THE RIGHT === */
 .navbar {
 	width: 140px;
 	background: rgba(60, 26, 77, 0.55);
@@ -47,6 +47,7 @@ body {
 	z-index: 20;
 	box-shadow: -2px 0 10px rgba(0, 0, 0, 0.4);
 }
+
 .navbar ul {
 	list-style: none;
 	margin: 0;
@@ -81,13 +82,8 @@ body {
 	transition: background-color 0.2s ease;
 }
 
-.navbar a::before {
+.navbar a::before { top: 0; }
-	top: 0;
+.navbar a::after { bottom: 0; }
-}
-
-.navbar a::after {
-	bottom: 0;
-}
 
 .navbar a:hover {
 	background-color: #5e2b7a;
@@ -133,13 +129,8 @@ body {
 	margin-top: 4px;
 }
 
-.tor-label {
+.tor-label { color: #6e2b9e; }
-	color: #6e2b9e;
+.ygg-label { color: #92ffb3; }
-}
-
-.ygg-label {
-	color: #92ffb3;
-}
 
 .footer {
 	position: relative;
@@ -153,37 +144,14 @@ body {
 	z-index: 10;
 }
 
-/* === LINKS === */
+a { text-decoration: none; color: #447fc6; }
-a {
-	text-decoration: none;
-	color: #447fc6;
-}
 
-::-moz-selection {
+::-moz-selection { color: #000000; background: #a57ae9; }
-	color: #000000;
+::selection { color: #000000; background: #a57ae9; }
-	background: #a57ae9;
+a::-moz-selection { color: #000; background: #447fc6; }
-}
+a::selection { color: #000; background: #447fc6; }
+a:not(:has(img)):hover { text-decoration: underline; }
 
-::selection {
-	color: #000000;
-	background: #a57ae9;
-}
-
-a::-moz-selection {
-	color: #000;
-	background: #447fc6;
-}
-
-a::selection {
-	color: #000;
-	background: #447fc6;
-}
-
-a:not(:has(img)):hover {
-	text-decoration: underline;
-}
-
-/* === MAIN CONTENT === */
 .content {
 	display: flex;
 	align-items: center;
@@ -195,6 +163,7 @@ a:not(:has(img)):hover {
 	position: relative;
 	box-sizing: border-box;
 	flex-wrap: wrap;
+	max-width: calc(100% - 140px);
 }
 
 .left {
@@ -218,6 +187,7 @@ a:not(:has(img)):hover {
 	justify-content: center;
 	text-align: left;
 	z-index: 10;
+	max-width: 800px;
 }
 
 .middle h1 {
@@ -245,13 +215,10 @@ a:not(:has(img)):hover {
 	width: 88px;
 	height: 31px;
 	border: none;
-	image-rendering: -webkit-optimize-contrast;
-	image-rendering: -moz-crisp-edges;
-	image-rendering: -o-pixelated;
 	image-rendering: pixelated;
 }
 
-/* === BACKGROUND CANVAS === */
+/* Background */
 #night {
 	position: fixed;
 	top: 0;
@@ -281,13 +248,13 @@ a:not(:has(img)):hover {
 	filter: blur(1px);
 }
 
-/* === PROJECT PAGE === */
+/* Project Page */
 .project-page {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	text-align: center;
-	max-width: 800px;
+	max-width: calc(100% - 140px);
 	margin: 0 auto;
 	padding: 5rem 2rem 8rem;
 }
@@ -297,8 +264,6 @@ a:not(:has(img)):hover {
 .project-page h3 {
 	font-family: "Clockopia", sans-serif;
 	color: #fff5a8;
-	margin-top: auto;
-	margin-bottom: auto;
 }
 
 .project-page a {
@@ -316,18 +281,42 @@ a:not(:has(img)):hover {
 	max-width: 600px;
 }
 
-
 .project-page p {
 	max-width: 700px;
 	line-height: 1.5;
 	margin-bottom: auto;
 }
 
+/*Shit to make it not terrible for mobile users.*/
+@media (max-width: 1200px) {
+	.content {
+		flex-direction: column;
+		text-align: center;
+		padding: 3rem 2rem;
+		max-width: 100%;
+	}
 
-/* === RESPONSIVE FIXES === */
+	.left, .middle {
+		flex: unset;
+		width: 100%;
+	}
+
+	.uzi {
+		width: 60%;
+		max-width: 600px;
+		margin-bottom: 2rem;
+	}
+
+	.middle {
+		text-align: center;
+		align-items: center;
+	}
+}
+
+/* Full mobile mode */
 @media (max-width: 900px) {
 	body {
-		flex-direction: column;
+		padding-right: 0;
 	}
 
 	.navbar {
@@ -337,6 +326,8 @@ a:not(:has(img)):hover {
 		flex-direction: row;
 		justify-content: center;
 		padding: 0.5rem 0;
+		border-left: none;
+		border-right: none;
 	}
 
 	.navbar ul {
@@ -344,15 +335,18 @@ a:not(:has(img)):hover {
 		gap: 1rem;
 	}
 
-	.content {
+	.content,
+	.project-page {
+		max-width: 100%;
 		flex-direction: column;
-		padding: 2rem;
+		padding: 2rem 1.5rem;
 		text-align: center;
 	}
 
 	.middle {
 		text-align: center;
 		align-items: center;
+		max-width: 100%;
 	}
 
 	.uzi {
@@ -365,26 +359,16 @@ a:not(:has(img)):hover {
 	}
 
 	.navbar-top-icons {
-	margin-bottom: 0.5rem;
+		margin-bottom: 0.5rem;
-	}
+		gap: 10px;
-
-	.navbar-top-icons img {
-	width: 22px;
-	height: 22px;
-	}
-	
-	.navbar-top-icons {
-	gap: 10px;
-	margin-bottom: 0.5rem;
 	}
 
 	.icon-item img {
-	width: 24px;
+		width: 24px;
-	height: 24px;
+		height: 24px;
 	}
 
 	.icon-label {
-	font-size: 0.7rem;
+		font-size: 0.7rem;
 	}
-
 }