diff --git a/main/index.html b/main/index.html
index 74c6fc0..0496b83 100644
--- a/main/index.html
+++ b/main/index.html
@@ -1,10 +1,12 @@
 <!DOCTYPE html>
-<html lang="en-US"><head>
-<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<html lang="en-US">
+    <head>
+        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width">
+	<meta name="description" content="dailitation.xyz is a community-maintained organization consisting of artists, software developers, server administrators focusing on contributing to freely licensed thingamabobs such as software, documentation, and services.">
         <title>dailitation.xyz</title>
-        <link rel="stylesheet" href="https://dailitation.xyz/styles.css">
+        <link rel="stylesheet" href="/styles.css">
     </head>
     <body>
         <main>
@@ -12,7 +14,10 @@
                 <div class="welcome">
                 <p>Welcome to...</p>
                 </div>
-                <img src="https://dailitation.xyz/dailitation-neo.webp" class="logo">
+                <picture>
+                    <source srcset="/dailitation_logo_neo_dark.webp" media="(prefers-color-scheme: dark)" />
+                    <img src="https://dailitation.xyz/dailitation-neo.webp" alt="dailitation.xyz logo" class="logo">
+                </picture>
                 <div class="nav">
                     <p><b><a href="https://dailitation.xyz/">Home page</a></b> |
                     <a href="https://laboratories.dailitation.xyz/">Laboratories</a> |
@@ -22,7 +27,6 @@
                     <a href="https://dailitation.xyz/~/">Team's individual's homepage (~)</a>
                     </p>
                 </div>
-
             </header>
             <article>
                 <h1>About dailitation.xyz</h1>
diff --git a/main/styles.css b/main/styles.css
new file mode 100644
index 0000000..0d7232e
--- /dev/null
+++ b/main/styles.css
@@ -0,0 +1,56 @@
+body {
+    font: 100% / 1.5 "Lucida Grande", "Lucida Sans", "Luxi Sans", "Go", "Atkinson Hyperlegible", Verdana, sans-serif;
+    color: #000000;
+    text-align: left;
+    box-sizing: border-box;
+    /* width: 100%; */
+    background: no-repeat linear-gradient(white, grey);
+    background-size: cover;
+    background-attachment: fixed;
+}
+
+main {
+    max-width: 64rem;
+    width: 100%;
+    padding: 0 1.5rem;
+    box-sizing: border-box;
+    margin: 0 auto;
+    background: white;
+    box-shadow: 2px 2px 12px rgb(0 0 0 / 40%);
+    padding-top: 0.5em;
+}
+
+footer {
+    padding-bottom: 0.1em;
+}
+
+.welcome {
+    margin: 0 auto;
+    width: max-content;
+    display: block;
+    padding-right: 0.5em;
+}
+
+.logo {
+    display: block;
+    margin: auto;
+    object-fit: contain;
+    align-content: center;
+    max-width: 100%;
+}
+
+@media only screen and (prefers-color-scheme: dark) {
+    body {
+        background: no-repeat linear-gradient(black, grey)
+                    black;
+    }
+
+    main {
+        background: #202030;
+        color: #f0f0f0;
+    }
+    
+    a {
+        color: cornflowerblue;
+    }
+}
