Update style.css

Author: CoderInWaves

style.css

@@ -5,17 +5,14 @@
   box-sizing: border-box;
 }
 
+/* Global */
 body {
-  font-family: "Segoe UI", Arial, sans-serif;
-  background: linear-gradient(135deg, #f4f7fa, #e6eef5);
+  font-family: "Inter", "Segoe UI", Arial, sans-serif;
+  background: linear-gradient(135deg, #f8fafc, #eef2f7);
   color: #333;
   line-height: 1.6;
 }
 
-a {
-  text-decoration: none;
-}
-
 /* Layout */
 .container {
   display: flex;
@@ -25,50 +22,54 @@ a {
 /* Sidebar */
 .sidebar {
   width: 280px;
-  background: #fff;
+  background: #ffffff;
   padding: 40px 20px;
   border-right: 1px solid #e1e4e8;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
+  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
 }
 
 .profile img.avatar-img {
   width: 120px;
   height: 120px;
   border-radius: 50%;
   object-fit: cover;
-  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   margin-bottom: 15px;
 }
 
 .profile h1 {
-  font-size: 1.6rem;
+  font-size: 1.8rem;
   margin-bottom: 6px;
-  color: #222;
+  color: #111;
 }
 
 .subtitle {
   font-size: 0.95rem;
   color: #666;
+  font-weight: 500;
 }
 
 /* Buttons */
 .buttons {
-  margin-top: 20px;
+  margin-top: 25px;
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   justify-content: center;
 }
 
 .btn {
-  padding: 10px 16px;
-  border-radius: 8px;
-  font-weight: bold;
-  transition: 0.3s ease;
-  font-size: 0.9rem;
+  padding: 10px 18px;
+  border-radius: 10px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  font-size: 0.95rem;
+  cursor: pointer;
+  display: inline-block;
 }
 
 .btn-primary {
@@ -78,6 +79,8 @@ a {
 
 .btn-primary:hover {
   background: #024c9a;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 10px rgba(3, 102, 214, 0.3);
 }
 
 .btn-secondary {
@@ -88,39 +91,69 @@ a {
 
 .btn-secondary:hover {
   background: #e9ecef;
+  transform: translateY(-2px);
 }
 
 /* Main Content */
 .main-content {
   flex: 1;
-  padding: 50px;
+  padding: 60px;
 }
 
 .main-content h2 {
-  font-size: 1.4rem;
-  margin-bottom: 12px;
-  color: #222;
+  font-size: 1.6rem;
+  margin-bottom: 14px;
+  color: #111;
   border-bottom: 2px solid #eee;
   padding-bottom: 6px;
 }
 
 .intro p {
   margin-top: 8px;
-  font-size: 1rem;
+  font-size: 1.05rem;
   color: #444;
 }
 
+.highlight {
+  color: #0366d6;
+  font-weight: bold;
+}
+
 /* Cards */
 .card {
   background: #fff;
   border: 1px solid #e1e4e8;
-  padding: 20px;
-  border-radius: 12px;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
+  padding: 24px;
+  border-radius: 14px;
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
   margin-top: 20px;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
 }
 
 .card h3 {
-  margin-bottom: 8px;
+  margin-bottom: 10px;
   color: #222;
 }
+
+/* Responsive */
+@media (max-width: 768px) {
+  .container {
+    flex-direction: column;
+  }
+
+  .sidebar {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid #e1e4e8;
+    box-shadow: none;
+  }
+
+  .main-content {
+    padding: 30px 20px;
+  }
+}