Refactor CSS for improved design and layout

Updated styles for body, header, and various elements to enhance aesthetics and usability.

Author: EncryptMan

style.css

@@ -6,87 +6,144 @@
 
 body {
     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
-    background: #f0f0f0 url('https://img.freepik.com/free-vector/abstract-decorative-circular-stripes-seamless-pattern-design_1035-25453.jpg?semt=ais_hybrid&w=740&q=80') repeat;
+    background: #f0f8fb;                /* softer light blue background */
+    background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.15) 35px, rgba(255,255,255,.15) 70px);
     background-size: 152px;
-    padding: 42px;
+    padding: 50px 42px;
+    line-height: 1.6;
+    color: #2c2c2c;
 }
 
 header {
     text-align: center;
-    margin-bottom: 32px;
+    margin-bottom: 40px;
 }
 
 h1 {
-    background: #a3d8f4;
-    color: #2c2c2c;
-    padding: 16px;
-    font-size: 28px;
-    border-radius: 11px;
+    background: linear-gradient(135deg, #a3d8f4, #7cc1e2); /* subtle gradient */
+    color: #1e1e1e;
+    padding: 18px 24px;
+    font-size: 32px;
+    border-radius: 14px;
+    display: inline-block;
+    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 }
 
 .tagline {
-    color: #555;
+    color: #446677;
     font-style: italic;
-    margin-top: 9px;
+    margin-top: 12px;
+    font-size: 18px;
 }
 
 #friends {
     float: left;
-    width: 222px;
-    margin-right: 28px;
+    width: 240px;
+    margin-right: 36px;
 }
 
 #entries {
     float: left;
-    width: 598px;
+    width: 640px;
 }
 
 .box {
-    background: #c3e8f5;
-    border: 3px solid #7cc1e2;
-    border-radius: 16px;
-    padding: 21px;
-    margin-bottom: 24px;
+    background: #d0edfb;
+    border: 3px solid #5dbde0;
+    border-radius: 18px;
+    padding: 24px;
+    margin-bottom: 28px;
+    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.box:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
 }
 
 #friends .box {
-    background: #0094aa;
+    background: linear-gradient(135deg, #0094aa, #007a8f);
     color: white;
 }
 
 #friends h2 {
     color: white;
-    margin-bottom: 16px;
+    margin-bottom: 18px;
+    font-size: 22px;
+    border-bottom: 2px solid rgba(255,255,255,0.3);
+    padding-bottom: 8px;
 }
 
 #friends ul {
     list-style: none;
 }
 
+#friends li {
+    margin: 12px 0;
+}
+
 #friends a {
-    color: white;
+    color: #bfffd9;
+    text-decoration: none;
+    font-weight: bold;
+    transition: color 0.2s;
+}
+
+#friends a:hover {
+    color: #ffffff;
     text-decoration: underline;
 }
 
 .entry h2 {
-    color: #00607a;
-    margin-bottom: 14px;
-    font-size: 20px;
+    color: #005070;
+    margin-bottom: 12px;
+    font-size: 24px;
+    position: relative;
+}
+
+.entry h2::after {
+    content: '';
+    display: block;
+    width: 60px;
+    height: 4px;
+    background: #5dbde0;
+    margin-top: 8px;
+    border-radius: 2px;
 }
 
 .date {
-    background: #a3d8f4;
-    padding: 5px 11px;
-    border-radius: 9px;
-    font-weight: normal;
+    display: inline-block;
+    background: #7cc1e2;
+    color: white;
+    padding: 6px 14px;
+    border-radius: 20px;
+    font-weight: bold;
+    font-size: 14px;
+    margin-bottom: 16px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
 .right-img {
     float: right;
-    margin: 0 0 14px 21px;
-    border: 2px solid #7cc1e2;
+    margin: 0 0 18px 24px;
+    border: 4px solid #7cc1e2;
+    border-radius: 10px;
+    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
+    max-width: 280px;
 }
 
 p {
-    line-height: 1.62;
+    line-height: 1.75;
     text-align: justify;
+    margin-bottom: 18px;
+    text-justify: inter-word;
+}
+
+/* Simple clearfix */
+.clearfix::after {
+    content: "";
+    display: table;
+    clear: both;
+}