separate style and script into files again

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>