extract really needed styles from water.css; skip darkmode as this adds quite some burden to site owners and is easily overseen (eg. already our banners are not-so-nice in tdarkmode), if ppl want to use darkmode, they should actively adapt

www/src/main.css

@@ -1,4 +1,47 @@
 
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
+  line-height: 1.4;
+  font-size: 1.4em;
+  max-width: 800px;
+  margin: 20px auto;
+  padding: 0 10px;
+  color: #363636;
+  background: #fff;
+}
+
+h1 {
+  font-size: 2.2em;
+  margin-top: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: #000;
+  margin-bottom: 12px;
+  margin-top: 24px;
+  font-weight: 600;
+}
+
+a {
+  text-decoration: none;
+  color: #0076d1;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+img, video {
+  max-width: 100%;
+  height: auto;
+}
+
+code {
+  background: #efefef;
+  padding: 2.5px 5px;
+  border-radius: 6px;
+}
+
 #menu {
   display: flex;
   flex-wrap: wrap;

www/src/page-layout.html

@@ -6,7 +6,6 @@
     <meta http-equiv="refresh" content="3">
     {% endif %}
     <title>{{ config.mail_domain }} {{ pagename }}</title>
-    <link rel="stylesheet" href="./water.css">
     <link rel="stylesheet" href="./main.css">
     <link rel="icon" href="/logo.svg">
     <link rel=”mask-icon” href=”/logo.svg” color=”#000000">