diff --git a/src/app.scss b/src/app.scss
index 5bcca4a..6bc733a 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -1,162 +1,162 @@
-@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
 * {
-    box-sizing: inherit;
-    margin: 0;
-    padding: 0;
-    font-family: var(--main-font);
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	box-sizing: inherit;
+	margin: 0;
+	padding: 0;
+	font-family: var(--main-font);
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 html {
-    margin: 0;
-    padding: 0;
-    font-size: 100%;
-    box-sizing: border-box;
-    overflow-y: scroll;
+	margin: 0;
+	padding: 0;
+	font-size: 100%;
+	box-sizing: border-box;
+	overflow-y: scroll;
 }
 
 body {
-    margin: 0;
-    padding: 0;
-    background-color: var(--bg-color);
+	margin: 0;
+	padding: 0;
+	background-color: var(--bg-color);
 }
 
 html,
 body {
-    max-width: 100%;
+	max-width: 100%;
 }
 
 .wrapper {
-    margin-inline: auto;
-    width: min(90%, 80rem);
-    margin-top: 7rem;
+	margin-inline: auto;
+	width: min(90%, 80rem);
+	margin-top: 7rem;
 }
 
 :root {
-    /* TODO properly name these */
-    --main-font: "Manrope", sans-serif;
-    --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
-    --white: hsl(206, 100%, 94%);
-    --accent-color: hsl(206, 100%, 81%);
-    --accent-color-two: hsl(208, 75%, 82%);
-    --accent-low-opacity: hsla(205, 91%, 69%, 0.15);
-    --bg-color: hsl(252, 10%, 11%);
-    --grey-one: hsl(210, 14%, 17%);
-    --grey-two: hsl(212, 19%, 19%);
-    --grey-three: hsl(221, 17%, 26%);
-    --grey-four: hsl(226, 48%, 18%);
-    --grey-five: hsl(208, 30%, 75%);
-    --grey-six: hsl(230, 9%, 13%);
-    --grey-seven: hsl(240, 9%, 13.5%);
-    --grey-eight: hsla(207, 30%, 75%, 0.577);
-    --grey-nine: hsla(240, 6%, 7%, 0.3);
-    --grey-ten: hsl(230, 9.5%, 17.5%);
-    --grey-eleven: hsl(208, 10%, 40%);
-    --bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    --drop-shadow-one: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
-    0px 2px 4px -1px rgba(0, 0, 0, 0.2);
+	/* TODO properly name these */
+	--main-font: 'Manrope', sans-serif;
+	--mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+	--white: hsl(206, 100%, 94%);
+	--accent-color: hsl(206, 100%, 81%);
+	--accent-color-two: hsl(208, 75%, 82%);
+	--accent-low-opacity: hsla(205, 91%, 69%, 0.15);
+	--bg-color: hsl(252, 10%, 11%);
+	--grey-one: hsl(210, 14%, 17%);
+	--grey-two: hsl(212, 19%, 19%);
+	--grey-three: hsl(221, 17%, 26%);
+	--grey-four: hsl(226, 48%, 18%);
+	--grey-five: hsl(208, 30%, 75%);
+	--grey-six: hsl(230, 9%, 13%);
+	--grey-seven: hsl(240, 9%, 13.5%);
+	--grey-eight: hsla(207, 30%, 75%, 0.577);
+	--grey-nine: hsla(240, 6%, 7%, 0.3);
+	--grey-ten: hsl(230, 9.5%, 17.5%);
+	--grey-eleven: hsl(208, 10%, 40%);
+	--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+	--drop-shadow-one: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
+		0px 2px 4px -1px rgba(0, 0, 0, 0.2);
 }
 
 ::selection {
-    background-color: var(--accent-low-opacity);
+	background-color: var(--accent-low-opacity);
 }
 
 /*-----headings-----*/
 
 h1 {
-    color: var(--white);
-    line-height: 4rem;
-    font-size: 3.5rem;
-    font-weight: 700;
-    letter-spacing: -0.025em;
+	color: var(--white);
+	line-height: 4rem;
+	font-size: 3.5rem;
+	font-weight: 700;
+	letter-spacing: -0.025em;
 }
 
 h2 {
-    color: var(--grey-five);
-    font-size: 2.5rem;
-    letter-spacing: -0.04rem;
-    font-weight: 600;
+	color: var(--grey-five);
+	font-size: 2.5rem;
+	letter-spacing: -0.04rem;
+	font-weight: 600;
 }
 
 h3 {
-    font-size: 1.25rem;
-    color: var(--accent-color-two);
-    font-weight: 600;
+	font-size: 1.25rem;
+	color: var(--accent-color-two);
+	font-weight: 600;
 }
 
 h4 {
-    color: var(--accent-color-two);
-    font-weight: 400;
-    font-size: 1rem;
-    letter-spacing: 0.02rem;
-    line-height: 2rem;
+	color: var(--accent-color-two);
+	font-weight: 400;
+	font-size: 1rem;
+	letter-spacing: 0.02rem;
+	line-height: 2rem;
 }
 
 h5 {
-    color: var(--grey-five);
-    font-weight: 400;
-    font-size: 0.9rem;
-    letter-spacing: 0.02rem;
+	color: var(--grey-five);
+	font-weight: 400;
+	font-size: 0.9rem;
+	letter-spacing: 0.02rem;
 }
 
 h6 {
-    color: var(--grey-five);
-    font-weight: 500;
-    font-size: 0.85rem;
+	color: var(--grey-five);
+	font-weight: 500;
+	font-size: 0.85rem;
 }
 
 p {
-    color: var(--grey-five);
-    font-weight: 400;
-    font-size: 1rem;
-    letter-spacing: 0.02rem;
-    line-height: 1.75rem;
+	color: var(--grey-five);
+	font-weight: 400;
+	font-size: 1rem;
+	letter-spacing: 0.02rem;
+	line-height: 1.75rem;
 }
 
-@media screen and (max-width: 768px) {
-    h1 {
-        font-size: 2.6rem;
-        line-height: 3.75rem;
-    }
+@media screen and (max-width: 767px) {
+	h1 {
+		font-size: 2.6rem;
+		line-height: 3.75rem;
+	}
 
-    h2 {
-        font-size: 2rem;
-    }
+	h2 {
+		font-size: 2rem;
+	}
 }
 
 /*---------------*/
 
 ::-webkit-scrollbar {
-    width: 5px;
-    background-color: transparent;
+	width: 5px;
+	background-color: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-    background-color: var(--accent-color);
-    background-clip: content-box;
-    border-radius: 100px;
+	background-color: var(--accent-color);
+	background-clip: content-box;
+	border-radius: 100px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background-color: var(--grey-three);
+	background-color: var(--grey-three);
 }
 
 hr {
-    display: block;
-    height: 1px;
-    border: 0;
-    border-top: 1px solid var(--grey-three);
+	display: block;
+	height: 1px;
+	border: 0;
+	border-top: 1px solid var(--grey-three);
 }
 
 input {
-    padding: 1rem;
-    border-radius: 12px;
-    border: 1px solid var(--grey-three);
-    background-color: transparent;
-    color: var(--accent-color-two);
+	padding: 1rem;
+	border-radius: 12px;
+	border: 1px solid var(--grey-three);
+	background-color: transparent;
+	color: var(--accent-color-two);
 }
 
 input:focus {
-    outline: 1px solid var(--accent-color);
+	outline: 1px solid var(--accent-color);
 }
diff --git a/src/layout/Hero/HeroSection.svelte b/src/layout/Hero/HeroSection.svelte
index 624e7f2..c5f5cf5 100644
--- a/src/layout/Hero/HeroSection.svelte
+++ b/src/layout/Hero/HeroSection.svelte
@@ -43,7 +43,7 @@
 		color: var(--accent-color);
 	}
 
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		.hero {
 			padding-bottom: 0;
 		}
diff --git a/src/layout/Hero/SocialHost.svelte b/src/layout/Hero/SocialHost.svelte
index 544ece0..67a79b3 100644
--- a/src/layout/Hero/SocialHost.svelte
+++ b/src/layout/Hero/SocialHost.svelte
@@ -23,7 +23,7 @@
 		left: 0;
 	}
 
-	@media screen and (max-width: 768px) {
+	@media screen and (max-width: 767px) {
 		.social-host {
 			left: 0;
 			width: 100%;
diff --git a/src/layout/Navbar/NavButton.svelte b/src/layout/Navbar/NavButton.svelte
index 03bacda..ae2ffce 100644
--- a/src/layout/Navbar/NavButton.svelte
+++ b/src/layout/Navbar/NavButton.svelte
@@ -72,7 +72,7 @@
 		color: var(--accent-color);
 	}
 
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		li {
 			padding: 0.75rem 1.25rem;
 			text-align: left;
diff --git a/src/layout/Navbar/NavHost.svelte b/src/layout/Navbar/NavHost.svelte
index 0502763..a26bba4 100644
--- a/src/layout/Navbar/NavHost.svelte
+++ b/src/layout/Navbar/NavHost.svelte
@@ -232,7 +232,7 @@
 		}
 	}
 
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		.nav-wrapper {
 			flex-direction: column;
 			gap: 0.5rem;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e877a93..217f819 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -43,7 +43,7 @@
 			display: none;
 		}
 	}
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		.wrappezoid {
 			display: flex;
 			justify-content: center;
diff --git a/src/routes/contributors/+page.svelte b/src/routes/contributors/+page.svelte
index 68cc99d..3926970 100644
--- a/src/routes/contributors/+page.svelte
+++ b/src/routes/contributors/+page.svelte
@@ -91,7 +91,7 @@
 	a:hover::after {
 		transform: translateX(5px);
 	}
-	@media screen and (max-width: 768px) {
+	@media screen and (max-width: 767px) {
 		.text-container {
 			padding: 2rem 1.75rem;
 			margin-bottom: 2rem;
diff --git a/src/routes/contributors/ContributorPerson.svelte b/src/routes/contributors/ContributorPerson.svelte
index aca0c35..5da40d4 100644
--- a/src/routes/contributors/ContributorPerson.svelte
+++ b/src/routes/contributors/ContributorPerson.svelte
@@ -48,7 +48,7 @@
 		user-select: none;
 	}
 
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		h5 {
 			display: none;
 		}
diff --git a/src/routes/contributors/ContributorSection.svelte b/src/routes/contributors/ContributorSection.svelte
index 66daa72..fc35355 100644
--- a/src/routes/contributors/ContributorSection.svelte
+++ b/src/routes/contributors/ContributorSection.svelte
@@ -93,7 +93,7 @@
 		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 	}
 
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		.contrib-host {
 			padding: 0.75rem;
 			gap: 0.25rem;
diff --git a/src/routes/patches/+page.svelte b/src/routes/patches/+page.svelte
index aad34c9..26c8659 100644
--- a/src/routes/patches/+page.svelte
+++ b/src/routes/patches/+page.svelte
@@ -219,7 +219,7 @@
 			display: none;
 		}
 	}
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		main {
 			grid-template-columns: none;
 			flex-direction: column;
diff --git a/src/routes/patches/Package.svelte b/src/routes/patches/Package.svelte
index 3a82d3a..e56be87 100644
--- a/src/routes/patches/Package.svelte
+++ b/src/routes/patches/Package.svelte
@@ -63,7 +63,7 @@
 		color: var(--white);
 	}
 
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		.package {
 			border-radius: 0px;
 			font-size: 0.9rem;
diff --git a/src/routes/patches/PackageMenu.svelte b/src/routes/patches/PackageMenu.svelte
index 12c7067..ccc7b5d 100644
--- a/src/routes/patches/PackageMenu.svelte
+++ b/src/routes/patches/PackageMenu.svelte
@@ -1,6 +1,6 @@
 <div class="menu">
 	<h6>Packages</h6>
-	<hr/>
+	<hr />
 	<div class="slot">
 		<slot />
 	</div>
@@ -40,13 +40,14 @@
 		color: var(--accent-color);
 	}
 
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		.menu {
 			padding: 0.75rem;
 			height: unset;
 		}
 
-		h6, hr {
+		h6,
+		hr {
 			display: none;
 		}
 	}