Center?

2 files changed, 72 insertions, 55 deletions

diff --git a/index.html b/index.html
index d736716..0beba12 100644
--- a/index.html
+++ b/index.html
@@ -17,54 +17,57 @@
             <img src="arfnet_logo.png" width="64"><span class="title"><strong>ARFNET</strong></span>
         </header>
         <hr>
-        <center>
-            <a class="fst" href="/design.html">Design Philosophy</a>
-            <a class="sec" href="https://www.youtube.com/watch?v=lbsce1DniQA&list=PLhWQL9gpbCPb8JNtOFo760GUD4ekXiR-9">Youtube</a>
-            <a class="sec" href="http://cgit.arf20.com/">Git</a>
-            <a class="sec" href="https://github.com/ARF20NET">GitHub</a>
-            <a class="sec" href="/contact.html">Contact</a>
-            <a class="sec" href="http://lists.arf20.com">Mailing list</a>
-            <a class="sec" href="http://grafana.arf20.com/public-dashboards/074973f696bd4d56afcddb08a3114041">Grafana</a>
-            <a class="sec" href="https://discord.gg/jy6AjN9ACP">Discord</a>
-            <a class="sec" href="/donate.html">Donations and Accounting</a><br>
-        </center>
-            <marquee scrollamount="15">Now fully legal</marquee>
+        <nav class="navbar">
+            <a class="navlink" href="/design.html">Design Philosophy</a>
+            <a class="navlink" href="https://www.youtube.com/watch?v=lbsce1DniQA&list=PLhWQL9gpbCPb8JNtOFo760GUD4ekXiR-9">Youtube</a>
+            <a class="navlink" href="http://cgit.arf20.com/">Git</a>
+            <a class="navlink" href="https://github.com/ARF20NET">GitHub</a>
+            <a class="navlink" href="/contact.html">Contact</a>
+            <a class="navlink" href="http://lists.arf20.com">Mailing list</a>
+            <a class="navlink" href="http://grafana.arf20.com/public-dashboards/074973f696bd4d56afcddb08a3114041">Grafana</a>
+            <a class="navlink" href="https://discord.gg/jy6AjN9ACP">Discord</a>
+            <a class="navlink" href="/donate.html">Donations and Accounting</a><br>
+        </nav>
+        <marquee scrollamount="15">Now fully legal</marquee>
         <hr>
-        <a class="fst" href="/about_me.html">About me</a><br>
-        <a class="fst" href="/projects/">Projects</a><br>
-            <a class="sec" href="/about/">About ARFNET</a><br>
-            <a class="sec" href="/explanation.txt">Lore</a><br>
-        <a class="fst" href="https://blog.arf20.com">Blog</a><br>
-        <a class="fst" href="/services.html">Services</a><a class="sec" href="https://dash.arf20.com">Order</a><br>
-            <a class="sec" href="https://memes.arf20.com/">Memes</a><br>
-            <a class="sec" href="/chat.html">Chat</a><br>
-            <a class="sec" href="/game.html">Game</a><br>
-            <a class="sec" href="https://webmail.arf20.com">Webmail</a><br>
-            <a class="sec" href="https://nextcloud.arf20.com">Nextcloud</a><br>
-            <a class="sec" href="https://jellyfin.arf20.com">Jellyfin</a><br>
-            <a class="sec" href="http://cgit.arf20.com">Cgit</a><br>
-            <a class="sec" href="http://forum.arf20.com">Forum</a><br>
-            <a class="sec" href="/usenet.html">USENET</a>
-                <a class="sec" href="http://news.arf20.com/">Web newsreader</a><br>
-            <a class="sec" href="https://grafana.arf20.com">Grafana</a><br>
-            <a class="sec" href="http://deb.arf20.com">Debian repo</a><br>
-            <a class="sec" href="http://radio.arf20.com">Radio</a><br>
-        <a class="fst" href="/astro/">Astrophotography section</a><br>
-        <a class="fst" href="/webring.html">Webring</a><br>
-
+        <main class="content">
+            <a class="fst" href="/about_me.html">About me</a><br>
+            <a class="fst" href="/projects/">Projects</a><br>
+                <a class="sec" href="/about/">About ARFNET</a><br>
+                <a class="sec" href="/explanation.txt">Lore</a><br>
+            <a class="fst" href="https://blog.arf20.com">Blog</a><br>
+            <a class="fst" href="/services.html">Services</a><a class="sec" href="https://dash.arf20.com">Order</a><br>
+                <a class="sec" href="https://memes.arf20.com/">Memes</a><br>
+                <a class="sec" href="/chat.html">Chat</a><br>
+                <a class="sec" href="/game.html">Game</a><br>
+                <a class="sec" href="https://webmail.arf20.com">Webmail</a><br>
+                <a class="sec" href="https://nextcloud.arf20.com">Nextcloud</a><br>
+                <a class="sec" href="https://jellyfin.arf20.com">Jellyfin</a><br>
+                <a class="sec" href="http://cgit.arf20.com">Cgit</a><br>
+                <a class="sec" href="http://forum.arf20.com">Forum</a><br>
+                <a class="sec" href="/usenet.html">USENET</a>
+                    <a class="sec" href="http://news.arf20.com/">Web newsreader</a><br>
+                <a class="sec" href="https://grafana.arf20.com">Grafana</a><br>
+                <a class="sec" href="http://deb.arf20.com">Debian repo</a><br>
+                <a class="sec" href="http://radio.arf20.com">Radio</a><br>
+            <a class="fst" href="/astro/">Astrophotography section</a><br>
+            <a class="fst" href="/webring.html">Webring</a><br>
+        </main>
         <hr>
-        <span>Last modification 20-02-2024. Estabished somewhere around 2019. Sysadmin: arf20. Contact: <a target="_blank" href="mailto:arf20@arf20.com">arf20@arf20.com</a> <a href="/arf20_public.asc">PGP</a> Murcia, Spain.</span><br>
-        <a href="/LICENSE">Everything here is by default published under the GPLv3</a>
-        <a href="/">Copyright &copy; 2023 ARFNET</a><br>
-        <img src="gifs/bestvw.gif">
-        <img src="gifs/vim.gif">
-        <img src="gifs/powered-by-nginx.gif">
-        <img src="gifs/powered-by-debian.gif">
-        <img src="gifs/powered-by-opnsense.png">
-        <img src="gifs/powered-by-proxmox.png">
-        <img src="gifs/ipv6.gif">
-        <img src="gifs/gplv3.gif">
-        <img src="gifs/piracy.gif">
-        <img src="gifs/gay.gif">
+        <footer>
+            <span>Last modification 20-02-2024. Estabished somewhere around 2019. Sysadmin: arf20. Contact: <a target="_blank" href="mailto:arf20@arf20.com">arf20@arf20.com</a> <a href="/arf20_public.asc">PGP</a> Murcia, Spain.</span><br>
+            <a href="/LICENSE">Everything here is by default published under the GPLv3</a>
+            <a href="/">Copyright &copy; 2023 ARFNET</a><br>
+            <img src="gifs/bestvw.gif">
+            <img src="gifs/vim.gif">
+            <img src="gifs/powered-by-nginx.gif">
+            <img src="gifs/powered-by-debian.gif">
+            <img src="gifs/powered-by-opnsense.png">
+            <img src="gifs/powered-by-proxmox.png">
+            <img src="gifs/ipv6.gif">
+            <img src="gifs/gplv3.gif">
+            <img src="gifs/piracy.gif">
+            <img src="gifs/gay.gif">
+        </footer>
     </body>
 </html>
diff --git a/style.css b/style.css
index d2554a9..9607793 100644
--- a/style.css
+++ b/style.css
@@ -1,11 +1,17 @@
 @font-face {
-    font-family: 'terminus'; /*a name to be used later*/
-    src: url('/fonts/terminus.ttf'); /*URL to font*/
+    font-family: 'terminus';
+    src: url('/fonts/terminus.ttf');
 }
 
 @font-face {
-    font-family: 'fixedsys'; /*a name to be used later*/
-    src: url('/fonts/FSEX300.ttf'); /*URL to font*/
+    font-family: 'fixedsys';
+    src: url('/fonts/FSEX300.ttf');
+}
+
+body {
+    background-image: url("tile1.jpg");
+    background-repeat: repeat;
+    font-family: terminus;
 }
 
 header *{
@@ -19,10 +25,18 @@ header *{
     font-family: fixedsys;
 }
 
-body {
-    background-image: url("tile1.jpg");
-    background-repeat: repeat;
-    font-family: terminus;
+.navbar {
+    text-align: center;
+}
+
+.navlink {
+    font-size: 20px;
+}
+
+.content {
+    max-width: 1000px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .fst {