diff --git a/css/custom.css b/css/custom.css
index f300d3ca..87876be7 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -27,12 +27,6 @@
   line-height: 1.35;
 }
 
-
-
-/* body {
-  padding-bottom: 30px;
-} */
-
 .theme-dropdown .dropdown-menu {
   position: static;
   display: block;
@@ -47,11 +41,9 @@
   width: auto;
 }
 
-a.anchor {
-  display: block; position: relative; top: -50px; visibility: hidden;
-}
-a.titleanchor {
-  font-size:0.7em;
+.anchor:target {
+  padding-top: 4rem;
+  margin-top: -4rem;
 }
 
 .panel-item {
diff --git a/index.html b/index.html
index d25a0acb..a1f30b7d 100644
--- a/index.html
+++ b/index.html
@@ -75,10 +75,7 @@ layout: default
 
 <!-- Global Mass Surveillance - The Fourteen Eyes -->
 
-<a class="anchor" name="ukusa"></a>
-<div class="page-header">
-    <h1><a href="#ukusa" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Global Mass Surveillance - The Fourteen Eyes</h1>
-</div>
+<h1 id="ukusa" class="anchor">Global Mass Surveillance - The Fourteen Eyes</h1>
 
 <img src="img/layout/UKUSA.png" class="img-responsive float-right" alt="UKUSA Agreement" style="margin-left:10px;">
 
@@ -123,8 +120,7 @@ layout: default
 </div>
 <!-- end Chart of Five Eyes, Nine Eyes, and Fourteen Eyes -->
 
-<a class="anchor" name="usa"></a>
-<h3>Why is it not recommended to choose a US based service?</h3>
+<h3 id="usa" class="anchor">Why is it not recommended to choose a US based service?</h3>
 
 <img src="img/layout/USA.png" class="img-responsive float-right" alt="USA" style="margin-left:10px;">
 
@@ -150,10 +146,7 @@ layout: default
 </ul>
 
 
-<a class="anchor" name="vpn"></a>
-<div class="page-header">
-    <h1><a href="#vpn" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> VPN providers with extra layers of privacy</h1>
-</div>
+<h1 id="vpn" class="anchor">VPN providers with extra layers of privacy</h1>
 <div class="alert alert-success" role="alert">
     <strong>All providers listed here are outside the US, use encryption, accept Bitcoin, support OpenVPN and have a no logging policy.</strong>
 </div>
@@ -451,10 +444,7 @@ layout: default
 </div>
 
 <!-- warrant canary -->
-<a class="anchor" name="wc"></a>
-<div class="page-header">
-    <h1><a href="#wc" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> What is a warrant canary?</h1>
-</div>
+<h1 id="wc" class="anchor">What is a warrant canary?</h1>
 <img src="img/layout/warrant-canary.jpg" class="img-responsive float-right" alt="Warrant Canary Example" style="margin-left:20px;">
 <p>A warrant canary is a posted document stating that an organization has not received any secret subpoenas during a specific period of time. If this document fails to be updated during the specified time then the user is to assume that the service has
     received such a subpoena and should stop using the service.</p>
@@ -475,10 +465,7 @@ layout: default
 </ul>
 
 <!-- browsers -->
-<a class="anchor" name="browser"></a>
-<div class="page-header">
-    <h1><a href="#browser" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Browser Recommendation</h1>
-</div>
+<h1 id="browser" class="anchor">Browser Recommendation</h1>
 
 <div class="row mb-2">
 
@@ -526,12 +513,7 @@ layout: default
 </div>
 
 <!-- Browser Fingerprint -->
-<a class="anchor" name="fingerprint"></a>
-
-<!-- heading -->
-<div class="page-header">
-    <h1><a href="#fingerprint" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Browser Fingerprint - Is your browser configuration unique?</h1>
-</div>
+<h1 id="fingerprint" class="anchor">Browser Fingerprint - Is your browser configuration unique?</h1>
 
 <!-- yellow warning message about the browser sending unique information -->
 <div class="alert alert-warning" role="alert">
@@ -571,10 +553,7 @@ layout: default
 </ul>
 
 <!-- WebRTC IP Leak Test -->
-<a class="anchor" name="webrtc"></a>
-<div class="page-header">
-    <h1><a href="#webrtc" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> WebRTC IP Leak Test - Is your IP address leaking?</h1>
-</div>
+<h1 id="webrtc" class="anchor">WebRTC IP Leak Test - Is your IP address leaking?</h1>
 
 <!-- red alert message about WebRTC being a new communication protocol... -->
 <div class="alert alert-danger" role="alert">
@@ -630,11 +609,7 @@ layout: default
 
 
 <!-- Firefox add-ons -->
-<a class="anchor" name="addons"></a>
-
-<div class="page-header">
-    <h1><a href="#addons" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Excellent Firefox Privacy Add-ons</h1>
-</div>
+<h1 id="addons" class="anchor">Excellent Firefox Privacy Add-ons</h1>
 
 <div class="alert alert-success" role="alert">
     <strong>Improve your privacy with these excellent Firefox add-ons.</strong>
@@ -719,11 +694,7 @@ layout: default
 
 
 <!-- about:config tweaks for Firefox -->
-<a class="anchor" name="about_config"></a>
-
-<div class="page-header">
-    <h1><a href="#about_config" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Firefox: Privacy Related "about:config" Tweaks</h1>
-</div>
+<h1 id="about_config" class="anchor">Firefox: Privacy Related "about:config" Tweaks</h1>
 
 <div class="alert alert-success" role="alert">This is a collection of privacy related <strong>about:config</strong> tweaks. We'll show you how to enhance the privacy of your Firefox browser.</div>
 
@@ -907,10 +878,7 @@ layout: default
     <li><a href="https://addons.mozilla.org/firefox/addon/privacy-settings/">Privacy Settings</a> - A Firefox addon to alter built-in privacy settings easily with a toolbar panel.</li>
 </ul>
 
-<a class="anchor" name="email"></a>
-<div class="page-header">
-    <h1><a href="#email" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Privacy-Conscious Email Providers - No Affiliates</h1>
-</div>
+<h1 id="email" class="anchor">Privacy-Conscious Email Providers - No Affiliates</h1>
 
 <div class="alert alert-success" role="alert">
     <strong>All providers listed here are operating outside the US and support <a data-toggle="tooltip" data-placement="bottom" data-original-title="When sending or receiving emails, if both the sending and receiving servers support TLS encryption, the email is sent between servers using an encrypted connection.">SMTP TLS.</a> The table is sortable. Never trust any company with your privacy, always encrypt.</strong>
@@ -1133,10 +1101,7 @@ layout: default
         later. During an enquiry on a single mailbox, the Postal Police may have tapped for a whole year every user's private communication going through the server autistici.org/inventati.org.</li>
 </ul>
 
-<a class="anchor" name="clients"></a>
-<div class="page-header">
-    <h1><a href="#clients" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Email Clients</h1>
-</div>
+<h1 id="clients" class="anchor">Email Clients</h1>
 <div class="row mb-2">
 
     {% include card.html color="success"
@@ -1182,10 +1147,7 @@ layout: default
     <li><a href="https://www.mailpile.is/">Mailpile (Beta)</a> - A modern, fast web-mail client with user-friendly encryption and privacy features.</li>
 </ul>
 
-<a class="anchor" name="messaging"></a>
-<div class="page-header">
-    <h1><a href="#messaging" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Email Alternatives</h1>
-</div>
+<h1 id="messaging" class="anchor">Email Alternatives</h1>
 <div class="row mb-2">
 
     {% include card.html color="success"
@@ -1216,10 +1178,7 @@ layout: default
     %}
 </div>
 
-<a class="anchor" name="search"></a>
-<div class="page-header">
-    <h1><a href="#search" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Privacy Respecting Search Engines</h1>
-</div>
+<h1 id="search" class="anchor">Privacy Respecting Search Engines</h1>
 
 <div class="alert alert-warning" role="alert">
     <strong> If you are currently using a search engines like Google, Bing or Yahoo you should pick an alternative here. </strong>
@@ -1278,10 +1237,7 @@ layout: default
 </ul>
 
 
-<a class="anchor" name="im"></a>
-<div class="page-header">
-    <h1><a href="#im" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Encrypted Instant Messenger</h1>
-</div>
+<h1 id="im" class="anchor">Encrypted Instant Messenger</h1>
 
 <div class="alert alert-warning" role="alert">
     <strong>If you are currently using an Instant Messenger like WhatsApp, Viber, LINE, Telegram or Threema you should pick an alternative here.</strong>
@@ -1340,10 +1296,7 @@ layout: default
     <li><a href="https://www.reddit.com/r/privacytoolsIO/comments/6r655i/telegram_isnt_safe/">Telegram is marketed as a private messenger, but it's not private by default.</a></li>
 </ul>
 
-<a class="anchor" name="voip"></a>
-<div class="page-header">
-    <h1><a href="#voip" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Encrypted Video & Voice Messenger</h1>
-</div>
+<h1 id="voip" class="anchor">Encrypted Video & Voice Messenger</h1>
 <div class="alert alert-warning" role="alert">
     <strong>If you are currently using an Video & Voice Messenger like Skype, Viber or Google Hangouts you should pick an alternative here.</strong>
 </div>
@@ -1394,10 +1347,7 @@ layout: default
 </ul>
 
 
-<a class="anchor" name="filesharing"></a>
-<div class="page-header">
-    <h1><a href="#filesharing" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> File Sharing</h1>
-</div>
+<h1 id="filesharing" class="anchor">File Sharing</h1>
 <div class="row mb-2">
     {% include card.html color="success"
     title="OnionShare"
@@ -1417,10 +1367,7 @@ layout: default
     %}
 </div>
 
-<a class="anchor" name="cloud"></a>
-<div class="page-header">
-    <h1><a href="#cloud" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Encrypted Cloud Storage Services</h1>
-</div>
+<h1 id="cloud" class="anchor">Encrypted Cloud Storage Services</h1>
 
 <div class="alert alert-warning" role="alert">
     <strong>If you are currently using Cloud Storage Services like Dropbox, Google Drive, Microsoft OneDrive or Apple iCloud you should pick an alternative here.</strong>
@@ -1463,10 +1410,7 @@ layout: default
     <li><a href="https://cryptomator.org/">Cryptomator</a> - Free client-side AES encryption for your cloud files. Open source software: No backdoors, no registration.</li>
 </ul>
 
-<a class="anchor" name="mycloud"></a>
-<div class="page-header">
-    <h1><a href="#mycloud" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Self-Hosted Cloud Server Software</h1>
-</div>
+<h1 id="mycloud" class="anchor">Self-Hosted Cloud Server Software</h1>
 <div class="alert alert-warning" role="alert">
     <strong>If you are currently using a Cloud Storage Services like Dropbox, Google Drive, Microsoft OneDrive or Apple iCloud you should think about hosting it on your own.</strong>
 </div>
@@ -1503,10 +1447,7 @@ layout: default
 <ul>
     <li><a href="http://muonium.io">Muonium</a> - Free encrypted cloud storage for your files.</li>
 </ul>
-<a class="anchor" name="sync"></a>
-<div class="page-header">
-    <h1><a href="#sync" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Secure File Sync Software</h1>
-</div>
+<h1 id="sync" class="anchor">Secure File Sync Software</h1>
 <div class="row mb-2">
 
     {% include card.html color="success"
@@ -1537,10 +1478,7 @@ layout: default
         whether due to limitations in memory, time, or disk space.
     </li>
 </ul>
-<a class="anchor" name="pw"></a>
-<div class="page-header">
-    <h1><a href="#pw" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Password Manager Software</h1>
-</div>
+<h1 id="pw" class="anchor">Password Manager Software</h1>
 <div class="alert alert-warning" role="alert">
     <strong>If you are currently using a password manager software like 1Password, LastPass, Roboform or iCloud Keychain you should pick an alternative here.</strong>
 </div>
@@ -1597,10 +1535,7 @@ layout: default
     <li><a href="https://www.youtube.com/watch?v=yzGzB-yYKcc">Edward Snowden on Passwords - YouTube</a></li>
 </ul>
 
-<a class="anchor" name="calendar_contacts"></a>
-<div class="page-header">
-    <h1><a href="#calendar_contacts" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Calendar and Contacts Sync</h1>
-</div>
+<h1 id="calendar_contacts" class="anchor">Calendar and Contacts Sync</h1>
 <div class="alert alert-warning" role="alert">
     <strong>If you are currently using a calendar and or contacts synchronization service like Google Sync or iCloud you should pick an alternative here.</strong>
 </div>
@@ -1649,10 +1584,7 @@ layout: default
 
 
 <!-- Key disclosure law -->
-<a class="anchor" name="kdl"></a>
-<div class="page-header">
-    <h1><a href="#kdl" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Key disclosure law</h1>
-</div>
+<h1 id="kdl" class="anchor">Key disclosure law</h1>
 
 
 <h3>Who is required to hand over the encryption keys to authorities?</h3>
@@ -1714,10 +1646,7 @@ layout: default
     <li><a href="https://www.youtube.com/watch?v=Jt7D4AIfqlQ">DEFCON 20: Crypto and the Cops: the Law of Key Disclosure and Forced Decryption</a></li>
 </ul>
 
-<a class="anchor" name="encrypt"></a>
-<div class="page-header">
-    <h1><a href="#encrypt" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> File Encryption Software</h1>
-</div>
+<h1 id="encrypt" class="anchor">File Encryption Software</h1>
 <div class="alert alert-warning" role="alert">
     <strong>If you are currently not using encryption software for your hard disk, emails or file archives you should pick an encryption software here.</strong>
 </div>
@@ -1763,10 +1692,7 @@ layout: default
     <li><a href="https://gitlab.com/cryptsetup/cryptsetup/">Linux Unified Key Setup (LUKS)</a> - A full disk encryption system for Linux using dm-crypt as the disk encryption backend. Included by default in Ubuntu. Available for Windows and Linux.
 </ul>
 
-<a class="anchor" name="darknets"></a>
-<div class="page-header">
-    <h1><a href="#darknets" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Self-contained Networks</h1>
-</div>
+<h1 id="darknets" class="anchor">Self-contained Networks</h1>
 <div class="alert alert-warning" role="alert">
     <strong>If you are currently browsing <a href="https://en.wikipedia.org/wiki/Surface_Web">clearnet</a> and want to access the <a href="https://en.wikipedia.org/wiki/Dark_web">dark web</a>, this section is for you.</strong>
 </div>
@@ -1811,10 +1737,7 @@ layout: default
 </ul>
 
 
-<a class="anchor" name="social"></a>
-<div class="page-header">
-    <h1><a href="#social" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Decentralized Social Networks</h1>
-</div>
+<h1 id="social" class="anchor">Decentralized Social Networks</h1>
 <div class="alert alert-warning" role="alert">
     <strong> If you are currently using Social Networks like Facebook, Twitter or Google+, you should pick an alternative here. </strong>
 </div>
@@ -1860,10 +1783,7 @@ layout: default
 </ul>
 
 
-<a class="anchor" name="dns"></a>
-<div class="page-header">
-    <h1><a href="#dns" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Domain Name System (DNS)</h1>
-</div>
+<h1 id="dns" class="anchor">Domain Name System (DNS)</h1>
 
 <div class="row mb-2">
 
@@ -1900,10 +1820,7 @@ layout: default
     <li><a href="https://pi-hole.net/">Pi-hole</a> - A network-wide DNS server for the Raspberry Pi.  Blocks advertising and tracking domains for all devices on your network.</li>
 </ul>
 
-<a class="anchor" name="notebook"></a>
-<div class="page-header">
-    <h1><a href="#notebook" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Digital Notebook</h1>
-</div>
+<h1 id="notebook" class="anchor">Digital Notebook</h1>
 
 <div class="alert alert-warning" role="alert">
     <strong>If you are currently using an application like Evernote, Google Keep or Microsoft OneNote you should pick an alternative here.</strong>
@@ -1944,10 +1861,7 @@ layout: default
     <li><a href="https://orgmode.org">Org-mode</a> - A major mode for GNU Emacs. Org-mode is for keeping notes, maintaining TODO lists, planning projects, and authoring documents with a fast and effective plain-text system. </li>
 </ul>
 
-<a class="anchor" name="paste"></a>
-<div class="page-header">
-<h1><a href="#paste" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Paste Services</h1>
-</div>
+<h1 id="paste" class="anchor">Paste Services</h1>
 
 <div class="row mb-2">
 
@@ -1982,10 +1896,7 @@ layout: default
 </ul>
 
 
-<a class="anchor" name="productivity"></a>
-<div class="page-header">
-    <h1><a href="#productivity" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Productivity Tools</h1>
-</div>
+<h1 id="productivity" class="anchor">Productivity Tools</h1>
 <div class="row mb-2">
 
     {% include card.html color="success"
@@ -2024,10 +1935,7 @@ layout: default
 
 
 
-<a class="anchor" name="os"></a>
-<div class="page-header">
-    <h1><a href="#os" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> PC Operating Systems</h1>
-</div>
+<h1 id="os" class="anchor">PC Operating Systems</h1>
 <div class="alert alert-warning" role="alert">
     <strong>If you are currently using a operating system like Microsoft Windows or Apple macOS you should pick an alternative here.</strong>
 </div>
@@ -2074,10 +1982,7 @@ layout: default
         By default, it anonymizes Internet traffic by sending it through the Tor network. Note: It is still in alpha, and much testing and bug fixing still has to be done.</li>
 </ul>
 
-<a class="anchor" name="live_os"></a>
-<div class="page-header">
-    <h1><a href="#live_os" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Live CD Operating Systems</h1>
-</div>
+<h1 id="live_os" class="anchor">Live CD Operating Systems</h1>
 <div class="row mb-2">
 
     {% include card.html color="success"
@@ -2108,10 +2013,7 @@ layout: default
     <li><a href="http://distro.ibiblio.org/tinycorelinux/">Tiny Core Linux</a> - A minimal Linux operating system focusing on providing a base system using BusyBox and FLTK. The distribution is notable for its size (15 MB) and minimalism, with additional functionality
         provided by extensions.</li>
 </ul>
-<a class="anchor" name="mobile_os"></a>
-<div class="page-header">
-    <h1><a href="#mobile_os" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Mobile Operating Systems</h1>
-</div>
+<h1 id="mobile_os" class="anchor">Mobile Operating Systems</h1>
 <!-- alert message about GApps -->
 <div class="alert alert-warning" role="alert">
     <strong>Even though the source code of the following OS is provided, installing Google Apps may compromise your setup. The MicroG project can serve as a FLOSS replacement, depending on your threat model.</strong>
@@ -2141,11 +2043,7 @@ layout: default
 </ul>
 
 <!-- Android add-ons -->
-<a class="anchor" name="aaddons"></a>
-
-<div class="page-header">
-    <h1><a href="#aaddons" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Android Privacy Add-ons</h1>
-</div>
+<h1 id="aaddons" class="anchor">Android Privacy Add-ons</h1>
 
 <div class="alert alert-success" role="alert">
     <strong>Improve your privacy with these add-ons for Android.</strong>
@@ -2170,10 +2068,7 @@ layout: default
 </p>
 
 
-<a class="anchor" name="firmware"></a>
-<div class="page-header">
-    <h1><a href="#firmware" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Open Source Router Firmware</h1>
-</div>
+<h1 id="firmware" class="anchor">Open Source Router Firmware</h1>
 <div class="row mb-2">
 
     {% include card.html color="success"
@@ -2206,10 +2101,7 @@ layout: default
 </ul>
 
 
-<a class="anchor" name="win10"></a>
-<div class="page-header">
-    <h1><a href="#win10" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Don't use Windows 10 - It's a privacy nightmare</h1>
-</div>
+<h1 id="win10" class="anchor">Don't use Windows 10 - It's a privacy nightmare</h1>
 
 <div class="alert alert-warning" role="alert">
     <strong>Microsoft introduced a lot of new features in Windows 10 such as Cortana. However, most of them are violating your privacy.</strong>
@@ -2320,10 +2212,7 @@ layout: default
                     </div>
                 </div>
 
-    <a class="anchor" name="quotes"></a>
-    <div class="page-header">
-        <h1><a href="#quotes" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Quotes</h1>
-    </div>
+                <h1 id="quotes" class="anchor">Quotes</h1>
 
     <blockquote>
         <p>Arguing that you don't care about the right to privacy because you have nothing to hide is no different than saying you don't care about free speech because you have nothing to say.</p>
@@ -2343,10 +2232,7 @@ layout: default
         <footer>Glenn Greenwald in <cite title="Glenn Greenwald On Why Privacy Is Vital, Even If You 'Have Nothing To Hide"><a href="http://www.huffingtonpost.com/2014/06/20/glenn-greenwald-privacy_n_5509704.html">Huffington Post</a></cite></footer>
     </blockquote>
 
-    <a class="anchor" name="resources"></a>
-    <div class="page-header">
-        <h1><a href="#resources" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Recommended Privacy Resources</h1>
-    </div>
+    <h1 id="resources" class="anchor">Recommended Privacy Resources</h1>
 
 
     <h3>Guides</h3>
@@ -2384,10 +2270,7 @@ layout: default
         <li><a href="https://addons.mozilla.org/en-US/firefox/addon/block-cloudflare-mitm-attack/"><strong>Block Cloudflare MiTM Attack</strong></a> - Firefox add-on to detect and block corporate MITM attack.
     </ul>
 
-    <a class="anchor" name="participate"></a>
-    <div class="page-header">
-        <h1><a href="#participate" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Spread the word and help your friends</h1>
-    </div>
+    <h1 id="participate" class="anchor">Spread the word and help your friends</h1>
 
     <a href="mailto:?subject=privacytools.io%20-%20encryption%20against%20global%20mass%20surveillance&body=https://www.privacytools.io/" class="share-btn email" title="Email">
         <i class="fa fa-envelope"></i>
@@ -2491,4 +2374,4 @@ as published by Sam Hocevar."><img alt="WTFPL" src="img/layout/wtfpl.png" style=
     </p>
 
     <p><em>privacytools.io is a socially motivated website that provides information for protecting your data security and privacy. never trust any company with your privacy, always encrypt.</em></p>
-</div>
\ No newline at end of file
+</div>