Initial commit

25 files changed, 594 insertions, 0 deletions

diff --git a/html/favicon.png b/html/favicon.png
new file mode 100644
index 0000000..9fa1866
--- /dev/null
+++ b/html/favicon.png
diff --git a/html/fonts.css b/html/fonts.css
new file mode 100644
index 0000000..ec15c62
--- /dev/null
+++ b/html/fonts.css
@@ -0,0 +1,44 @@
+@font-face {
+  font-family: CascadiaCode;
+  src: local("CascadiaCode-Light"), url(fonts/CascadiaCode-Light.ttf);
+  font-weight:200;
+}
+
+@font-face {
+  font-family: CascadiaCode;
+  src: local("CascadiaCode-Regular"), url(fonts/CascadiaCode-Regular.ttf);
+}
+
+@font-face {
+  font-family: OpenDyslexic;
+  src: local("OpenDyslexic-Regular"), url(fonts/OpenDyslexic-Regular.otf) format("opentype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: OpenDyslexic;
+  src: local("OpenDyslexic-Italic"), url(fonts/OpenDyslexic-Italic.otf) format("opentype");
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: OpenDyslexic;
+  src: local("OpenDyslexic-Bold"), url(fonts/OpenDyslexic-Bold.otf) format("opentype");
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: OpenDyslexic;
+  src: local("OpenDyslexic-BoldItalic"), url(fonts/OpenDyslexic-BoldItalic.otf) format("opentype");
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: OpenDyslexic, monospace;
+  src: local("OpenDyslexicMono-Regular"), url(fonts/OpenDyslexicMono-Regular.otf) format("opentype");
+}
+
diff --git a/html/fonts/CascadiaCode-Light.ttf b/html/fonts/CascadiaCode-Light.ttf
new file mode 100644
index 0000000..2f79b8e
--- /dev/null
+++ b/html/fonts/CascadiaCode-Light.ttf
diff --git a/html/fonts/CascadiaCode-Regular.ttf b/html/fonts/CascadiaCode-Regular.ttf
new file mode 100644
index 0000000..a86b04d
--- /dev/null
+++ b/html/fonts/CascadiaCode-Regular.ttf
diff --git a/html/fonts/CascadiaCode.ttf b/html/fonts/CascadiaCode.ttf
new file mode 100644
index 0000000..bda8bb9
--- /dev/null
+++ b/html/fonts/CascadiaCode.ttf
diff --git a/html/fonts/OpenDyslexic-Bold.otf b/html/fonts/OpenDyslexic-Bold.otf
new file mode 100644
index 0000000..4c492e2
--- /dev/null
+++ b/html/fonts/OpenDyslexic-Bold.otf
diff --git a/html/fonts/OpenDyslexic-BoldItalic.otf b/html/fonts/OpenDyslexic-BoldItalic.otf
new file mode 100644
index 0000000..f71b430
--- /dev/null
+++ b/html/fonts/OpenDyslexic-BoldItalic.otf
diff --git a/html/fonts/OpenDyslexic-Italic.otf b/html/fonts/OpenDyslexic-Italic.otf
new file mode 100644
index 0000000..fdead4d
--- /dev/null
+++ b/html/fonts/OpenDyslexic-Italic.otf
diff --git a/html/fonts/OpenDyslexic-Regular.otf b/html/fonts/OpenDyslexic-Regular.otf
new file mode 100644
index 0000000..1226d2a
--- /dev/null
+++ b/html/fonts/OpenDyslexic-Regular.otf
diff --git a/html/fonts/OpenDyslexicAlta-Bold.otf b/html/fonts/OpenDyslexicAlta-Bold.otf
new file mode 100644
index 0000000..37f6d5e
--- /dev/null
+++ b/html/fonts/OpenDyslexicAlta-Bold.otf
diff --git a/html/fonts/OpenDyslexicAlta-BoldItalic.otf b/html/fonts/OpenDyslexicAlta-BoldItalic.otf
new file mode 100644
index 0000000..df71ef7
--- /dev/null
+++ b/html/fonts/OpenDyslexicAlta-BoldItalic.otf
diff --git a/html/fonts/OpenDyslexicAlta-Italic.otf b/html/fonts/OpenDyslexicAlta-Italic.otf
new file mode 100644
index 0000000..5233fe0
--- /dev/null
+++ b/html/fonts/OpenDyslexicAlta-Italic.otf
diff --git a/html/fonts/OpenDyslexicAlta-Regular.otf b/html/fonts/OpenDyslexicAlta-Regular.otf
new file mode 100644
index 0000000..6eb4a3e
--- /dev/null
+++ b/html/fonts/OpenDyslexicAlta-Regular.otf
diff --git a/html/fonts/OpenDyslexicMono-Regular.otf b/html/fonts/OpenDyslexicMono-Regular.otf
new file mode 100644
index 0000000..543d46b
--- /dev/null
+++ b/html/fonts/OpenDyslexicMono-Regular.otf
diff --git a/html/fonts/cascadiacode-light-webfont.woff b/html/fonts/cascadiacode-light-webfont.woff
new file mode 100644
index 0000000..258ea8e
--- /dev/null
+++ b/html/fonts/cascadiacode-light-webfont.woff
diff --git a/html/fonts/cascadiacode-light-webfont.woff2 b/html/fonts/cascadiacode-light-webfont.woff2
new file mode 100644
index 0000000..c48d29a
--- /dev/null
+++ b/html/fonts/cascadiacode-light-webfont.woff2
diff --git a/html/fonts/cascadiacode-regular-webfont.woff b/html/fonts/cascadiacode-regular-webfont.woff
new file mode 100644
index 0000000..6b6c00f
--- /dev/null
+++ b/html/fonts/cascadiacode-regular-webfont.woff
diff --git a/html/fonts/cascadiacode-regular-webfont.woff2 b/html/fonts/cascadiacode-regular-webfont.woff2
new file mode 100644
index 0000000..ce8aa3d
--- /dev/null
+++ b/html/fonts/cascadiacode-regular-webfont.woff2
diff --git a/html/img/surprised_cat.webp b/html/img/surprised_cat.webp
new file mode 100755
index 0000000..91e5eab
--- /dev/null
+++ b/html/img/surprised_cat.webp
diff --git a/html/img/vcss-blue b/html/img/vcss-blue
new file mode 100644
index 0000000..c373b2a
--- /dev/null
+++ b/html/img/vcss-blue
diff --git a/html/img/wwe_fight.webp b/html/img/wwe_fight.webp
new file mode 100644
index 0000000..e6aac88
--- /dev/null
+++ b/html/img/wwe_fight.webp
diff --git a/html/index.html b/html/index.html
new file mode 100644
index 0000000..b3d4cc6
--- /dev/null
+++ b/html/index.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Voice server for INL/CSH and beyond</title>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <!--link rel="stylesheet" href="normalize.css"-->
+    <link rel="stylesheet" href="fonts.css">
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <input type="radio" name="font" checked="checked" id="defaultfont-rb" class="i-am-having-fun-cb">
+    <input type="radio" name="font" id="monofont-rb" class="i-am-having-fun-cb">
+    <input type="radio" name="font" id="dyslexicfont-rb" class="i-am-having-fun-cb">
+    <input type="checkbox" id="maxwidth-cb" class="i-am-having-fun-cb">
+    <input type="checkbox" id="sepia-cb" class="i-am-having-fun-cb">
+    <article class="content">
+      <a id="top"></a>
+      <h1>Voice server for INL/CSH and beyond</h1>
+      <nav class="nav">
+        <a class="box-link" href="#intents-and-purposes">Intents and purposes</a><!--
+        --><a class="box-link" href="#configuration">Configuration</a><!--
+        --><a class="box-link" href="#usage">Usage</a><!--
+        --><!--a class="box-link" href="#extra">Extra</a-->
+      </nav>
+      <hr>
+      <h2 id="intents-and-purposes">Intents and purposes<a href="#top" class="link-to-top"><sup>⤴</sup></a></h2>
+      <p> I set up this voice communication server to ease anything that involves/requires oral communication during the lockdown and most likely beyond that. You can use it for work, breaks, general recreation... I personally am connected most of the time during work hours, as if it were a virtual office. Some of my colleagues/friends also sometimes do this, and you are free to create your own personal virtual office if you want (even if you don't work with me). </p>
+      <p> <b>Note on privacy:</b> Although there is no end-to-end encryption, all traffic between clients and the server is encrypted. Operational logs (connection + error logs) are automatically flushed weekly. No data is kept except for the necessary rooms and users data (that means the chat is ephemeral, for better or worse). </p>
+      <h2 id="configuration">Configuration<a href="#top" class="link-to-top"><sup>⤴</sup></a></h2>
+      <ul>
+        <li>
+          You need to have a <a href="https://www.mumble.info">mumble</a> client installed. Mumble is a free, open source, low latency, high quality voice chat application. It is supported on all major OSes, with the exception of Android (only a 3rd party one, Mumla, exists today).
+        </li>
+        <li>
+          You can automatically join the server by following this URL:<br/>
+          <div class="prose-box-link-ctnr"><a class="breakable box-link" href="mumble://mumble.zrounba.fr:6738/?version=1.3">mumble://mumble.zrounba.fr:6738/?version=1.3</a></div>
+        </li>
+        <li>
+          Or connect manually using the following parameters:
+          <ul>
+            <li>
+              <b>Address:</b>
+              mumble.zrounba.fr
+            </li>
+            <li>
+              <b>Port:</b>
+              6738
+            </li>
+            <li>
+              <b>Username:</b>
+              Whatever you wish but preferably your name
+            </li>
+            <li>
+              <b>Password:</b>
+              If you were not already given the password, ask me on matrix <a href="https://matrix.to/#/@clement-z:matrix.org">@clement-z:matrix.org</a> or via mail. Please do not give it to other people without my consent.
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <h2 id="usage">Usage<a href="#top" class="link-to-top"><sup>⤴</sup></a></h2>
+      <h3 id="registration">Registration</h3>
+      <p> Once you are connected, you can register on the server: this will tie your current username (on the server) to your personal SSL certificate (which was autogenerated by your mumble client). If you then want to be able to use the same username on a different computer, you will need to export your certificate and import it on the other client (using mumble's certificate wizard on PC). </p>
+      <h3 id="rules">Rules</h3>
+      <p> There are no specific rules beyond common courtesy. I think everyone who will have access to this server (at least in the foreseeable future) knows how to behave him/herself. </p>
+      <p> There are two main sections in the server, one for work, and the other for recreation. Please respect people who are in work-related rooms. </p>
+      <h3 id="configuration-guidelines-and-tips">Configuration guidelines and tips</h3>
+      <p> Here are some guidelines on how to configure Mumble so that no-one ends up deaf and everyone can communicate properly... </p>
+      <ul>
+        <li>
+          <b>Use a headset!</b>
+          No amount of audio processing can completely compensate for a bad mic or using loudspeakers. With the current situation, I think buying a decent headset is a logical decision anyways. I personally bought a <a href="">HyperX Cloud Stinger Wireless</a> for under 90€ during the first lock-down and I am very happy about my purchase. I previously used a 35€ <a href="https://www.logitechg.com/en-au/products/gaming-audio/g430-7-1-surround-sound-gaming-headset.html">Logitech G430</a> wired headset, which eventually started acting up and randomly destroying my friends' eardrums due to faulty contacts. It lasted me around a year. If you want to give your own recommendations for mics or headset, please do: I will add a "devices" section later if I have enough input.
+        </li>
+        <li>
+          <b>Run the audio wizard!</b>
+          If you connect for the first time, please do go through Mumble's audio wizard. It is fast (~2 minutes) and in most cases should give satisfying results. If you skipped it the first time, or if you change your set-up, you can run it again from the 'Configure → Audio wizard...' menu action.
+        </li>
+        <li>
+          <b>Disable/configure text-to-speech:</b>
+          this feature is mainly aimed at gamers, so they don't have to exit the game focus when they receive a message or when someone joins the room. In your client's settings, you can selectively enable/disable this feature depending on the type of event (e.g. room join/leave, text messages...). I personnally disabled test-to-speech entirely.
+        </li>
+        <li>
+          <b>Echo cancellation:</b>
+          If you do not use a headset, be sure to <a href="https://wiki.mumble.info/wiki/Audio#Echo_Cancellation">enable echo cancellation</a> on your client. It might also be needed even if you have a headset, in case of cross-talk between your audio in/out channels.
+        </li>
+        <li>
+          I will try to add more info here later but please consult the rest of <a href="https://wiki.mumble.info/wiki/FAQ/English">the mumble FAQ</a> (and specifically the <a href="https://wiki.mumble.info/wiki/FAQ/English#Audio_Features">Audio features</a> section) if you experience issues.
+        </li>
+      </ul>
+    </article>
+    <footer>
+      <div>
+      <div>
+        <div class="box"> Font:
+          <label for="defaultfont-rb" class="box-link lbl defaultfont-rb">Default</label><!--
+          --><label for="monofont-rb" class="box-link lbl monofont-rb">Mono</label><!--
+          --><label for="dyslexicfont-rb" class="box-link lbl dyslexicfont-rb">Dyslexic</label>
+        </div>
+        <label for="maxwidth-cb" class="box-link lbl maxwidth-cb">Full width</label>
+        <label for="sepia-cb" class="box-link lbl sepia-cb">Sepia</label>
+      </div>
+      <div class="validation-icons" style="text-align:right;">
+      <a style="font-size:0; margin:.2rem;" href="https://validator.w3.org/nu/?doc=https%3A%2F%2Fmumble.zrounba.fr%2F">
+      <img style="height:1.5rem;" alt="W3C Validation" src="https://img.shields.io/w3c-validation/default?targetUrl=https%3A%2F%2Fmumble.zrounba.fr"/>
+      </a>
+      <a style="font-size:0; margin:.2rem;" href="https://jigsaw.w3.org/css-validator/check/referer">
+        <img style="border:0;height:1.5rem"
+             src="img/vcss-blue"
+             alt="Valid CSS!" />
+      </a>
+      </div>
+      </div>
+      <div class="footer-author">© 2020 Clément Zrounba</div>
+    </footer>
+    <div class="background"></div>
+  </body>
+</html>
diff --git a/html/index2.html b/html/index2.html
new file mode 100644
index 0000000..57ba03b
--- /dev/null
+++ b/html/index2.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Voice server for INL/CSH and beyond</title>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <!--link rel="stylesheet" href="normalize.css"-->
+    <link rel="stylesheet" href="fonts.css">
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <input type="radio" name="font" checked="checked" id="defaultfont-rb" class="i-am-having-fun-cb">
+    <input type="radio" name="font" id="monofont-rb" class="i-am-having-fun-cb">
+    <input type="radio" name="font" id="dyslexicfont-rb" class="i-am-having-fun-cb">
+    <input type="checkbox" id="maxwidth-cb" class="i-am-having-fun-cb">
+    <input type="checkbox" id="sepia-cb" class="i-am-having-fun-cb">
+    <article class="content">
+      <a id="top"></a>
+      <h1>Voice server for INL/CSH and beyond</h1>
+      <nav class="nav">
+        <a class="box-link" href="#intents-and-purposes">Intents and purposes</a><!--
+        --><a class="box-link" href="#configuration">Configuration</a><!--
+        --><a class="box-link" href="#usage">Usage</a><!--
+        --><!--a class="box-link" href="#extra">Extra</a-->
+      </nav>
+      <hr>
+      <h2 id="intents-and-purposes">Intents and purposes<a href="#top" class="link-to-top"><sup>⤴</sup></a></h2>
+      <p> I set up this voice communication server to ease anything that involves/requires oral communication during the lockdown and most likely beyond that. You can use it for work, breaks, general recreation... I personally am connected most of the time during work hours, as if it were a virtual office. Some of my colleagues/friends also sometimes do this, and you are free to create your own personal virtual office if you want (even if you don't work with me). </p>
+      <p> <b>Note on privacy:</b> Although there is no end-to-end encryption, all traffic between clients and the server is encrypted. Except from operational logs which are regularly flushed, no data is kept except for rooms and users data (that means the chat is ephemeral, for better or worse). </p>
+      <h2 id="configuration">Configuration<a href="#top" class="link-to-top"><sup>⤴</sup></a></h2>
+      <ul>
+        <li>
+          You need to have a <a href="https://www.mumble.info">mumble</a> client installed. Mumble is a free, open source, low latency, high quality voice chat application. It is supported on all major OSes, with the exception of Android (only a 3rd party one, Mumla, exists today).
+        </li>
+        <li>
+          You can automatically join the server by following this URL:<br/>
+          <div class="prose-box-link-ctnr"><a class="breakable box-link" href="mumble://mumble.zrounba.fr:6738/?version=1.3">mumble://mumble.zrounba.fr:6738/?version=1.3</a></div>
+        </li>
+        <li>
+          Or connect manually using the following parameters:
+          <ul>
+            <li>
+              <b>Address:</b>
+              mumble.zrounba.fr
+            </li>
+            <li>
+              <b>Port:</b>
+              6738
+            </li>
+            <li>
+              <b>Username:</b>
+              Whatever you wish but preferably your name
+            </li>
+            <li>
+              <b>Password:</b>
+              If you were not already given the password, ask me on matrix <a href="https://matrix.to/#/@clement-z:matrix.org">@clement-z:matrix.org</a> or via mail. Please do not give it to other people without my consent.
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <h2 id="usage">Usage<a href="#top" class="link-to-top"><sup>⤴</sup></a></h2>
+      <h3 id="registration">Registration</h3>
+      <p> Once you are connected, you can register on the server: this will tie your current username (on the server) to your personal SSL certificate (which was autogenerated by your mumble client). If you then want to be able to use the same username on a different computer, you will need to export your certificate and import it on the other client (using mumble's certificate wizard on PC). </p>
+      <h3 id="rules">Rules</h3>
+      <p> There are no specific rules beyond common courtesy. I think everyone who will have access to this server (at least in the foreseeable future) knows how to behave him/herself. </p>
+      <p> There are two main sections in the server, one for work, and the other for recreation. Please respect people who are in work-related rooms. </p>
+      <h3 id="configuration-guidelines-and-tips">Configuration guidelines and tips</h3>
+      <p> Here are some guidelines on how to configure Mumble so that no-one ends up deaf and everyone can communicate properly... </p>
+      <ul>
+        <li>
+          <b>Use a headset!</b>
+          No amount of audio processing can completely compensate for a bad mic or using loudspeakers. With the current situation, I think buying a decent headset is a logical decision anyways. I personally bought a <a href="">HyperX Cloud Stinger Wireless</a> for under 90€ during the first lock-down and I am very happy about my purchase. I previously used a 35€ <a href="https://www.logitechg.com/en-au/products/gaming-audio/g430-7-1-surround-sound-gaming-headset.html">Logitech G430</a> wired headset, which eventually started acting up and randomly destroying my friends' eardrums due to faulty contacts. It lasted me around a year. If you want to give your own recommendations for mics or headset, please do: I will add a "devices" section later if I have enough input.
+        </li>
+        <li>
+          <b>Run the audio wizard!</b>
+          If you connect for the first time, please do go through Mumble's audio wizard. It is fast (~2 minutes) and in most cases should give satisfying results. If you skipped it the first time, or if you change your set-up, you can run it again from the 'Configure → Audio wizard...' menu action.
+        </li>
+        <li>
+          <b>Disable/configure text-to-speech:</b>
+          this feature is mainly aimed at gamers, so they don't have to exit the game focus when they receive a message or when someone joins the room. In your client's settings, you can selectively enable/disable this feature depending on the type of event (e.g. room join/leave, text messages...). I personnally disabled test-to-speech entirely.
+        </li>
+        <li>
+          <b>Echo cancellation:</b>
+          If you do not use a headset, be sure to <a href="https://wiki.mumble.info/wiki/Audio#Echo_Cancellation">enable echo cancellation</a> on your client. It might also be needed even if you have a headset, in case of cross-talk between your audio in/out channels.
+        </li>
+        <li>
+          I will try to add more info here later but please consult the rest of <a href="https://wiki.mumble.info/wiki/FAQ/English">the mumble FAQ</a> (and specifically the <a href="https://wiki.mumble.info/wiki/FAQ/English#Audio_Features">Audio features</a> section) if you experience issues.
+        </li>
+      </ul>
+      
+      <hr style="margin-top: 4em;"/>
+      <hr/>
+      <hr/>
+      <hr/>
+      <h2 id="extra">En supplément, quelques GIFs pour rendre la page assez cool pour Etienne (enfin, techniquement, c'est du WebP 😉)<a href="#top" class="link-to-top"><sup>⤴</sup></a></h2>
+      <div style="text-align:center;">
+      <div class="figure">
+        <img alt="a WWE fight extract" src="img/wwe_fight.webp"/>
+        <div class="caption">Alors ça c'est un mec qui en défonce un autre... Mais on a un peut l'impression qu'il se laisse faire le gus.</div>
+      </div>
+      <div class="figure">
+        <img alt="a surprised/shocked cat" src="img/surprised_cat.webp"/>
+        <div class="caption">Et ça, c'est un la réaction d'un chat tout mignon qui voit la scène.</div>
+      </div>
+      </div>
+     
+    </article>
+    <div class="background"></div>
+    <footer>
+      <div>
+      <div>
+        <div class="box"> Font:
+          <label for="defaultfont-rb" class="box-link lbl defaultfont-rb">Default</label><!--
+          --><label for="monofont-rb" class="box-link lbl monofont-rb">Mono</label><!--
+          --><label for="dyslexicfont-rb" class="box-link lbl dyslexicfont-rb">Dyslexic</label>
+        </div>
+        <label for="maxwidth-cb" class="box-link lbl maxwidth-cb">Full width</label>
+        <label for="sepia-cb" class="box-link lbl sepia-cb">Sepia</label>
+      </div>
+      <div class="validation-icons" style="text-align:right;">
+      <a style="font-size:0; margin:.2rem;" href="https://validator.w3.org/nu/?doc=https%3A%2F%2Fmumble.zrounba.fr%2F">
+      <img style="height:1.5rem;" alt="W3C Validation" src="https://img.shields.io/w3c-validation/default?targetUrl=https%3A%2F%2Fmumble.zrounba.fr"/>
+      </a>
+      <a style="font-size:0; margin:.2rem;" href="https://jigsaw.w3.org/css-validator/check/referer">
+        <img style="border:0;height:1.5rem"
+             src="img/vcss-blue"
+             alt="Valid CSS!" />
+      </a>
+      </div>
+      </div>
+      <div class="footer-author">© 2020 Clément Zrounba</div>
+    </footer>
+  </body>
+</html>
diff --git a/html/robots.txt b/html/robots.txt
new file mode 100644
index 0000000..1f53798
--- /dev/null
+++ b/html/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /
diff --git a/html/styles.css b/html/styles.css
new file mode 100644
index 0000000..8cd39c3
--- /dev/null
+++ b/html/styles.css
@@ -0,0 +1,295 @@
+body {
+  font-family: serif;
+  --main-background: #fff;
+  --main-foreground: #333;
+  --toolbar-background-hover: #eee;
+  --toolbar-background-active: #ccc;
+  --toolbar-border: rgba(12, 12, 13, 0.2);
+  --toolbar-box-shadow: rgba(12, 12, 13, 0.1);
+  --anchor-link: darkblue;
+}
+
+.background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--main-background);
+  z-index: -1;
+}
+
+.content {
+  max-width: 50em;
+  padding: 1em;
+  margin: auto;
+  margin-top: 1em;
+  margin-bottom: 1em;
+
+  /*
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px #cacaca,0 0 0 4px #eee;
+  */
+
+  border: 1px solid var(--toolbar-border);
+  border-radius: 6px;
+  box-shadow: 0 2px 8px var(--toolbar-box-shadow);
+
+  line-height: 1.9;
+
+  background-color: var(--main-background);
+  color: var(--main-foreground);
+}
+
+.mono {
+  font-family:'Cascadia Code Webfont';
+}
+
+div.figure {
+  display: inline-block;
+  text-align:center;
+  margin: 1em;
+  max-width: min(100%, 30em);
+  padding: 0;
+  overflow-x:hidden;
+  border: 1px solid var(--toolbar-border);
+  border-radius: 8px;
+  box-shadow: 0 4px 8px 0 var(--toolbar-box-shadow), 0 6px 20px 0 var(--toolbar-box-shadow);
+}
+
+div.figure .caption {
+  display: block;
+  max-width: 100%;
+
+  margin: auto;
+  padding: .5em;
+}
+
+div.figure img {
+  display: block;
+  width: 110%;
+  margin: 0;
+}
+
+footer {
+  /*display: flex;
+  align-items: center;
+  flex-wrap: wrap;*/
+  display: block;
+  padding-top: 1em;
+  border-top: 1px solid var(--toolbar-border);
+  text-align: right;
+} 
+
+h1 {
+  text-align: center;
+  margin: 0 auto .5em auto;
+}
+
+h3 {
+  border-bottom: 1px solid var(--toolbar-border);
+}
+
+hr {
+  height: 0;
+  border: none;
+  border-bottom: 1px solid var(--toolbar-border);
+}
+
+p {
+  margin: 1em;
+}
+
+li {
+  margin: 0.3em;
+}
+
+a {
+  color: var(--anchor-link);
+}
+
+a.breakable {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+
+footer div {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.validation-icons {
+  margin-left:auto;
+  text-align:right;
+}
+
+.footer-author {
+  display: block;
+  margin-left:auto;
+  text-align:right;
+}
+
+.validation-icons ~ .footer-author {
+  margin-left: 0;
+}
+
+.nav {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  text-align: center;
+  padding: 0;
+  margin: 0;
+  margin-bottom: 1em;
+}
+
+.prose-box-link-ctnr {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  margin: auto;
+  margin-top: .4em;
+  margin-bottom: .9em;
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+.box, .box-link {
+  text-decoration: underline;
+  display: inline-block;
+  align-items: center;
+  /*inline-block;*/
+
+  background-color: var(--main-background);
+
+  padding: .3em;
+  margin: auto;
+
+  border: 1px solid var(--toolbar-border);
+  border-radius: 6px;
+  box-shadow: 0 2px 8px var(--toolbar-box-shadow);
+  overflow-x: hidden;
+}
+
+.box-link a {
+}
+
+.box {
+  display: flex;
+  flex-direction:row;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: .2em;
+}
+
+a.box-link {
+  cursor: pointer;
+}
+
+.box-link {
+  text-decoration: underline;
+  display: block;
+}
+
+.nav a.box-link {
+  margin: 0.2em;
+  font-variant: small-caps;
+  text-decoration: none;
+}
+
+footer .box-link, footer .box {
+  text-decoration: none;
+  font-variant: small-caps;
+}
+
+.box-link:hover {
+  background-color: var(--toolbar-background-hover);
+}
+
+.i-am-having-fun-cb {
+  display: none;
+}
+
+.lbl {
+  cursor: pointer;
+
+  display: inline-block;
+  text-decoration: none;
+  font-variant: small-caps;
+  padding: 4px;
+  margin: .2em
+}
+
+#defaultfont-rb:checked ~ * {
+  font-family: inherit;
+  font-weight: normal;
+}
+
+#monofont-rb:checked ~ * {
+  font-family: 'Cascadia Code Webfont';
+  line-height: 2.1;
+}
+
+#dyslexicfont-rb:checked ~ * {
+  font-family: OpenDyslexic;
+  font-weight: normal;
+  line-height: 2.1;
+}
+
+footer label.lbl {
+  background-color: var(--main-background);
+}
+
+#maxwidth-cb:checked ~ .content {
+  max-width: 100%;
+  box-shadow: none;
+  border: none;
+  padding: 1em;
+}
+
+#sepia-cb:checked ~ * {
+  --main-background: #f4ecd8;
+  --main-foreground: #5b4636;
+  --toolbar-border: rgba(19, 14, 11, 0.2);
+  --toolbar-border-shadow: rgba(19, 14, 11, 0.1);
+  --toolbar-background-hover: #e4dcc8;
+  --toolbar-background-active: #d4ccb8;
+}
+
+#defaultfont-rb:checked ~ footer .defaultfont-rb {
+  background-color: var(--toolbar-background-active);
+}
+
+#monofont-rb:checked ~ footer .monofont-rb {
+  background-color: var(--toolbar-background-active);
+}
+
+#dyslexicfont-rb:checked ~ footer .dyslexicfont-rb {
+  background-color: var(--toolbar-background-active);
+}
+
+#maxwidth-cb:checked ~ footer .maxwidth-cb {
+  background-color: var(--toolbar-background-active);
+}
+
+#sepia-cb:checked ~ footer .sepia-cb {
+  background-color: var(--toolbar-background-active);
+}
+
+.link-to-top {
+  text-decoration: none;
+}
+
+@media only screen and (max-width: 50em) {
+  .content {
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  div label.maxwidth-cb {
+    background-color: var(--toolbar-background-active);
+  }
+}