make it cleaner for mobile

styles/styles.css

@@ -84,6 +84,7 @@ body {
 	line-height: 1.8em;
 	word-spacing: .1em;
 	font-weight: 150;
+	letter-spacing: -.05ch;
 	display: flex;
 	flex-direction: column;
 	color: var(--fg-color);
@@ -114,6 +115,8 @@ header .buttons {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
+	justify-content: center;
+	padding-left: 1em;
 }
 
 .light-dark-switch {
@@ -219,10 +222,69 @@ nav div {
 	width: 90%;
 }
 
+.menu-button {
+	display: none;
+	width: 100%;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+	margin: 1em 0;
+}
+
+.menu-button .inner {
+	display: flex;
+	flex-direction: column;
+}
+
+.menu-button .inner div {
+	display: block;
+	transition: .2s ease opacity, .2s ease transform, .2s ease width;
+	height: .2em;
+	width: 2em;
+	background-color: white;
+	border-radius: .1em;
+	margin: .2em 0;
+}
+
+#menu-trigger:checked + .menu-button .center {
+	width: 0;
+	transform: translateX(.3em);
+}
+
+#menu-trigger:checked + .menu-button .upper {
+	transform: translateY(.625em) rotate(45deg);
+}
+
+#menu-trigger:checked + .menu-button .lower {
+	transform: translateY(-.625em) rotate(-45deg);
+}
+
+#menu-trigger {
+	display: none;
+}
+
 @media only screen and (max-width: 50rem) {
+	.menu-button {
+		display: flex;
+	}
+
+	#menu-trigger ~ nav {
+		opacity: 0;
+	}
+
+	#menu-trigger:checked ~ nav {
+		opacity: 1;
+		height: 11.25em;
+	}
+
 	nav {
+		transition: .25s ease height, .25s ease opacity;
 		border-radius: 0;
 		width: 100%;
+		height: 0;
+		overflow: hidden;
+		margin-bottom: 0;
 	}
 
 	nav div {