diff --git a/index.html b/index.html
index 9a1d9d9..2b71ede 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,61 @@
 <!DOCTYPE html>
 <html>
-	<head>
-      <meta charset="utf-8">
+  <head>
+      <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
-      <link rel="stylesheet" href="nav.css" />
+      <style>
+body {
+    margin: 0;
+}
+
+body > * {
+    box-sizing: border-box;
+    float: left;
+    padding: 4px;
+}
+
+#main {
+    position: absolute;
+    top: 0;
+    left: 192px;
+    width: calc(100% - 192px);
+}
+
+#nav {
+    width: 192px;
+    height: 100%;
+    background-color: #cccccc;
+    position: fixed;
+    top: 0;
+    left: 0;
+}
+
+.nav-item {
+    padding: 0px 4px 0px 4px;
+    margin: 2px;
+    background-color: #800000;
+    color: #ddd;
+    display: block;
+}
+
+.nav-item:hover {
+    background-color: #ffffff;
+    color: #800000;
+}
+
+@media only screen and (max-width: 576px) {
+    #main, #nav {
+        position: initial;
+        width: 100%;
+    }
+    #nav {
+        height: initial;
+    }
+}
+      </style>
       <title>e3team</title>
-	</head>
-  <title>
-  </title>
-	<body>
+  </head>
+  <body>
     <div id="nav">
       <div class="nav-section">
         <span>Navigation</span>
@@ -23,20 +70,25 @@
     </div>
     <div id="main">
       <h1>hi, we're e3team</h1>
-      <p>we're a team/group of friends (mostly software developers) who believe in a free (as in freedom) and decentralized internet</p>
-      <a href="#whoareus">meet the team</a> or <a href="mailto:team+lists@e3t.cc">get in touch</a> or <a href="https://git.e3t.cc">check out our stuff</a>
+      <p>we're a team/group of friends (mostly software developers) who believe
+      in a free (as in freedom) and decentralized internet</p>
+      <a href="#whoareus">meet the team</a> or
+      <a href="mailto:team+lists@e3t.cc">get in touch</a> or
+      <a href="https://git.e3t.cc">check out our stuff</a>
 
       <h2>whoareus</h2>
 
       <ul>
         <li>
-          <b><a href="https://nishi.e3t.cc">nishi</a></b> is a NetBSD enthusiast and accomplished C programmer
+          <b><a href="https://nishi.e3t.cc">nishi</a></b> is a NetBSD 
+          enthusiast and accomplished C programmer
           <blockquote>
             gluten morgen - nishi 2022
           </blockquote>
         </li>
         <li>
-          <b><a href="https://coredoes.dev">core</a></b> is a wannabe network engineer and programmer of 9 years
+          <b><a href="https://coredoes.dev">core</a></b> is a wannabe network
+          engineer and programmer of 9 years
           <blockquote>
           mobil key(br d - core 2022
           </blockquote>
@@ -44,7 +96,8 @@
         <li>
           <b>dooms</b> is a quantum engineer and just likes to chat
           <blockquote>
-            ghostly and ghostly and ghostly is a triple universe fault - dooms 2022
+            ghostly and ghostly and ghostly is a triple universe fault - dooms 
+            2022
           </blockquote>
         </li>
         <li>
@@ -54,9 +107,12 @@
           </blockquote>
         </li>
         <li>
-          <b><a href="https://u8.lc">terra</a></b> is a network engineer and old laptop salvager
+          <b><a href="https://u8.lc">terra</a></b> is a network engineer and old
+          laptop salvager
           <blockquote>
-            walk into a five star hotel with bombs and an ak, then unpack your one tiny suitcase and check it in and leave without staying the night - terra 2021
+            walk into a five star hotel with bombs and an ak, then unpack your
+            one tiny suitcase and check it in and leave without staying the 
+            night - terra 2021
           </blockquote>
         </li>
       </ul>
