Update styles

Author: adityaoberai

src/App.svelte

@@ -2,34 +2,43 @@
   import AltText from './components/AltText.svelte'
 </script>
 
-<section id="sponsor">
-  <a class="sponsor-image" href="https://getautoseo.com/image-alt-text-generator" target="_blank">
-    <img src="/sponsor.png" alt="AutoSEO Image Alt Text Generator">
-  </a>
-</section>
-
 <main>
+  <div class="sponsor align-main">
+    <label class="sponsor-label" for="sponsor-link">
+      Thank you to our sponsor!
+      <a id="sponsor-link" class="sponsor-link" href="https://getautoseo.com/image-alt-text-generator" target="_blank">
+        <img class="sponsor-image" src="/sponsor.png" alt="AutoSEO Alt Text Generator">
+      </a>
+    </label>
+  </div>
+
   <div class="align-main">
     <h1>Alt Text Generator</h1>
 
     <p>Generate alt text for your images and help make the internet more accessible!</p>
 
     <AltText />
   </div>
-</main>
-<div class="footer">
-  <p>Support this project by <a href="https://github.com/adityaoberai/Alt-Text-Generator" target="_blank">starring ⭐</a> and <a href="https://github.com/sponsors/adityaoberai" target="_blank">sponsoring 💸</a> on GitHub</p>
-</div>
 
+  <div class="footer">
+    <p>Support this project by <a href="https://github.com/adityaoberai/Alt-Text-Generator" target="_blank">starring ⭐</a> and <a href="https://github.com/sponsors/adityaoberai" target="_blank">sponsoring 💸</a> on GitHub</p>
+  </div>
+</main>
 
 <style>
   h1 {
-    font-size: 3.2em;
+    font-size: 4rem;
     line-height: 1.1;
     max-width: 80vw;
   }
 
   p {
+    font-size: 1.5rem;
+    max-width: 80vw;
+  }
+
+  .footer p {
     max-width: 80vw;
+    font-size: 1rem;
   }
 </style>

src/app.css

@@ -16,41 +16,56 @@
 
 body {
   max-width: 100vw;
-  min-height: 100vh;
   margin: 0;
-  display: flex;
-  place-items: center;
 }
 
 #app {
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
 }
 
-@media screen and (min-width: 769px) {
+.sponsor {
+  display: flex;
+  flex-direction: column;
+}
+.sponsor-label {
+  font-size: 1rem;
+  padding: 1rem;
+  border-radius: 8px;
+  border: 1.5px solid;
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+}
+
+@media screen and (min-width: 1201px) {
   .sponsor-image {
-    width: 40%;
+    width: 25vw;
   }
 }
 
-@media screen and (max-width: 768px) and (min-width: 481px) {
+@media screen and (min-width: 601px) and (max-width: 1200px) {
   .sponsor-image {
-    width: 65%;
+    width: 65vw;
   }
 }
 
-@media screen and (max-width: 480px) {
+@media screen and (max-width: 600px) {
   .sponsor-image {
-    width: 100%;
+    width: 90vw;
   }
 }
 
 main {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  justify-content: space-evenly;
   align-items: center;
-  min-height: 70vh;
+  min-height: 100vh;
 }
 
 .align-main {
@@ -80,7 +95,7 @@ button {
   border-radius: 8px;
   border: 1.5px solid #f9f9f9;
   padding: 0.6em 1.2em;
-  font-size: 1em;
+  font-size: 1.5rem;
   font-weight: 500;
   font-family: inherit;
   background-color: #242424;
@@ -100,14 +115,12 @@ button:focus-visible {
   display: block;
   border-top: 2px solid #f9f9f9;
   bottom: 0;
-  left: 0;
-  right: 0;
   margin: 0 5vw;
   text-align: center;
 }
 
 .footer p {
-  padding: 0 5vw;
+  padding: 1vw 5vw;
   line-height: 2.5rem;
 }