more mitigations for smol screens

_includes/header.html

@@ -1,4 +1,4 @@
-<div id='hamburger'>☰</div>
+<div id='hamburger'><div id='hb-icon'></div></div>
 <header id='header'>
 	<h1>Menu</h1>
 	<span class='internal'>

assets/style.css

@@ -145,9 +145,6 @@ header a {
 	padding: 5px 15px;
 	transition: 0.2s all;
 }
-header span:not(#theme-control), header a {
-	height: 100%;
-}
 html.night header a {
 	color: white;
 }
@@ -180,16 +177,40 @@ html.night header a:hover {
 
 #hamburger {
 	display: none;
-	color: mediumpurple;
-	font-size: 2em;
 	position: fixed;
 	top: 10px;
 	left: 10px;
 	z-index: 1;
-	transition: 0.2s all;
+	padding: 10px;
+	background: #fafafa;
+	border-radius: 10px;
+	height: 27px;
+	width: 27px;
 }
-#hamburger.active {
+html.night #hamburger {
-	color: white;
+	background: #333;
+}
+#hb-icon {
+	height: 100%;
+	width: 100%;
+	background: linear-gradient(
+		to bottom, 
+		mediumpurple, mediumpurple 10%, 
+		#fafafa 10%, #fafafa 45%, 
+		mediumpurple 45%, mediumpurple 55%, 
+		#fafafa 55%, #fafafa 90%, 
+		mediumpurple 90%, mediumpurple 100%
+	);
+}
+html.night #hb-icon {
+	background: linear-gradient(
+		to bottom, 
+		mediumpurple, mediumpurple 10%, 
+		#333 10%, #333 45%, 
+		mediumpurple 45%, mediumpurple 55%, 
+		#333 55%, #333 90%, 
+		mediumpurple 90%, mediumpurple 100%
+	);
 }
 
 #theme-control {
@@ -239,10 +260,16 @@ html.night #theme-control::before {
 	display: block;
 }
 
-@media only screen and (max-width: 800px) {
+@media only screen and (max-width: 1000px) {
 	#main {
 		width: 95%;
 	}
+	header a {
+		padding: 5px 8px;
+	}
+	header {
+		justify-content: space-around;
+	}
 }
 
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
@@ -294,6 +321,7 @@ html.night #theme-control::before {
 	}
 	header span {
 		width: 100%;
+		text-align: center;
 	}
 	header span:not(#theme-control), header a {
 		height: unset;