<!DOCTYPE html>

<style>
 body {
     font: 18px "Hack";
     background: #1D2021;
 }

 a {
     color: #a89984;
     text-decoration: none;
     font-size: 0.9em;
 }

 h1 {
     font-size: 1.4em;
     font-weight: normal;
     margin: 10px 0 10px 0;
 }

 ul {
     text-align: center;
     padding: 0;
     list-style: none;
 }

 ul:hover {
     cursor: pointer;
 }

 ul > li:hover a {
     transition: color 1.5s ease;
     color: #d5c4a1;
 }

 ul > li a:hover {
     transition: color 0.2s ease;
     color: #fbf1c7;
 }

 ul > li:nth-child(1n) h1 {
     color: #458588;
 }

 ul > li:nth-child(2n) h1 {
     color: #b16286;
 }

 ul > li:nth-child(3n) h1 {
     color: #98971a;
 }

 ul > li:nth-child(4n) h1 {
     color: #d65d0e;
 }

 ul > li:nth-child(5n) h1 {
     color: #689d6a;
 }

 ul > li:nth-child(6n) h1 {
     color: #d79921;
 }

 ul > li:nth-child(7n) h1 {
     color: #cc241d;
 }

 ul > li:nth-child(8n) h1 {
     color: #859900;
 }

 @media (max-width: 900px) {
     ul li > ul {
         display: none;
     }

     ul li:hover ul {
         display: block;
     }

 }

 @media (min-width: 900px) {

     body > ul {
         width: 800px;
     }

     body > ul > li {
         float: left;
         width: 180px;
         margin: 0 10px;
     }
 }

 @media (max-height: 500px) {
     body > ul {
         margin: 0 auto;
     }
 }

 @media (min-height: 500px) {
     body > ul {
         margin: 200px auto 0 auto;
     }
 }
</style>

<center>
</center>

<ul>
    <li>
        <h1>social</h1>
        <ul>
            <li><a href="https://twitter.com">twitter</a></li>
            <li><a href="https://mst3k.interlinked.me">mst3k</a></li>
            <li><a href="https://youtube.com">youtube</a></li>
            <li><a href="https://lobste.rs">lobsters</a></li>
        </ul>
    </li>
    <li>
        <h1>git</h1>
        <ul>
            <li><a href="https://github.com">github</a></li>
            <li><a href="https://tulpa.dev">tulpa.dev</a></li>
            <li><a href="https://github.com/Xe/xepkgs">xepkgs</a></li>
        </ul>
    </li>
    <li>
        <h1>nixos</h1>
        <ul>
            <li><a href="https://nixos.org/nixos/options.html">options</a></li>
            <li><a href="https://nixos.org/nixos/manual/">manual</a></li>
            <li><a href="https://nixos.org/nixpkgs/manual/">nixpkgs manual</a></li>
            <li><a href="https://nixos.org/nix/manual/">nix manual</a></li>
        </ul>
    </li>
    <li>
        <h1>within</h1>
        <ul>
            <li><a href="https://maison.within.website">maison</a></li>
            <li><a href="https://g.o">g.o</a></li>
            <li><a href="https://mi.within.website">mi</a></li>
            <li><a href="https://christine.website">site</a></li>
        </ul>
    </li>
    <li>
        <h1>lojban</h1>
        <ul>
            <li><a href="https://lojban.pw/cll/uncll-1.2.6/xhtml_section_chunks/">cll</a></li>
            <li><a href="http://lojban.github.io/ilmentufa/camxes.html">camxes</a></li>
            <li><a href="https://la-lojban.github.io/sutysisku/en/">sutysisku</a></li>
        </ul>
    </li>
    <li>
        <h1>reddit</h1>
        <ul>
            <li><a href="https://www.reddit.com/r/tulpas/">/r/tulpas</a></li>
            <li><a href="https://www.reddit.com/r/conlangs/">/r/conlangs</a></li>
            <li><a href="https://www.reddit.com/r/unixporn/">/r/unixporn</a></li>
        </ul>
    </li>
    <li>
        <h1>owo</h1>
        <ul>
            <li><a href="https://e621.net">e621</a></li>
            <li><a href="https://www.reddit.com/r/yiff">/r/yiff</a></li>
            <li><a href="https://derpibooru.org">derpibooru</a></li>
        </ul>
    </li>
    <li>
        <h1></h1>
    </li>
</ul>