Made footer on index page look better

Author: MoonTM-GIT

css/footer.css

@@ -10,8 +10,6 @@
     font-weight: 600;
     line-height: 1.5;
     text-align: center;
-
-    width: 100%;
 }
 
 /* --------------------- */

css/pages/index/indexFooter.css

@@ -6,13 +6,22 @@
     padding: 1% 20%;
 }
 
-.footer-container p {
+.footer-container div {
+    align-self: center;
     font-family: "Inter";
     font-size: 12px;
     font-weight: 600;
     line-height: 1.5;
 
-    width: 50%;
+    width: auto;
+}
+
+.left {
+    margin-left: 5%;
+}
+
+.right {
+    margin-left: auto;
 }
 
 /* --------------------- */
@@ -21,31 +30,51 @@
 
 
 @media only screen and (max-width: 1600px) {
-    .footer-container p {
-        font-size: 10px;
+    .footer-container div {
+        font-size: 11px;
     }
 }
 
 @media only screen and (max-width: 1250px) {
-    .footer-container p {
-        font-size: 9px;
+    .footer-container div {
+        font-size: 10px;
     }
 }
 
 @media only screen and (max-width: 1020px) {
-    .footer-container p {
-        font-size: 8px;
+    .footer-container div {
+        font-size: 10px;
     }
 }
 
 @media only screen and (max-width: 940px) {
-    .footer-container p {
-        font-size: 7px;
+    .footer-container {
+        padding: 1% 10%;
+    }
+
+    .footer-container div {
+        align-self: flex-start;
+        font-size: 10px;
+        width: auto;
+    }
+
+    .footer-container {
+        flex-direction: column;
+    }
+
+    .left {
+        margin-left: 18%;
+        margin-bottom: 1%;
+    }
+    
+    .right {
+        margin-left: 18%;
     }
 }
 
 @media only screen and (max-width: 750px) {
-    .footer-container p {
-        font-size: 6px;
+
+    .footer-container div {
+        font-size: 9px;
     }
 }

index.html

@@ -83,9 +83,9 @@ <h1>WITH SUPPORT FROM</h1>
         </div>
     </div>
     <!-- FOOTER -->
-    <div class="footer-container" style="color: black;"> 
-        <p>©️ 2022 JavaDiscord <br> JavaDiscord is not affiliated, associated, or endorsed with/by Discord or Oracle.</p>
-        <p style="margin-left: 4px;">¹ Users that sent a message in the last month, data gathered from Discord's Insight page. <br> ² Data gathered from Discord's Insight page.</p>
+    <div class="footer-container" style="color: black;">
+        <div class="left">©️ 2022 JavaDiscord <br> JavaDiscord is not affiliated, associated, or endorsed with/by Discord or Oracle.</div>
+        <div class="right">¹ Users that sent a message in the last month, data gathered from Discord's Insight page. <br> ² Data gathered from Discord's Insight page.</div>
     </div>
     <!-- Hamburger Menu JavaScript -->
     <script type="text/javascript">