fix: Adjust mobile appearance

Author: LisoUseInAIKyrios

dist/css/styles.css

@@ -20,6 +20,7 @@ body {
     line-height: 1.6;
     color: var(--text-color);
     background-color: var(--background);
+    min-height: 100vh;
     display: flex;
     flex-direction: column;
 }
@@ -82,6 +83,7 @@ main {
 .hero-logo {
     max-width: 90%;
     height: auto;
+    margin-bottom: 2.5rem;
 }
 
 /* Download Button */
@@ -137,20 +139,24 @@ main {
 .faq {
     max-height: 0;
     overflow: hidden;
-    transition: max-height 0.5s ease-out;
+    transition: all 0.5s ease-out;
     background-color: var(--background-alt);
     border-radius: 0.75rem;
-    border: 1px solid transparent;
-    margin-top: 2rem;
+    border-width: 0;
+    border-style: solid;
+    border-color: var(--border-color);
+    margin-top: 0;
     padding: 0 2rem;
     width: 100%;
-    max-width: 600px; /* Or other desired width */
+    max-width: 600px;
 }
 
 .faq.open {
-    max-height: 1000px; /* Adjust as needed */
-    padding: 2rem;
-    border-color: var(--border-color);
+    max-height: 1000px;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    margin-top: 2rem;
+    border-width: 1px;
 }
 
 .faq-item {
@@ -281,14 +287,18 @@ details[open] .donate-toggle::after {
         padding: 1rem;
     }
 
+    .hero, .donate-hero {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+
     .hero h1, .donate-hero h1 {
         font-size: 2.5rem;
     }
 
     .description {
         font-size: 1rem;
         max-width: 100%;
-        padding: 0 1rem;
     }
 
     .download-button {

dist/donate/index.html

@@ -27,8 +27,7 @@ <h1>Donate</h1>
     </section>
 
     <section class="donate-section">
-        <details class="donate-collapse" open>
-            <summary class="donate-toggle">Donate with Cryptocurrency</summary>
+        <div class="donate-collapse">
             <div class="crypto-options">
                 <a href="bitcoin:bc1q07dfdh7u358ex5n0dxcc3az4dmzgf4759zmvf" class="crypto-link">
                     <span class="crypto-name">Bitcoin (BTC)</span>
@@ -51,7 +50,7 @@ <h1>Donate</h1>
                     <span class="crypto-address">48HvobHs4iiET9R8FEV37zNPeE5jGtTJ1eQpveSCwSVZ1zveU9D73VyM2FnXQc5DPLZ5wpeR9aQgjVe3oyfoXXzzDsChepf</span>
                 </a>
             </div>
-        </details>
+        </div>
     </section>
 
     <section class="back-link-section">

dist/index.html

@@ -21,11 +21,6 @@
             comes the next generation of patching</p>
         <img src="images/morphe_wordmark_light.svg" alt="Morphe" class="hero-logo">
 
-        <br/>
-        <br/>
-        <br/>
-        <br/>
-
         <a href="http://TODO/FIXME" class="download-button">Download Morphe</a>
     </section>
 
@@ -40,7 +35,6 @@
     <div class="faq-container">
         <section class="faq" id="faq-content">
             <h2>Frequently Asked Questions</h2>
-            <br/>
             <div class="faq-item">
                 <h3>🛡 Is Morphe safe?</h3>
                 <p>As safe as modifying obfuscated bytecode can be. All source code for Morphe is