diff --git a/index.css b/index.css
new file mode 100644
index 0000000..7d5f8f3
--- /dev/null
+++ b/index.css
@@ -0,0 +1,111 @@
+@font-face {
+    font-family: "Bokor";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local("Bokor"), url("static/fonts/bokor.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "IBM Plex Mono";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local("IBM Plex Mono"), url("static/fonts/ibm-plex-mono.woff2") format("woff2");
+}
+
+:root {
+    --primary-color: white;
+    --background-color: black;
+}
+
+body,
+.separator,
+.click,
+.footer.buttons img {
+    color: var(--primary-color);
+}
+
+body {
+    background-color: var(--background-color);
+    font-family: 'IBM Plex Mono', monospace;
+}
+
+::selection {
+    background-color: var(--primary-color);
+    color: var(--background-color);
+}
+
+.box,
+.footer {
+    display: flex;
+    justify-content: center;
+    max-width: 480px;
+    margin: 0 auto;
+    padding: 0 10px;
+    box-sizing: border-box;
+    flex-wrap: wrap;
+}
+
+.main-title {
+    font-family: 'Bokor', sans-serif;
+    font-size: 5em;
+    line-height: 1em;
+    margin: 0.2em 0 0 0;
+    user-select: none;
+    font-weight: normal;
+}
+
+@supports (-moz-appearance: none) {
+    .main-title {
+        font-weight: bold;
+    }
+}
+
+.separator {
+    margin: 0.5em auto 0em;
+    width: 50px;
+}
+
+.content {
+    line-height: 1.3em;
+}
+
+.click {
+    text-decoration: underline dotted;
+}
+
+.click:hover {
+    text-decoration: underline solid;
+}
+
+.footer-container {
+    margin: 24px auto auto auto;
+}
+
+@media (min-height: 800px) {
+    .footer-container {
+        position: absolute;
+        inset: auto 0 12px;
+    }
+}
+
+.footer.buttons {
+    line-height: 0;
+}
+
+.footer.buttons a,
+.footer.buttons img {
+    cursor: pointer;
+    image-rendering: pixelated;
+}
+
+.footer.quote {
+    text-align: center;
+    margin: -8px auto auto auto;
+}
+
+.footer.links {
+    margin: -12px auto auto auto;
+    gap: 6px;
+}
diff --git a/index.html b/index.html
index d6f8c52..33c8b5a 100644
--- a/index.html
+++ b/index.html
@@ -5,147 +5,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>futile</title>
+    <link rel="stylesheet" href="index.css">
+    <script src="index.js"></script>
     <link rel="icon" href="static/favicon.svg" type="image/svg+xml">
-    <style>
-        @font-face {
-            font-family: "Bokor";
-            font-style: normal;
-            font-weight: 400;
-            font-display: swap;
-            src: local("Bokor"), url("static/fonts/bokor.woff2") format("woff2");
-        }
-
-        @font-face {
-            font-family: "IBM Plex Mono";
-            font-style: normal;
-            font-weight: 400;
-            font-display: swap;
-            src: local("IBM Plex Mono"), url("static/fonts/ibm-plex-mono.woff2") format("woff2");
-        }
-
-        :root {
-            --primary-color: white;
-            --background-color: black;
-        }
-
-        body,
-        .separator,
-        .click,
-        .footer.buttons img {
-            color: var(--primary-color);
-        }
-
-        body {
-            background-color: var(--background-color);
-            font-family: 'IBM Plex Mono', monospace;
-        }
-
-        ::selection {
-            background-color: var(--primary-color);
-            color: var(--background-color);
-        }
-
-        .box,
-        .footer {
-            display: flex;
-            justify-content: center;
-            max-width: 480px;
-            margin: 0 auto;
-            padding: 0 10px;
-            box-sizing: border-box;
-            flex-wrap: wrap;
-        }
-
-        .main-title {
-            font-family: 'Bokor', sans-serif;
-            font-size: 5em;
-            line-height: 1em;
-            margin: 0.2em 0 0 0;
-            user-select: none;
-            font-weight: normal;
-        }
-
-        @supports (-moz-appearance: none) {
-            .main-title {
-                font-weight: bold;
-            }
-        }
-
-        .separator {
-            margin: 0.5em auto 0em;
-            width: 50px;
-        }
-
-        .content {
-            line-height: 1.3em;
-        }
-
-        .click {
-            text-decoration: underline dotted;
-        }
-
-        .click:hover {
-            text-decoration: underline solid;
-        }
-
-        .footer-container {
-            margin: 24px auto auto auto;
-        }
-
-        @media (min-height: 800px) {
-            .footer-container {
-                position: absolute;
-                inset: auto 0 12px;
-            }
-        }
-
-        .footer.buttons {
-            line-height: 0;
-        }
-
-        .footer.buttons a,
-        .footer.buttons img {
-            cursor: pointer;
-            image-rendering: pixelated;
-        }
-
-        .footer.quote {
-            text-align: center;
-            margin: -8px auto auto auto;
-        }
-
-        .footer.links {
-            margin: -12px auto auto auto;
-            gap: 6px;
-        }
-    </style>
-    <script>
-        const quotes = [
-            "who are you",
-            "lorem ipsum dolor sit amet",
-            "hot garfields in your area",
-            "remember to drink water",
-            "i am not a web developer",
-            "it's nice, isn't it?",
-            "do you like hurting other people?",
-            "check out increm.net !",
-            "get real",
-        ];
-        document.addEventListener('DOMContentLoaded', () => {
-            const randomIndex = Math.floor(Math.random() * quotes.length);
-            document.getElementById('quote').textContent = '« ' + quotes[randomIndex] + ' »';
-        });
-
-        fetch('static/buttons/_alts.json')
-            .then(response => response.json())
-            .then(alts => {
-                document.querySelectorAll("div.footer.buttons img").forEach(img => {
-                    const filename = img.src.split('/').pop();
-                    img.alt = alts[filename] || "no alt text available, sorry";
-                });
-            })
-            .catch(error => console.error('error loading alt texts: ', error));
-    </script>
 </head>
 
 <body>
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..05a04a3
--- /dev/null
+++ b/index.js
@@ -0,0 +1,25 @@
+const quotes = [
+    "who are you",
+    "lorem ipsum dolor sit amet",
+    "hot garfields in your area",
+    "remember to drink water",
+    "i am not a web developer",
+    "it's nice, isn't it?",
+    "do you like hurting other people?",
+    "check out increm.net !",
+    "get real",
+];
+document.addEventListener('DOMContentLoaded', () => {
+    const randomIndex = Math.floor(Math.random() * quotes.length);
+    document.getElementById('quote').textContent = '« ' + quotes[randomIndex] + ' »';
+});
+
+fetch('static/buttons/_alts.json')
+    .then(response => response.json())
+    .then(alts => {
+        document.querySelectorAll("div.footer.buttons img").forEach(img => {
+            const filename = img.src.split('/').pop();
+            img.alt = alts[filename] || "no alt text available, sorry";
+        });
+    })
+    .catch(error => console.error('error loading alt texts: ', error));