diff --git a/global.css b/global.css
new file mode 100644
index 0000000..3a3e315
--- /dev/null
+++ b/global.css
@@ -0,0 +1,61 @@
+@font-face {
+    font-family: heartFont;
+    src: url("ttf/rainyhearts.ttf");
+}
+
+@keyframes rainbow_anim {
+
+    0%,
+    100% {
+        background-position: 0 0;
+    }
+
+    50% {
+        background-position: 100% 0;
+    }
+}
+
+img {
+    border: 1px solid white;
+}
+
+.rainbow-text {
+    text-align: center;
+    background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff);
+    background-clip: text;
+    color: transparent !important;
+    animation: rainbow_anim 15s ease-in-out infinite;
+    background-size: 400% 100%;
+}
+
+#main-content {
+    grid-area: a;
+}
+
+#additional-content {
+    grid-area: b;
+}
+
+#contact-content {
+    grid-area: c;
+}
+
+#nav-content {
+    grid-area: d;
+}
+
+#main-box {
+    display: grid;
+    grid-template-areas:
+        "a a a b"
+        "a a a c"
+        "a a a d";
+}
+
+body {
+    font-family: heartFont;
+    color: white;
+    font-weight: 800;
+    font-size: 23px;
+    background-color: #0f0f0f;
+}
diff --git a/index.html b/index.html
index e6b66e4..23752aa 100644
--- a/index.html
+++ b/index.html
@@ -1,160 +1,83 @@
 <html>
-<div id="flex-container">
-    <div id="main-flex">
-        <h1 style="text-align: center;">hello world</h1>
-        <div id="main-box">
-            <div class="main-content">
-                <h3>whoami</h3>
-                <p>I'm <b class="rainbow-text">hex</b>, short for hexlocation.</p>
-                <p>Student and FOSS enthusiast.</p>
-                <p>Interested in</p>
-                <ul>
-                    <li>Embedded devices & firmware development (Coreboot/Libreboot)</li>
-                    <li>All things Linux</li>
-                    <li>ThinkPads (currently have: L14G2A, P50, T480 and soon a T440p)</li>
-                    <li>Internet & Software Freedom (foss)</li>
-                </ul>
-                <a href="hw.html">Click here to view my hardware.</a>
-                <p>P.S. I'm going to FOSDEM 2025 this year. You might meet me!</p>
-            </div>
-            <div class="additional-content">
-                <h3>banners</h3>
-                <div id="banners">
-                    <a href="https://archive.org">
-                        <img src="img/ia.gif"></img>
-                    </a>
+    <head>
+        <link rel="stylesheet" href="global.css"/>
+    </head>
+<div id="main-box">
+    <div class="main-content">
+        <h3>whoami</h3>
+        <p>I'm <b class="rainbow-text">hex</b>, short for hexlocation.</p>
+        <p>Student and FOSS enthusiast.</p>
+        <p>Interested in</p>
+        <ul>
+            <li>Embedded devices & firmware development (Coreboot/Libreboot)</li>
+            <li>All things Linux</li>
+            <li>ThinkPads (currently have: L14G2A, P50, T480 and soon a T440p)</li>
+            <li>Internet & Software Freedom (foss)</li>
+        </ul>
+        <a href="hw.html">Click here to view my hardware.</a>
+        <p>P.S. I'm going to FOSDEM 2025 this year. You might meet me!</p>
+    </div>
+    <div class="additional-content">
+        <h3>banners</h3>
+        <div id="banners">
+            <a href="https://archive.org">
+                <img src="img/ia.gif"></img>
+            </a>
 
-                    <img src="img/hair.png"></img>
-                    <img src="img/hand.webp"></img>
-                    <img src="img/fuckcss.png"></img>
+            <img src="img/hair.png"></img>
+            <img src="img/hand.webp"></img>
+            <img src="img/fuckcss.png"></img>
 
-                    <a href="https://store.steampowered.com/app/2357910/Home_Safety_Hotline/">
-                        <img src="img/hsh.gif"></img>
-                    </a>
+            <a href="https://store.steampowered.com/app/2357910/Home_Safety_Hotline/">
+                <img src="img/hsh.gif"></img>
+            </a>
 
-                    <a href="https://recaptcha.sucks/">
-                        <img src="img/fuckgoogle.png"></img>
-                    </a>
+            <a href="https://recaptcha.sucks/">
+                <img src="img/fuckgoogle.png"></img>
+            </a>
 
-                    <a href="">
-                        <img src="img/clickme.gif"></img>
-                    </a>
+            <a href="">
+                <img src="img/clickme.gif"></img>
+            </a>
 
-                    <a href="https://avitld.xyz/">
-                        <img src="img/avitldv2.gif"></img>
-                    </a>
+            <a href="https://avitld.xyz/">
+                <img src="img/avitldv2.gif"></img>
+            </a>
 
-                    <a href="https://heroin.zone/">
-                        <img src="img/hz.gif"></img>
-                    </a>
+            <a href="https://heroin.zone/">
+                <img src="img/hz.gif"></img>
+            </a>
 
-                    <a href="https://iwakura.rip/">
-                        <img src="img/iwakura.gif"></img>
-                    </a>
+            <a href="https://iwakura.rip/">
+                <img src="img/iwakura.gif"></img>
+            </a>
 
-                    <a href="https://heroin.zone/~andre/">
-                        <img src="img/andre.png"></img>
-                    </a>
+            <a href="https://heroin.zone/~andre/">
+                <img src="img/andre.png"></img>
+            </a>
 
-                    <img src="img/win10no.gif"></img>
-                    <img src="img/fuckgoogle.gif"></img>
+            <img src="img/win10no.gif"></img>
+            <img src="img/fuckgoogle.gif"></img>
 
-                    <a href="https://www.patrick-breyer.de/en/posts/chat-control/">
-                        <img src="img/chatcontrol.gif"></img>
-                    </a>
-                </div>
-            </div>
-            <div class="contact-content">
-                <h3>contact</h3>
-                <p>e-mail & xmpp: hex[at]iwakura.rip<br>
-                    discord: hex.maybe</p>
-            </div>
-            <div class="nav-content">
-                <h3>links</h3>
-                <a href="files/">
-                    <img src="img/files.png"></img>
-                </a>
-
-                <a href="img/">
-                    <img src="img/design.png"></img>
-                </a>
-            </div>
+            <a href="https://www.patrick-breyer.de/en/posts/chat-control/">
+                <img src="img/chatcontrol.gif"></img>
+            </a>
         </div>
     </div>
+    <div class="contact-content">
+        <h3>contact</h3>
+        <p>e-mail & xmpp: hex[at]iwakura.rip<br>
+            discord: hex.maybe</p>
+    </div>
+    <div class="nav-content">
+        <h3>links</h3>
+        <a href="files/">
+            <img src="img/files.png"></img>
+        </a>
+
+        <a href="img/">
+            <img src="img/design.png"></img>
+        </a>
+    </div>
 </div>
-
 </html>
-
-<style>
-    @font-face {
-        font-family: heartFont;
-        src: url("ttf/rainyhearts.ttf");
-    }
-
-    @keyframes rainbow_anim {
-
-        0%,
-        100% {
-            background-position: 0 0;
-        }
-
-        50% {
-            background-position: 100% 0;
-        }
-    }
-
-    @keyframes border_amim {
-
-        0%,
-        100% {
-            background-position: 0 0;
-        }
-
-        50% {
-            background-position: 100% 0;
-        }
-    }
-
-    img {
-        border: 1px solid white;
-    }
-
-    .rainbow-text {
-        text-align: center;
-        background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff);
-        background-clip: text;
-        color: transparent !important;
-        animation: rainbow_anim 15s ease-in-out infinite;
-        background-size: 400% 100%;
-    }
-
-    #main-box {
-        display: inline-grid;
-        grid-template-columns: 50vw 20vw;
-        grid-auto-flow: row;
-        grid-gap: 20px;
-
-    }
-
-    #main-flex {
-        padding: 30px;
-        border: 3px solid white;
-        border-radius: 10px;
-        box-shadow: 0px 0px 20px white;
-        color: white;
-    }
-
-    #flex-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100%;
-    }
-
-    body {
-        font-family: heartFont;
-        font-weight: 800;
-        font-size: 23px;
-        background-color: black;
-    }
-</style>
