From 16bf8521d3a9c288472b4051df0456269de9599c Mon Sep 17 00:00:00 2001
From: Phixxy <bottlecap@protonmail.com>
Date: Tue, 12 Aug 2025 11:04:58 -0700
Subject: [PATCH] minor layout changes and grammar updates

---
 index.html | 737 +++++++++++++++++++++++++++++++----------------------
 1 file changed, 430 insertions(+), 307 deletions(-)

diff --git a/index.html b/index.html
index 96fddd5..1b24141 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,24 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ghost.moe — A minimalist guide to digital privacy, security, and anti-censorship.</title>
     <style>
+      .explain {
+        display: none;
+      }
+      .show .explain {
+        display: block;
+        font-size: 0.85rem;
+        color: #aaa;
+        margin-top: 0.25rem;
+      }
+      .toggle-btn {
+        display: none;
+        margin-left: 10px;
+        padding: 2px 6px;
+        background-color: #ccc;
+        border: none;
+        cursor: pointer;
+        font-size: 0.8em;
+      }
       .sidebar {
         position: fixed;
         top: 0;
@@ -138,6 +156,24 @@
         margin-bottom: 1rem;
       }
 
+      .convenient {
+        color: #2ecc71;
+      }
+
+      .balanced {
+        color: #f1c40f;
+      }
+
+      .secure {
+        color: #e74c3c;
+      }
+
+      .level_guide {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+        list-style: none;
+      }
+
       .levels {
         display: grid;
         grid-template-columns: 1fr;
@@ -149,6 +185,7 @@
         border-left: 5px solid #ccc;
         padding: 1rem;
         border-radius: 6px;
+        margin-bottom: 1rem;
       }
 
       .level h3 {
@@ -175,13 +212,6 @@
       .footer a {
         color: #fb2;
       }
-
-      .explain {
-        display: block;
-        font-size: 0.85rem;
-        color: #aaa;
-        margin-top: 0.25rem;
-      }
       /* Hide sidebar on mobile */
       @media (max-width: 768px) {
         .sidebar {
@@ -279,8 +309,26 @@
           Welcome to ghost.moe. This guide is meant to help you take control of
           your digital privacy and security. With more privacy and security, comes
           less convenience. This is an unfortunate reality. We've broken things down
-          by topic, and each topic has three levels: More Convenient, Balanced, and
-          More Secure/Private. Start where you're comfortable.
+          by topic, and each topic has three levels: 
+          <ul class="level_guide">
+            <li>
+              <span class="convenient">More Convenient:</span>
+              These items will only require a download or checking a box in settings.
+              They shouldn't break anything, be annoying, or slow anything down.
+            </li>
+            <li>
+              <span class="balanced">Balanced:</span>
+              These items can cause some minor things to break, be slightly annoying, or require
+              a change to how you use your devices.
+            </li>
+            <li>
+              <span class="secure">More Secure/Private:</span>
+              These items will require either technical knowledge, be very annoying, require
+              serious planning, cause things to slow down, break things, or require a
+              large amount of effort. 
+            </li>
+          </ul>
+            Start where you're comfortable.
         </p>
       </section>
       <section id="threats" class="section">
@@ -289,13 +337,13 @@
         </h2>
         <p>
           The most important thing to consider when you are worried about privacy
-          and security, is your threat model. Who are you trying to hide your data
+          and security is your threat model. Who are you trying to hide your data
           from? If you only need to hide your data from your family, you may just
-          need to delete your browser history. If you are trying to hide your data
-          from governments, you will have to do quite a bit more work than just deleting
-          your browser history. Come up with your threat model, and think about the
-          tools that this adversary has at their disposal. Keep that in mind when
-          going through this guide.
+          need to delete your browser history. If you are trying to hide your data from
+          governments and corporations, you will have to do quite a bit more work than
+          just deleting your browser history. Come up with your threat model, and think about the
+          tools that this adversary has at their disposal. Keep your threat model in mind
+          when going through this guide.
         </p>
       </section>
       <section id="browsing" class="section">
@@ -303,126 +351,127 @@
           🧭 Web Browsing
         </h2>
         <p>
-          Your web browser is one of the most used programs on your system. Taking
+          Your web browser is typically one of the most used programs on your system. Taking
           steps to lock down your web browser will greatly increase your privacy.
         </p>
-        <div class="levels">
-          <div class="level easy">
-            <h3>
-              More Convenient
-            </h3>
-            <ul>
-              <li>
-                Switch to
-                <strong>
-                  <a href="https://firefox.com">
-                    Firefox
-                  </a>
-                </strong>
-                <span class="explain">
-                  Firefox has a long history of respecting your privacy.
-                </span>
-              </li>
-              <li>
-                Install an adblocker like
-                <strong>
-                  <a href="https://ublockorigin.com/">
-                    uBlock Origin
-                  </a>
-                </strong>
-                .
-                <span class="explain">
-                  Ads can be used to track you across websites or give you malware.
-                </span>
-              </li>
-              <li>
-                Use 
-                <strong>
-                  <a href="https://duckduckgo.com/">
-                    DuckDuckGo
-                  </a>
-                </strong>
-                instead of google.
-                <span class="explain">
-                  DuckDuckGo does not track your searches or browsing history.
-                </span>
-              </li>
-              <li>
-                Disable third-party cookies in settings.
-                <span class="explain">
-                  Cookies can also be used to track you across websites.
-                </span>
-              </li>
-              <li>
-                Tell websites not to sell or share your data in settings.
-                <span class="explain">
-                  Note: Websites do not have to adhere to this request.
-                </span>
-              </li>
-            </ul>
-          </div>
-          <div class="level medium">
-            <h3>
-              Balanced
-            </h3>
-            <ul>
-              <li>
-                Set Firefox to "Strict" Enhanced Tracking Protection.
-                <span class="explain">
-                  Note: This could cause some websites to break.
-                </span>
-              </li>
-              <li>
-                Set Firefox to delete cookies and site data when Firefox is closed.
-                <span class="explain">
-                  This will make it harder to track you between sessions.
-                </span>
-              </li>
-              <li>
-                Set Firefox to "Always use private browsing mode".
-                <span class="explain">
-                  This will log you out of everything and forget your history. This is very useful on shared computers or laptops that could easily be stolen.
-                </span>
-              </li>
-            </ul>
-          </div>
-          <div class="level hard">
-            <h3>
-              More Secure
-            </h3>
-            <ul>
-              <li>
-                Use
-                <strong>
-                  <a href="https://www.torproject.org/">
-                    Tor Browser
-                  </a>
-                </strong>
-                for all sensitive browsing.
-                <span class="explain">
-                  Tor is the gold standard browser for privacy and anti-censorship. It will be very slow.
-                </span>
-              </li>
-              <li>
-                Block javascript with 
-                <strong>
-                  <a href="https://addons.mozilla.org/firefox/addon/noscript">
-                    NoScript
-                  </a>
-                </strong>
-                or
-                <strong>
-                  <a href="https://addons.mozilla.org/firefox/addon/ghostery">
-                    Ghostery
-                  </a>
-                </strong>
-                <span class="explain">
-                  Javascript is code that a website chooses to run on your computer. Blocking javascript can stop websites from learning more about your computer.
-                </span>
-              </li>
-            </ul>
-          </div>
+
+        <div class="level easy">
+          <h3>
+            Switch to <a href="https://firefox.com">Firefox</a>
+          </h3>
+          <p>
+            Firefox has a long history of respecting your privacy.
+            <button class="toggle-btn">More</button>
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
         </div>
+
+        <div class="level easy">
+          <h3>
+            Install an adblocker like <a href="https://ublockorigin.com/">uBlock Origin</a>
+          </h3>
+          <p>
+            Ads can be used to track you across websites or give your computer malware.
+            <button class="toggle-btn">More</button>
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
+        </div>
+
+        <div class="level easy">
+          <h3>
+            Use <a href="https://duckduckgo.com/">DuckDuckGo</a> instead of Google.
+          </h3>
+          <p>
+            DuckDuckGo does not track your searches or browsing history.
+            <button class="toggle-btn">More</button>
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
+        </div>
+
+        <div class="level easy">
+          <h3>
+            Tell websites not to sell or share your data in settings.
+          </h3>
+          <p>
+            Note: Websites do not have to adhere to this request.
+            <button class="toggle-btn">More</button>
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
+        </div>
+
+        <div class="level medium">
+          <h3>
+            Set Firefox to "Strict" Enhanced Tracking Protection.
+          </h3>
+          <p>
+            Note: This could cause some websites to break.
+            <button class="toggle-btn">More</button>
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
+        </div>
+
+        <div class="level medium">
+          <h3>
+            Set Firefox to delete cookies and site data when Firefox is closed.
+          </h3>
+          <p>
+            This will make it harder to track you between sessions.
+            <button class="toggle-btn">More</button>
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
+        </div>
+
+        <div class="level medium">
+          <h3>
+            Set Firefox to "Always use private browsing mode".
+          </h3>
+          <p>
+            This will log you out of everything and erase your history after closing the browser. This is very useful on shared computers or laptops that could easily be stolen.
+            <button class="toggle-btn">More</button>
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
+        </div>
+
+        <div class="level hard">
+          <h3>
+            Use <a href="https://www.torproject.org/">Tor Browser</a> for all sensitive browsing.
+          </h3>
+          <p>
+            Tor is the gold standard browser for privacy and anti-censorship. It will be very slow, however.
+            <button class="toggle-btn">More</button>
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
+        </div>
+
+        <div class="level hard">
+          <h3>
+            Block javascript with <a href="https://addons.mozilla.org/firefox/addon/noscript">NoScript</a> or <a href="https://addons.mozilla.org/firefox/addon/ghostery">Ghostery</a>
+          </h3>
+          <p>
+            Javascript is code that a website chooses to run on your computer. Blocking javascript can stop websites from learning more about your computer.
+            <button class="toggle-btn">More</button>
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
+        </div>
+
       </section>
       <section id="phones" class="section">
         <h2>
@@ -432,200 +481,274 @@
           Most people carry their phone everywhere they go. This can be used to
           track you.
         </p>
-        <div class="levels">
-          <div class="level easy">
-            <h3>
-              More Convenient
-            </h3>
-            <ul>
-              <li>
-                Disable personalized ads in iOS or Android settings.
-                <span class="explain">
-                  Android: Settings > Google > Ads > Turn off "Ad Personalization"<br>
-                  iOS: Settings > Privacy & Security > Apple Advertising > Turn off Personalized Ads
-                </span>
-              </li>
-              <li>
-                Manage app permissions.
-                <span class="explain">
-                  Set location permissions to “While using the app” or “Ask every time”.<br>
-                  Disable microphone and camera access for non-essential apps.
-                  Disable system-wide location when not needed.
-                </span>
-              </li>
-              <li>
-                Remove unused apps.
-                <span class="explain">
-                  Apps can run in the background even if you are not using them.
-                </span>
-              </li>
-              <li>
-                Use a pin or password to unlock your phone.
-                <span class="explain">
-                  In some jurisdictions you can be required to unlock your phone with your fingerprint or face, but not with a pin or password.
-                </span>
-              </li>
-            </ul>
-          </div>
-          <div class="level medium">
-            <h3>
-              Balanced
-            </h3>
-            <ul>
-              <li>
-                Use open-source apps from
-                <strong>
-                  F-Droid
-                </strong>
-                .
-              </li>
-              <li>
-                Limit app permissions manually.
-              </li>
-            </ul>
-          </div>
-          <div class="level hard">
-            <h3>
-              More Secure
-            </h3>
-            <ul>
-              <li>
-                Install a custom ROM like
-                <strong>
-                  GrapheneOS
-                </strong>
-                or
-                <strong>
-                  LineageOS
-                </strong>
-                .
-              </li>
-              <li>
-                Avoid all Google services.
-              </li>
-            </ul>
-          </div>
+        <div class="level easy">
+          <h3>
+            Disable personalized ads in iOS or Android settings.
+          </h3>
+          <p>
+            Android: Settings > Google > Ads > Turn off "Ad Personalization"<br>
+            iOS: Settings > Privacy & Security > Apple Advertising > Turn off Personalized Ads
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
         </div>
+
+        <div class="level easy">
+          <h3>
+            Manage app permissions.
+          </h3>
+          <p>
+            Set location permissions to “While using the app” or “Ask every time”. Disable microphone and camera access for non-essential apps. Disable system-wide location when not needed.
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
+        </div>
+
+        <div class="level easy">
+          <h3>
+            Remove unused apps.
+          </h3>
+          <p>
+            Apps can run in the background even if you are not using them.
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
+        </div>
+
+        <div class="level easy">
+          <h3>
+            Use a pin or password to unlock your phone.
+          </h3>
+          <p>
+            In some jurisdictions you can be required to unlock your phone with your fingerprint or face, but not with a pin or password.
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
+        </div>
+
+        <div class="level medium">
+          <h3>
+            Use open-source apps from F-Droid.
+          </h3>
+          <p>
+            This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
+        </div>
+
+        <div class="level medium">
+          <h3>
+            Limit app permissions manually.
+          </h3>
+          <p>
+            This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
+        </div>
+
+        <div class="level hard">
+          <h3>
+            Install a custom ROM like GrapheneOS or LineageOS.
+          </h3>
+          <p>
+            This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
+        </div>
+
+        <div class="level hard">
+          <h3>
+            Avoid all Google services.
+          </h3>
+          <p>
+            This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
+        </div>
+
       </section>
       <section id="accounts" class="section">
         <h2>
           🔐 Accounts
         </h2>
-        <div class="levels">
-          <div class="level easy">
-            <h3>
-              More Convenient
-            </h3>
-            <ul>
-              <li>
-                Use strong and unique passwords for every account.
-              </li>
-              <li>
-                Enable password managers like Bitwarden or 1Password.
-              </li>
-            </ul>
-          </div>
-          <div class="level medium">
-            <h3>
-              Balanced
-            </h3>
-            <ul>
-              <li>
-                Enable two-factor authentication (2FA) where available.
-              </li>
-              <li>
-                Avoid using social logins (Google, Facebook).
-              </li>
-            </ul>
-          </div>
-          <div class="level hard">
-            <h3>
-              More Secure
-            </h3>
-            <ul>
-              <li>
-                Use pseudonyms and email aliases.
-              </li>
-              <li>
-                Segment identities for different activities.
-              </li>
-            </ul>
-          </div>
+        <div class="level easy">
+          <h3>
+            Use strong and unique passwords for every account.
+          </h3>
+          <p>
+            This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
+        </div>
+
+        <div class="level easy">
+          <h3>
+            Enable password managers like Bitwarden or 1Password.
+          </h3>
+          <p>
+            This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
+        </div>
+
+        <div class="level medium">
+          <h3>
+            Enable two-factor authentication (2FA) where available.
+          </h3>
+          <p>
+            This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
+        </div>
+
+        <div class="level medium">
+          <h3>
+            Avoid using social logins (Google, Facebook).
+          </h3>
+          <p>
+            This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
+        </div>
+
+        <div class="level hard">
+          <h3>
+            Use pseudonyms and email aliases.
+          </h3>
+          <p>
+            This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
+        </div>
+
+        <div class="level hard">
+          <h3>
+            Segment identities for different activities.
+          </h3>
+          <p>
+            This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
         </div>
       </section>
       <section id="2fa" class="section">
         <h2>
           🛡️ Two-Factor Authentication
         </h2>
-        <div class="levels">
-          <div class="level easy">
-            <h3>
-              More Convenient
-            </h3>
-            <ul>
-              <li>
-                Enable 2FA using SMS or email.
-              </li>
-            </ul>
-          </div>
-          <div class="level medium">
-            <h3>
-              Balanced
-            </h3>
-            <ul>
-              <li>
-                Use TOTP apps like Aegis or Authy.
-              </li>
-            </ul>
-          </div>
-          <div class="level hard">
-            <h3>
-              More Secure
-            </h3>
-            <ul>
-              <li>
-                Use hardware tokens like YubiKey or Nitrokey.
-              </li>
-            </ul>
-          </div>
+        <div class="level easy">
+          <h3>
+            Enable 2FA using SMS or email.
+          </h3>
+          <p>
+            This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
         </div>
+
+        <div class="level medium">
+          <h3>
+            Use TOTP apps like Aegis or Authy.
+          </h3>
+          <p>
+            This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
+        </div>
+
+        <div class="level hard">
+          <h3>
+            Use hardware tokens like YubiKey or Nitrokey.
+          </h3>
+          <p>
+            This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
+        </div>
+
       </section>
       <section id="vpn" class="section">
         <h2>
           🛰️ VPN
         </h2>
-        <div class="levels">
-          <div class="level easy">
-            <h3>
-              More Convenient
-            </h3>
-            <ul>
-              <li>
-                Use any reputable no-log VPN service.
-              </li>
-            </ul>
-          </div>
-          <div class="level medium">
-            <h3>
-              Balanced
-            </h3>
-            <ul>
-              <li>
-                Use VPNs based in privacy-friendly jurisdictions.
-              </li>
-            </ul>
-          </div>
-          <div class="level hard">
-            <h3>
-              More Secure
-            </h3>
-            <ul>
-              <li>
-                Self-host your own VPN using WireGuard.
-              </li>
-            </ul>
-          </div>
+        <div class="level easy">
+          <h3>
+            Use any reputable no-log VPN service.
+          </h3>
+          <p>
+            This will be expanded text describing why you should do the above, in more detail.
+            <button class="toggle-btn">More</button>
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
         </div>
+
+        <div class="level medium">
+          <h3>
+            Use VPNs based in privacy-friendly jurisdictions.
+          </h3>
+          <p>
+            This will be expanded text describing why you should do the above, in more detail.
+            <button class="toggle-btn">More</button>
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
+        </div>
+
+        <div class="level hard">
+          <h3>
+            Self-host your own VPN using WireGuard.
+          </h3>
+          <p>
+            This will be expanded text describing why you should do the above, in more detail.
+            <button class="toggle-btn">More</button>
+            <span class="explain">
+              This will be expanded text describing why you should do the above, in more detail. Maybe we can go into the details of how Mozilla is a privacy focused company, has been around for many years, and overall has a good track record for respecting users privacy. We could also mention tradeoffs for implementing the above. I imagine text would be about this long per item.
+            </span>
+          </p>
+        </div>
+
+        <script>
+          document.querySelectorAll('.toggle-btn').forEach(button => {
+            button.addEventListener('click', () => {
+              const parentP = button.closest('p');
+              parentP.classList.toggle('show');
+              button.textContent = parentP.classList.contains('show') ? 'Less' : 'More';
+            });
+          });
+        </script>
+
       </section>
       <footer class="footer">
         <p>