Update README.md

README.md

@@ -29,7 +29,7 @@ pinned: false
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 20px;
+      padding: 10px;
     }
     .container {
       width: 100%;
@@ -38,52 +38,53 @@ pinned: false
       border-radius: 20px;
       box-shadow: 0 0 30px rgba(34, 124, 157, 0.15);
       border: 1px solid #227C9D;
-      padding: 40px;
-      margin: 20px;
+      padding: 20px;
+      margin: 10px;
     }
     .logo {
-      width: 200px;
+      width: 150px;
       height: auto;
-      margin: 0 auto 40px;
+      margin: 0 auto 30px;
       display: block;
       border-radius: 16px;
     }
     h1, h2, h3 {
       color: #227C9D;
-      margin-bottom: 20px;
+      margin-bottom: 15px;
       font-weight: 500;
     }
     h1 {
-      font-size: 36px;
+      font-size: clamp(24px, 5vw, 36px);
       text-align: center;
       text-transform: uppercase;
       letter-spacing: 2px;
     }
     h2 {
-      font-size: 24px;
+      font-size: clamp(20px, 4vw, 24px);
       border-bottom: 2px solid #227C9D;
       padding-bottom: 10px;
-      margin-top: 30px;
+      margin-top: 25px;
     }
     p {
-      margin-bottom: 20px;
+      margin-bottom: 15px;
       line-height: 1.8;
+      font-size: clamp(14px, 3vw, 16px);
     }
     .content-section {
       background-color: #141414;
       border-radius: 12px;
-      padding: 20px;
-      margin: 20px 0;
+      padding: 15px;
+      margin: 15px 0;
       border: 1px solid rgba(34, 124, 157, 0.1);
     }
     .team-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-      gap: 20px;
-      margin: 20px 0;
+      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+      gap: 15px;
+      margin: 15px 0;
     }
     .team-member {
-      padding: 20px;
+      padding: 15px;
       border-radius: 10px;
       background-color: rgba(34, 124, 157, 0.15);
       border: 1px solid #227C9D;
@@ -92,6 +93,7 @@ pinned: false
       text-decoration: none;
       color: #FFFFFF;
       display: block;
+      text-align: center;
     }
     .team-member:hover {
       transform: translateY(-5px);
@@ -107,6 +109,12 @@ pinned: false
     .team-member h3 {
       color: #FFFFFF;
       margin-bottom: 10px;
+      font-size: clamp(16px, 3vw, 18px);
+      word-break: break-word;
+    }
+    .team-member p {
+      font-size: clamp(12px, 2.5vw, 14px);
+      margin-bottom: 0;
     }
     .team-member:nth-child(odd) h3 {
       color: #227C9D;
@@ -118,13 +126,16 @@ pinned: false
       display: inline-block;
       background-color: #227C9D;
       color: #FFFFFF;
-      padding: 12px 24px;
+      padding: 10px 20px;
       border-radius: 8px;
       text-decoration: none;
       font-weight: 500;
       transition: all 0.3s ease;
       text-align: center;
       margin: 10px 0;
+      width: 100%;
+      max-width: 300px;
+      font-size: clamp(14px, 3vw, 16px);
     }
     .button:hover {
       background-color: #00A676;
@@ -133,20 +144,37 @@ pinned: false
     }
     ul {
       list-style-position: inside;
-      margin-left: 20px;
-      margin-bottom: 20px;
+      margin-left: 15px;
+      margin-bottom: 15px;
     }
     li {
-      margin-bottom: 10px;
+      margin-bottom: 8px;
+      font-size: clamp(14px, 3vw, 16px);
     }
     .org-name {
       text-align: center;
-      margin-bottom: 30px;
+      margin-bottom: 25px;
     }
     .description {
       text-align: center;
       max-width: 600px;
-      margin: 0 auto 40px;
+      margin: 0 auto 30px;
+    }
+    @media (max-width: 480px) {
+      .container {
+        padding: 15px;
+        margin: 5px;
+      }
+      .team-grid {
+        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+        gap: 10px;
+      }
+      .team-member {
+        padding: 10px;
+      }
+      .content-section {
+        padding: 12px;
+      }
     }
   </style>
 </head>
@@ -154,7 +182,7 @@ pinned: false
   <div class="container">
     <!-- <img src="" alt="BeaverAI Logo" class="logo"> -->
     <h1>BeaverAI</h1>
-    <p class="description"> A bunch of misfits discover finetuning.</p>
+    <p class="description">A bunch of misfits discover finetuning.</p>
     <div class="content-section">
       <h2>Join Our Community</h2>
       <p>Connect with us and other developers and enthusiasts on our Discord server:</p>