Improved design and mobile usability

Author: document10

img/discord.webp

@@ -38,36 +38,36 @@ <h1>document10</h1>
             </div>
             <div id="social">
                 <a href="https://github.com/document10" class="social" id="gh">
-                    <img src="./img/github.webp" alt="Github" class="linkicon">
+                    <img src="./img/github.webp" alt="Github" class="linkicon" loading="lazy">
                     <p class="desc">Github</p>
                     <p class="accent">(document10)</p>
                 </a>
                 <a href="https://replit.com/@document10" class="social" id="ri">
-                    <img src="./img/replit.webp" alt="Replit" class="linkicon">
+                    <img src="./img/replit.webp" alt="Replit" class="linkicon" loading="lazy">
                     <p class="desc">Replit</p>
                     <p class="accent">(document10)</p>
                 </a>
                 <a href="https://www.instagram.com/document10_/" class="social" id="in">
-                    <img src="./img/instagram.webp" alt="Instaggram" class="linkicon">
+                    <img src="./img/instagram.webp" alt="Instagram" class="linkicon" loading="lazy">
                     <p class="desc">Instagram</p>
                     <p class="accent">(document10_)</p>
                 </a>
                 <a href="https://imgur.com/user/dxvk10/posts" class="social" id="im">
-                    <img src="./img/imgur.webp" alt="Imgur" class="linkicon">
+                    <img src="./img/imgur.webp" alt="Imgur" class="linkicon" loading="lazy">
                     <p class="desc">Imgur</p>
                     <p class="accent">(dxvk10)</p>
                 </a>
                 <a href="https://discordapp.com/users/332934999173234688" class="social" id="ds">
-                    <img src="./img/discord.webp" alt="Discord" class="linkicon">
+                    <img src="./img/discord.webp" alt="Discord" class="linkicon" loading="lazy">
                     <p class="desc">Discord</p>
                     <p class="accent">(document10)</p>
                 </a>
             </div>
-            <div id="footer" lz>
-                <a href="https://replit.com/@STARSHIPSTUDIOS/Linktree-v2?v=1" class="link">Inspiration</a>
-                <a href="https://imgur.com/gallery/YdMlsh9" class="link">Background (AI generated)</a>
-                <a href="https://fonts.google.com/share?selection.family=Dosis|Playpen+Sans|Roboto|Source+Code+Pro" class="link">Fonts used</a>
-                <a href="https://www.iconfinder.com/" class="link">Icons source</a>
+            <div id="footer">
+                <a href="https://replit.com/@STARSHIPSTUDIOS/Linktree-v2?v=1" class="footer">Inspiration</a>
+                <a href="https://imgur.com/gallery/YdMlsh9" class="footer">Background (AI generated)</a>
+                <a href="https://fonts.google.com/share?selection.family=Dosis|Playpen+Sans|Roboto|Source+Code+Pro" class="footer">Fonts used</a>
+                <a href="https://www.iconfinder.com/" class="footer">Icons source</a>
             </div>
         </div>
     </body>

img/github.webp

@@ -1,6 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Dosis&family=Playpen+Sans&family=Roboto&family=Source+Code+Pro&display=swap');
 
-body{
+html,body{
     box-sizing: border-box;
     background-color: #00ffff;
     background-image: url('img/bg.webp');
@@ -12,7 +12,7 @@ body{
 h1{
     font-family: 'Playpen Sans', cursive;
     text-align: center;
-    color: #eeeeee;
+    color: #ffffff;
     text-shadow: 2px 3px 5px #888888;
     font-size: 50px;
     padding: 0%;
@@ -43,7 +43,7 @@ a {
 #aboutme {
     display: flex;
     flex-flow: row wrap;
-    justify-content: center;
+    justify-content: space-evenly;
     align-content: center;
     padding: 0%;
     margin: 0%;
@@ -63,7 +63,7 @@ a {
     height: 256px;
     align-self: center;
     padding: 0%;
-    margin: 0.5%;
+    margin: 0%;
 }
 
 #gh {
@@ -89,12 +89,13 @@ a {
 #footer {
     display: flex;
     flex-flow: row wrap;
-    justify-content: center;
+    justify-content: space-evenly;
     align-content: center;
-    background-color: #00000099;
+    background-image: linear-gradient(#00000099,#000000dd);
+    backdrop-filter: blur(5px);
     border-radius: 10px;
     padding: 0%;
-    margin: 1%;
+    margin: 0%;
 }
 
 .aboutme{
@@ -106,7 +107,8 @@ a {
     background-color: #000000aa;
     border-radius: 10px;
     padding: 0.25%;
-    margin: 1%;
+    margin: 0% 0% 1% 1%;
+    backdrop-filter: blur(3px);
     transition: all 0.25s;
 }
 
@@ -127,7 +129,7 @@ a {
     margin: 0.25%;
     font-size: 30px;
     display: flex;
-    flex-flow: row wrap;
+    flex-direction: row;
     justify-content: center;
     align-items: center;
     transition: all 0.5s;
@@ -142,8 +144,8 @@ a {
 
 .linkicon {
     display: inline;
-    width: 32px;
-    height: 32px;
+    width: 40px;
+    height: 40px;
     padding: 0%;
     margin: 0%;
 }
@@ -159,13 +161,13 @@ a {
     display: inline;
     font-size: 25px;
     font-family: 'Dosis', sans-serif;
-    color: #aaffee;
+    color: #55ffff;
     text-shadow: 3px 3px 5px #111111;
     padding: 0%;
     margin: 0%;
 }
 
-.link {
+.footer {
     color: #ffb700;
     text-shadow: 5px 5px 5px #000000;
     font-size: 20px;
@@ -175,7 +177,7 @@ a {
     transition: all 0.5s;
 }
 
-.link:hover {
+.footer:hover {
     color: #aaff00;
     text-shadow: 6px 6px 5px #666666;
 }
@@ -196,11 +198,15 @@ a {
         flex-direction: column;
         justify-content: center;
         align-content: center;
+        padding: 0%;
+        margin: 1%;
     }
     #footer{
         flex-direction: column;
         justify-content: center;
         align-content: center;
+        padding: 0%;
+        margin: 1%;
     }
     .aboutme {
         font-size: 30px;
@@ -210,10 +216,20 @@ a {
     }
     .social {
         font-size: 40px;
+        justify-content: space-between;
     }
-    .link{
-        text-align: center;
+    .footer{
         font-size: 25px;
-        margin: 1.5%;
+        text-align: center;
+        padding: 0%;
+        margin: 1.5% 0% 1.5% 0%;
+        width: 100%;
+    }
+    .accent{
+        font-size: 20px;
+    }
+    .linkicon {
+        width: 45px;
+        height: 45px;
     }
 }