diff --git a/src/component/footer.svelte b/src/component/footer.svelte
index f2a1fbd..843484a 100644
--- a/src/component/footer.svelte
+++ b/src/component/footer.svelte
@@ -5,3 +5,32 @@
     <a href="mailto:support@colormatic.org">contact@colormatic.org</a>
   </p>
 </footer>
+
+<style lang="scss">
+  @use "../style/global.scss";
+
+  footer {
+    display: flex;
+    justify-content: space-between;
+    border-top: solid 1px global.$text-color;
+    width: 95%;
+    padding: 4px;
+    margin: 0 auto;
+  }
+
+  footer p {
+    color: global.$text-color;
+    padding: 4px 10%;
+  }
+
+  @media screen and (max-width: global.$mobile-width) {
+    footer {
+      flex-direction: column;
+    }
+    footer p {
+      text-align: center;
+      padding: 4px;
+      margin: 4px;
+    }
+  }
+</style>
diff --git a/src/component/navbar.svelte b/src/component/navbar.svelte
index 6aa6391..8dfc1b4 100644
--- a/src/component/navbar.svelte
+++ b/src/component/navbar.svelte
@@ -71,3 +71,193 @@ Svelte modal example, https://svelte.dev/playground/modal
     </ul>
   </div>
 </span>
+
+<style lang="scss">
+  @use "../style/global.scss";
+
+  nav {
+    display: grid;
+    grid-template-columns: 1fr min-content 1fr;
+    align-items: center;
+    padding: 12px;
+    border-bottom: solid 1px global.$text-color;
+    z-index: 1;
+
+    margin: 0 auto;
+    width: 95%;
+    box-sizing: border-box;
+    overflow-wrap: anywhere;
+  }
+
+  nav .nav-left {
+    justify-self: left;
+    grid-column: 1;
+  }
+
+  nav .nav-center {
+    justify-self: center;
+    grid-column: 2;
+  }
+
+  nav .nav-right {
+    justify-self: right;
+    grid-column: 3;
+  }
+
+  nav ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: row;
+  }
+
+  nav ul li {
+    display: grid;
+    justify-items: center;
+  }
+
+  nav a,
+  nav button {
+    padding: 0 8px;
+    color: global.$text-color;
+    text-decoration: none;
+
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+  }
+
+  nav a.title {
+    font-size: 140%;
+    font-weight: bold;
+  }
+
+  nav img.colormatic-logo {
+    width: auto;
+    height: 40px;
+    padding: 4px;
+  }
+
+  nav button.menu-button {
+    background: none;
+    border: none;
+  }
+
+  nav .menu-button i {
+    font-size: 230%;
+
+    /*/
+     * Ugly hack to account for the fact that the menu icon is off-center
+     * (Bootstrap please fix)
+    /*/
+    transform: translateY(-1px);
+  }
+
+  nav .git-icon i {
+    font-size: 140%;
+  }
+
+  nav div.inline {
+    display: flex;
+  }
+
+  @media screen and (max-width: global.$mobile-width) {
+    nav {
+      padding: 6px 0;
+    }
+    nav .git-icon i {
+      font-size: 150%;
+    }
+    nav ul.responsive-hidden {
+      display: none;
+    }
+  }
+
+  /*/
+   * Navigation modal section
+  /*/
+
+  span.modalbg.hidden {
+    display: none;
+  }
+
+  span.modalbg {
+    position: fixed;
+    z-index: 1;
+    padding: 0;
+    margin: auto;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+
+  span.modalbg div {
+    width: 50ch;
+    margin: 100px auto;
+    padding: 16px;
+
+    color: global.$text-color;
+    border-radius: 8px;
+    box-shadow: 1px 1px 8px #00000033;
+    background-color: #ffffffbb;
+    backdrop-filter: blur(5px);
+
+    animation-name: modal-animate-in;
+    animation-duration: 0.4s;
+  }
+
+  @keyframes modal-animate-in {
+    from {
+      transform: translate(0px, -300px);
+      opacity: 0;
+    }
+    to {
+      transform: translate(0px, 0px);
+      opacity: 1;
+    }
+  }
+
+  span.modalbg div button.close {
+    float: right;
+    width: min-content;
+    background: none;
+    border: none;
+    outline: none;
+    cursor: pointer;
+
+    font-size: 200%;
+    color: global.$text-color;
+  }
+
+  span.modalbg div ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  span.modalbg div ul li {
+    margin: 18px 12px;
+  }
+
+  span.modalbg div ul li a {
+    color: global.$text-color;
+    padding: 8px;
+    text-decoration: none;
+    font-size: 120%;
+  }
+
+  @media screen and (max-width: global.$mobile-width) {
+    span.modalbg div {
+      width: 30ch;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    span.modalbg div {
+      background-color: #000000bb;
+    }
+  }
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 76207e5..8dd8f89 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import "../style/main.scss";
-  import "../style/nav.scss";
   import "bootstrap-icons/font/bootstrap-icons.css";
   import Navbar from "../component/navbar.svelte";
   import Footer from "../component/footer.svelte";
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9e17cb8..2e9c86b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -76,3 +76,34 @@
 </main>
 
 <spacer></spacer>
+
+<style lang="scss">
+  @use "../style/global.scss";
+
+  main div.brand-heading {
+    padding: 12%;
+    width: 60%;
+  }
+
+  main div.brand-heading h1 {
+    font-size: 300%;
+  }
+
+  main div.heading {
+    font-size: 250%;
+    text-align: center;
+    padding: 12px;
+  }
+
+  @media screen and (max-width: global.$mobile-width) {
+    main div.brand-heading {
+      padding: 38% 12px;
+      text-align: center;
+      width: initial;
+    }
+
+    main div.heading {
+      font-size: 200%;
+    }
+  }
+</style>
diff --git a/src/routes/studios/+page.svelte b/src/routes/studios/+page.svelte
index 84772e2..b6d5d19 100644
--- a/src/routes/studios/+page.svelte
+++ b/src/routes/studios/+page.svelte
@@ -1,7 +1,3 @@
-<script lang="ts">
-  import "../../style/studios.scss";
-</script>
-
 <svelte:head>
   <title>Colormatic Studios</title>
 </svelte:head>
@@ -124,3 +120,98 @@
 </main>
 
 <spacer></spacer>
+
+<style lang="scss">
+  @use "../../style/global.scss";
+
+  div.cs-title {
+    background-image: url("/img/colormatic_banner.svg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    height: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  div.cs-title h1 {
+    color: white;
+    background-color: #00000088;
+    padding: 28px 38px;
+    border-radius: 16px;
+    font-size: 300%;
+    box-shadow: 1px 1px 8px #00000033;
+    backdrop-filter: blur(5px);
+  }
+
+  div.project-grid-container {
+    display: flex;
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  @media screen and (max-width: global.$mobile-width) {
+    div.project-grid-container {
+      width: 90%;
+    }
+
+    div.cs-title {
+      height: 200px;
+    }
+
+    div.cs-title h1 {
+      font-size: 200%;
+    }
+  }
+
+  div.project-grid-container div.project-grid-box {
+    flex: 1;
+    color: #383c3f;
+    margin: 16px;
+    border: solid 1px #00000033;
+    border-radius: 8px;
+    box-shadow: 1px 1px 8px #00000033;
+    padding: 16px;
+    color: global.$text-color;
+    min-width: 40%;
+    max-width: 50%;
+    background-color: #ffffff22;
+    backdrop-filter: blur(3px);
+  }
+
+  div.project-grid-container div.project-grid-box h1 {
+    text-align: center;
+  }
+
+  div.project-grid-container div.project-grid-box h1 a {
+    color: global.$text-color;
+  }
+
+  div.project-grid-container
+    div.project-grid-box
+    div.project-grid-box-contents {
+    /* Yes, this absurdly long element selector is a joke */
+    display: flex;
+  }
+
+  div.project-grid-container div.project-grid-box img {
+    max-width: 120px;
+    max-height: 150px;
+    margin: 12px;
+    border-radius: 8px;
+  }
+
+  @media screen and (max-width: global.$mobile-width) {
+    div.project-grid-container div.project-grid-box {
+      min-width: 90%;
+      max-width: 90%;
+    }
+
+    div.project-grid-container div.project-grid-box img {
+      max-width: 100px;
+    }
+  }
+</style>
diff --git a/src/routes/video/+page.svelte b/src/routes/video/+page.svelte
index 16abad4..b0ddb62 100644
--- a/src/routes/video/+page.svelte
+++ b/src/routes/video/+page.svelte
@@ -1,7 +1,4 @@
 <script lang="ts">
-  import { getParam, getVideo } from "../../script/video.ts";
-  import "../../style/video.scss";
-
   import { onMount } from "svelte";
 
   onMount(() => {
@@ -12,6 +9,93 @@
       getVideo(channel, video);
     }
   });
+
+  const BASEURL = "https://files.colormatic.org/";
+
+  export function getParam(paramName: string) {
+    var params = new URLSearchParams(window.location.search);
+    let t_param = params.get(paramName);
+    return t_param ? t_param : ""; // Return empty string if null
+  }
+
+  async function getJSON(url: string) {
+    const response = await fetch(url);
+    if (!response.ok) throw new Error(response.statusText);
+
+    const data = response.json();
+    return data;
+  }
+
+  export function getVideo(cname: string, vname: string) {
+    var videoplayer = document.getElementById("videoplayer") as HTMLElement;
+    var videotitle = document.getElementById("videotitle") as HTMLElement;
+    var videodescription = document.getElementById(
+      "videodescription",
+    ) as HTMLElement;
+    var videodownload = document.getElementById("videodownload") as HTMLElement;
+    var sourcedownload = document.getElementById(
+      "sourcedownload",
+    ) as HTMLElement;
+    getJSON(BASEURL + cname + "/videos/data/" + vname + ".json")
+      .then((data) => {
+        let videoURL =
+          BASEURL +
+          cname +
+          "/videos/raw/" +
+          data.video_file +
+          "." +
+          data.video_format;
+        videoplayer.setAttribute(
+          "poster",
+          BASEURL + cname + "/videos/thumbnail/" + data.thumbnail,
+        );
+        var videosource = document.createElement("source");
+        videosource.setAttribute("src", videoURL);
+        videosource.setAttribute("type", "video/" + data.video_format);
+        videoplayer.appendChild(videosource);
+
+        document.title = data.title;
+        videotitle.innerText = data.title;
+        data.description.forEach((iter: number) => {
+          // TODO: Detect if one of these lines contains a link and if so, make it a link
+          videodescription.appendChild(
+            document.createTextNode(iter.toString()),
+          );
+          videodescription.appendChild(document.createElement("br"));
+        });
+
+        videodownload.setAttribute(
+          "href",
+          BASEURL +
+            cname +
+            "/videos/raw/" +
+            data.video_file +
+            "." +
+            data.video_format,
+        );
+        videodownload.setAttribute(
+          "download",
+          data.video_file + "." + data.video_format,
+        );
+        sourcedownload.setAttribute(
+          "href",
+          BASEURL +
+            cname +
+            "/videos/source/" +
+            data.source_file +
+            "." +
+            data.source_format,
+        );
+        sourcedownload.setAttribute(
+          "download",
+          data.source_file + "." + data.source_format,
+        );
+      })
+      .catch((error) => {
+        videotitle.innerText = "Failed to load video.";
+        console.error(error);
+      });
+  }
 </script>
 
 <svelte:head>
@@ -46,3 +130,115 @@
 </main>
 
 <spacer></spacer>
+
+<style lang="scss">
+  @use "../../style/global.scss";
+
+  div.video.container {
+    display: flex;
+    color: global.$text-color;
+    width: 90%;
+    margin: 16px auto 16px auto;
+    border: solid 1px #00000033;
+    border-radius: 8px;
+    box-shadow: 1px 1px 8px #00000033;
+    padding: 16px;
+    background-color: #ffffff22;
+    backdrop-filter: blur(3px);
+  }
+
+  div.video.container video#videoplayer {
+    flex-grow: 1;
+    border-radius: 12px;
+    height: auto;
+    max-width: 55%;
+  }
+
+  div.video.container div.videoobjects {
+    display: grid;
+    padding: 24px;
+  }
+
+  div.video.container div.videodetails h1#videotitle {
+    padding: 0 12px;
+  }
+
+  div.dropdown-container {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  div.video.container div.download-dropdown {
+    position: relative;
+    display: inline-block;
+    padding: 12px;
+    width: 25px;
+    height: 25px;
+    background-color: #21afff;
+    box-shadow: 1px 1px 8px #00000033;
+    border-radius: 50px;
+    transition-duration: 0.35s;
+    font-size: 120%;
+    text-align: center;
+  }
+
+  div.video.container div.download-dropdown:hover {
+    box-shadow: 1px 1px 8px #00000088;
+  }
+
+  div.video.container div.download-dropdown div.dropdown-content {
+    display: none;
+    position: absolute;
+    font-size: 80%;
+    min-width: 160px;
+    background-color: #edeeee;
+    box-shadow: 1px 1px 8px #00000033;
+    border-radius: 8px;
+    text-align: center;
+  }
+
+  div.video.container div.download-dropdown:hover div.dropdown-content {
+    display: block;
+  }
+
+  div.video.container div.download-dropdown div.dropdown-content ul {
+    list-style-type: none;
+    padding-left: 0;
+  }
+
+  div.video.container div.download-dropdown div.dropdown-content ul li {
+    padding: 4px;
+    cursor: pointer;
+  }
+
+  div.video.container div.download-dropdown div.dropdown-content ul li:hover {
+    background-color: #dcdfdf;
+  }
+
+  div.video.container div.download-dropdown div.dropdown-content ul li a {
+    text-decoration: none;
+    color: global.$text-color;
+  }
+
+  @media screen and (max-width: global.$mobile-width) {
+    div.video.container {
+      display: block;
+    }
+    div.video.container video#videoplayer {
+      width: 100%;
+      max-width: none;
+    }
+    div.video.container div.download-dropdown {
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+      margin-top: 12px;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    div.video.container div.download-dropdown div.dropdown-content {
+      background-color: #444444;
+    }
+  }
+</style>
diff --git a/src/script/video.ts b/src/script/video.ts
deleted file mode 100644
index e98012f..0000000
--- a/src/script/video.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-const BASEURL = "https://files.colormatic.org/";
-
-export function getParam(paramName: string) {
-	var params = new URLSearchParams(window.location.search);
-	let t_param = params.get(paramName);
-	return t_param ? t_param : ""; // Return empty string if null
-}
-
-async function getJSON(url: string) {
-	const response = await fetch(url);
-	if (!response.ok) throw new Error(response.statusText);
-
-	const data = response.json();
-	return data;
-}
-
-export function getVideo(cname: string, vname: string) {
-	var videoplayer = document.getElementById("videoplayer") as HTMLElement;
-	var videotitle = document.getElementById("videotitle") as HTMLElement;
-	var videodescription = document.getElementById(
-		"videodescription",
-	) as HTMLElement;
-	var videodownload = document.getElementById("videodownload") as HTMLElement;
-	var sourcedownload = document.getElementById(
-		"sourcedownload",
-	) as HTMLElement;
-	getJSON(BASEURL + cname + "/videos/data/" + vname + ".json")
-		.then((data) => {
-			let videoURL =
-				BASEURL +
-				cname +
-				"/videos/raw/" +
-				data.video_file +
-				"." +
-				data.video_format;
-			videoplayer.setAttribute(
-				"poster",
-				BASEURL + cname + "/videos/thumbnail/" + data.thumbnail,
-			);
-			var videosource = document.createElement("source");
-			videosource.setAttribute("src", videoURL);
-			videosource.setAttribute("type", "video/" + data.video_format);
-			videoplayer.appendChild(videosource);
-
-			document.title = data.title;
-			videotitle.innerText = data.title;
-			data.description.forEach((iter: number) => {
-				// TODO: Detect if one of these lines contains a link and if so, make it a link
-				videodescription.appendChild(
-					document.createTextNode(iter.toString()),
-				);
-				videodescription.appendChild(document.createElement("br"));
-			});
-
-			videodownload.setAttribute(
-				"href",
-				BASEURL +
-					cname +
-					"/videos/raw/" +
-					data.video_file +
-					"." +
-					data.video_format,
-			);
-			videodownload.setAttribute(
-				"download",
-				data.video_file + "." + data.video_format,
-			);
-			sourcedownload.setAttribute(
-				"href",
-				BASEURL +
-					cname +
-					"/videos/source/" +
-					data.source_file +
-					"." +
-					data.source_format,
-			);
-			sourcedownload.setAttribute(
-				"download",
-				data.source_file + "." + data.source_format,
-			);
-		})
-		.catch((error) => {
-			videotitle.innerText = "Failed to load video.";
-			console.error(error);
-		});
-}
diff --git a/src/style/main.scss b/src/style/main.scss
index 6e1408b..e53e872 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -59,27 +59,6 @@ div.panel {
   backdrop-filter: blur(5px);
 }
 
-main div.brand-heading {
-  padding: 12%;
-  width: 60%;
-}
-
-main div.brand-heading h1 {
-  font-size: 300%;
-}
-
-main div.heading {
-  font-size: 250%;
-  text-align: center;
-  padding: 12px;
-}
-
-main span.name-title {
-  display: block;
-  font-size: 550%;
-  text-align: center;
-}
-
 main div.hero {
   width: 60%;
   margin: 16px auto;
@@ -87,6 +66,15 @@ main div.hero {
   text-align: center;
 }
 
+@media screen and (max-width: global.$mobile-width) {
+  spacer {
+    margin-top: 24%;
+  }
+  main div.hero {
+    width: 80%;
+  }
+}
+
 main div#scroll-arrow {
   text-align: center;
   font-size: 200%;
@@ -106,23 +94,6 @@ main div#scroll-arrow.scroll-arrow-hide {
     opacity 0.25s ease-out;
 }
 
-@media screen and (max-width: global.$mobile-width) {
-  spacer {
-    margin-top: 24%;
-  }
-  main div.brand-heading {
-    padding: 38% 12px;
-    text-align: center;
-    width: initial;
-  }
-  main div.heading {
-    font-size: 200%;
-  }
-  main div.hero {
-    width: 80%;
-  }
-}
-
 main div.hero h1 a {
   color: global.$text-color;
 }
@@ -130,12 +101,12 @@ main div.hero h1 a {
 p.justify {
   text-align: justify;
   text-justify: auto;
-  margin-left: auto;
-  margin-right: auto;
 }
 
 main div.hero p.justify {
   width: 60%;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 main div.hero ul {
@@ -143,21 +114,7 @@ main div.hero ul {
   margin-right: auto;
 }
 
-main img.banner {
-  display: block;
-  width: 70%;
-  margin: 32px auto 32px auto;
-  border: solid 1px #00000033;
-  border-radius: 16px;
-  box-shadow: 1px 1px 8px #00000033;
-}
-
 @media screen and (max-width: global.$mobile-width) {
-  main img.banner {
-    width: 95%;
-    border-radius: 12px;
-    margin: 24px auto 24px auto;
-  }
   main div.hero p.justify {
     width: 100%;
   }
@@ -246,28 +203,3 @@ ul.videolist li a span {
 img.pixelart {
   image-rendering: pixelated;
 }
-
-footer {
-  display: flex;
-  justify-content: space-between;
-  border-top: solid 1px global.$text-color;
-  width: 95%;
-  padding: 4px;
-  margin: 0 auto;
-}
-
-footer p {
-  color: global.$text-color;
-  padding: 4px 10%;
-}
-
-@media screen and (max-width: global.$mobile-width) {
-  footer {
-    flex-direction: column;
-  }
-  footer p {
-    text-align: center;
-    padding: 4px;
-    margin: 4px;
-  }
-}
diff --git a/src/style/nav.scss b/src/style/nav.scss
deleted file mode 100644
index 791a704..0000000
--- a/src/style/nav.scss
+++ /dev/null
@@ -1,186 +0,0 @@
-@use "global.scss";
-
-nav {
-  display: grid;
-  grid-template-columns: 1fr min-content 1fr;
-  align-items: center;
-  padding: 12px;
-  border-bottom: solid 1px global.$text-color;
-  z-index: 1;
-
-  margin: 0 auto;
-  width: 95%;
-  box-sizing: border-box;
-  overflow-wrap: anywhere;
-}
-
-nav .nav-left {
-  justify-self: left;
-  grid-column: 1;
-}
-
-nav .nav-center {
-  justify-self: center;
-  grid-column: 2;
-}
-
-nav .nav-right {
-  justify-self: right;
-  grid-column: 3;
-}
-
-nav ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: row;
-}
-
-nav ul li {
-  display: grid;
-  justify-items: center;
-}
-
-nav a,
-nav button {
-  padding: 0 8px;
-  color: global.$text-color;
-  text-decoration: none;
-
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-}
-
-nav a.title {
-  font-size: 140%;
-  font-weight: bold;
-}
-
-nav img.colormatic-logo {
-  width: auto;
-  height: 40px;
-  padding: 4px;
-}
-
-nav button.menu-button {
-  background: none;
-  border: none;
-}
-
-nav .menu-button i {
-  font-size: 230%;
-  transform: translateY(-1px);
-  /*/
-   * Ugly hack to account for the fact that the menu icon is off-center
-   * (Bootstrap please fix)
-  /*/
-}
-
-nav .git-icon i {
-  font-size: 140%;
-}
-
-nav div.inline {
-  display: flex;
-}
-
-@media screen and (max-width: global.$mobile-width) {
-  nav {
-    padding: 6px 0;
-  }
-  nav .git-icon i {
-    font-size: 150%;
-  }
-  nav ul.responsive-hidden {
-    display: none;
-  }
-}
-
-/*/
- * Navigation modal section
-/*/
-
-span.modalbg.hidden {
-  display: none;
-}
-
-span.modalbg {
-  position: fixed;
-  z-index: 1;
-  padding: 0;
-  margin: auto;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
-span.modalbg div {
-  width: 50ch;
-  margin: 100px auto;
-  padding: 16px;
-
-  color: global.$text-color;
-  border-radius: 8px;
-  box-shadow: 1px 1px 8px #00000033;
-  background-color: #ffffffbb;
-  backdrop-filter: blur(5px);
-
-  animation-name: modal-animate-in;
-  animation-duration: 0.4s;
-}
-
-@keyframes modal-animate-in {
-  from {
-    transform: translate(0px, -300px);
-    opacity: 0;
-  }
-  to {
-    transform: translate(0px, 0px);
-    opacity: 1;
-  }
-}
-
-span.modalbg div button.close {
-  float: right;
-  width: min-content;
-  background: none;
-  border: none;
-  outline: none;
-  cursor: pointer;
-
-  font-size: 200%;
-  color: global.$text-color;
-}
-
-span.modalbg div ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-
-span.modalbg div ul li {
-  margin: 18px 12px;
-}
-
-span.modalbg div ul li a {
-  color: global.$text-color;
-  padding: 8px;
-  text-decoration: none;
-  font-size: 120%;
-}
-
-@media screen and (max-width: global.$mobile-width) {
-  span.modalbg div {
-    width: 30ch;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  span.modalbg div {
-    background-color: #000000bb;
-  }
-}
diff --git a/src/style/studios.scss b/src/style/studios.scss
deleted file mode 100644
index cc79ee2..0000000
--- a/src/style/studios.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-@use "global.scss";
-
-div.cs-title {
-  background-image: url("/img/colormatic_banner.svg");
-  background-size: cover;
-  background-repeat: no-repeat;
-  height: 300px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-div.cs-title h1 {
-  color: white;
-  background-color: #00000088;
-  padding: 28px 38px;
-  border-radius: 16px;
-  font-size: 300%;
-  box-shadow: 1px 1px 8px #00000033;
-  backdrop-filter: blur(5px);
-}
-
-div.project-grid-container {
-  display: flex;
-  width: 80%;
-  margin-left: auto;
-  margin-right: auto;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-@media screen and (max-width: global.$mobile-width) {
-  div.project-grid-container {
-    width: 90%;
-  }
-
-  div.cs-title {
-    height: 200px;
-  }
-
-  div.cs-title h1 {
-    font-size: 200%;
-  }
-}
-
-div.project-grid-container div.project-grid-box {
-  flex: 1;
-  color: #383c3f;
-  margin: 16px;
-  border: solid 1px #00000033;
-  border-radius: 8px;
-  box-shadow: 1px 1px 8px #00000033;
-  padding: 16px;
-  color: global.$text-color;
-  min-width: 40%;
-  max-width: 50%;
-  background-color: #ffffff22;
-  backdrop-filter: blur(3px);
-}
-
-div.project-grid-container div.project-grid-box h1 {
-  text-align: center;
-}
-
-div.project-grid-container div.project-grid-box h1 a {
-  color: global.$text-color;
-}
-
-div.project-grid-container div.project-grid-box div.project-grid-box-contents {
-  /* Yes, this absurdly long element selector is a joke */
-  display: flex;
-}
-
-div.project-grid-container div.project-grid-box img {
-  max-width: 120px;
-  max-height: 150px;
-  margin: 12px;
-  border-radius: 8px;
-}
-
-@media screen and (max-width: global.$mobile-width) {
-  div.project-grid-container div.project-grid-box {
-    min-width: 90%;
-    max-width: 90%;
-  }
-
-  div.project-grid-container div.project-grid-box img {
-    max-width: 100px;
-  }
-}
diff --git a/src/style/video.scss b/src/style/video.scss
deleted file mode 100644
index 506050b..0000000
--- a/src/style/video.scss
+++ /dev/null
@@ -1,109 +0,0 @@
-@use "global.scss";
-
-div.video.container {
-  display: flex;
-  color: global.$text-color;
-  width: 90%;
-  margin: 16px auto 16px auto;
-  border: solid 1px #00000033;
-  border-radius: 8px;
-  box-shadow: 1px 1px 8px #00000033;
-  padding: 16px;
-  background-color: #ffffff22;
-  backdrop-filter: blur(3px);
-}
-
-div.video.container video#videoplayer {
-  flex-grow: 1;
-  border-radius: 12px;
-  height: auto;
-  max-width: 55%;
-}
-
-div.video.container div.videoobjects {
-  display: grid;
-  padding: 24px;
-}
-
-div.video.container div.videodetails h1#videotitle {
-  padding: 0 12px;
-}
-
-div.dropdown-container {
-  display: flex;
-  flex-direction: column-reverse;
-}
-
-div.video.container div.download-dropdown {
-  position: relative;
-  display: inline-block;
-  padding: 12px;
-  width: 25px;
-  height: 25px;
-  background-color: #21afff;
-  box-shadow: 1px 1px 8px #00000033;
-  border-radius: 50px;
-  transition-duration: 0.35s;
-  font-size: 120%;
-  text-align: center;
-}
-
-div.video.container div.download-dropdown:hover {
-  box-shadow: 1px 1px 8px #00000088;
-}
-
-div.video.container div.download-dropdown div.dropdown-content {
-  display: none;
-  position: absolute;
-  font-size: 80%;
-  min-width: 160px;
-  background-color: #edeeee;
-  box-shadow: 1px 1px 8px #00000033;
-  border-radius: 8px;
-  text-align: center;
-}
-
-div.video.container div.download-dropdown:hover div.dropdown-content {
-  display: block;
-}
-
-div.video.container div.download-dropdown div.dropdown-content ul {
-  list-style-type: none;
-  padding-left: 0;
-}
-
-div.video.container div.download-dropdown div.dropdown-content ul li {
-  padding: 4px;
-  cursor: pointer;
-}
-
-div.video.container div.download-dropdown div.dropdown-content ul li:hover {
-  background-color: #dcdfdf;
-}
-
-div.video.container div.download-dropdown div.dropdown-content ul li a {
-  text-decoration: none;
-  color: global.$text-color;
-}
-
-@media screen and (max-width: global.$mobile-width) {
-  div.video.container {
-    display: block;
-  }
-  div.video.container video#videoplayer {
-    width: 100%;
-    max-width: none;
-  }
-  div.video.container div.download-dropdown {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 12px;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  div.video.container div.download-dropdown div.dropdown-content {
-    background-color: #444444;
-  }
-}