v1.7.3/update donation costs and styling

website/donate/index.html

@@ -230,16 +230,6 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       </div>
     </div>   
     <div class="donate overlap features card-grid">
-      <div class="support-card">
-        <h4 data-font="sans-bold" class="sub-title">1 SERVER</h4>
-        <div class="img-wrapper"> 
-          <img src="/media/costs/server1.webp"></img>
-        </div>
-        <p data-font="sans" class="body">
-          The cost of a single server for 1 month costs about $1.00
-        </p>
-        <button onclick="setDonationAmount(1.00); return false;" data-font="sans-bold" class="big-button">DONATE $1.00</button>
-      </div>
       <div class="support-card">
         <h4 data-font="sans-bold" class="sub-title">COFFEE</h4>
         <div class="img-wrapper"> 
@@ -251,14 +241,14 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         <button onclick="setDonationAmount(2.00); return false;" data-font="sans-bold" class="big-button">DONATE $2.00</button>
       </div>
       <div class="support-card">
-        <h4 data-font="sans-bold" class="sub-title">ALL SERVERS</h4>
+        <h4 data-font="sans-bold" class="sub-title">1 SERVER</h4>
         <div class="img-wrapper"> 
-          <img src="/media/costs/server+.webp"></img>
+          <img src="/media/costs/server1.webp"></img>
         </div>
         <p data-font="sans" class="body">
-          The total costs of all servers for 1 month is about $7.00
+          The cost of a single server for 1 month costs about $3.00
         </p>
-        <button onclick="setDonationAmount(7.00); return false;" data-font="sans-bold" class="big-button">DONATE $7.00</button>
+        <button onclick="setDonationAmount(3.00); return false;" data-font="sans-bold" class="big-button">DONATE $3.00</button>
       </div>
       <div class="support-card">
         <h4 data-font="sans-bold" class="sub-title">GROUP CALLS</h4>
@@ -280,6 +270,16 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         </p>
         <button onclick="setDonationAmount(15.00); return false;" data-font="sans-bold" class="big-button">DONATE $15.00</button>
       </div>
+      <div class="support-card">
+        <h4 data-font="sans-bold" class="sub-title">ALL SERVERS</h4>
+        <div class="img-wrapper"> 
+          <img src="/media/costs/server+.webp"></img>
+        </div>
+        <p data-font="sans" class="body">
+          The total costs of all servers for 1 month is about $27.00
+        </p>
+        <button onclick="setDonationAmount(7.00); return false;" data-font="sans-bold" class="big-button">DONATE $27.00</button>
+      </div>
     </div>
     <div id="donate" class="text-section">
       <div class="info">
@@ -311,6 +311,11 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
           </div>
         </div>
       </div>
+      <div class="info">
+        <div class="info-text">
+          <a href="https://paypal.me/ChromeWatchParty" target="_blank" style="display: block;" data-font="sans-bold" class="underlink">DONATE DIRECTLY ON PAYPAL</a>
+        </div>
+      </div>
     </div>
     <footer>
       <div class="link-section">

website/styles/extralarge.css

@@ -38,7 +38,7 @@ body {
 }
 
 .donate.card-grid .support-card {
-  display: inline-block !important;
+  display: inline-flex !important;
 }
 
 .text-section .info {

website/styles/extrasmall.css

@@ -36,7 +36,8 @@ input::-webkit-inner-spin-button {
 input {
   -moz-appearance: textfield;
   color: var(--color-secondary);
-  max-width: calc(100% - 10rem);
+  max-width: calc(100% - 6.5rem - 2px);
+  width: calc(100% - 6.5rem - 2px);
   max-width: --webkit-fill-available;
   margin: 2.5rem 0;
   padding: 1.5rem;
@@ -219,6 +220,11 @@ a.big-button::after {
   margin-top: 1.5rem;
 }
 
+.info .info-text > div {
+  max-width: 100%;
+  width: 100%;
+}
+
 .supported.text-section {
   position: relative;
   margin-top: 20rem;
@@ -307,6 +313,10 @@ a.big-button::after {
   flex: 1;
 }
 
+.features.card-grid .support-card img {
+  flex: unset;
+}
+
 .features.card-grid .support-card .img-wrapper {
   flex: 1;
   display: flex;

website/styles/large.css

@@ -85,7 +85,7 @@ body {
 }
 
 #donate input {
-  max-width: calc(100% - 15rem);
+  max-width: calc(100% - 10.5rem);
   width: 100%;
 }
 

website/styles/medium.css

@@ -30,6 +30,10 @@ a.title {
   font-size: 2.5rem;
 }
 
+input {
+  max-width: calc(100% - 9.5rem - 2px);
+}
+
 .big-button {
   display: inline-block;
   font-size: 1.8rem;
@@ -73,6 +77,11 @@ a.title {
   flex: 1;
 }
 
+.text-section .info .info-text > div {
+  max-width: calc(50% - 3rem);
+  width: calc(50% - 3rem);
+}
+
 .text-section .info .info-text h4.sub-title {
   margin-top: 3rem;
   padding-right: 3rem;