Making everything blue

Author: Code-JL

assets/styles.css

@@ -4,24 +4,19 @@ body {
     margin: 0;
     padding: 0;
     line-height: 1.6;
-    color: #2b2b2b;
-    background: linear-gradient(to bottom, #f7faff, #eaf6f6);
+    color: #eef6fc; /* Light blue text */
+    background: linear-gradient(to bottom, #2b6da8, #1b4e7e); /* Darker blue gradient */
 }
 
 /* Header */
 header {
-    background: #a2d9ff; /* Light blue */
-    color: #fff;
+    background: #17456a; /* Deep navy blue */
+    color: #eef6fc;
     padding: 15px 20px;
     position: sticky;
     top: 0;
     z-index: 1000;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    transition: all 0.3s ease-in-out;
-}
-
-header:hover {
-    background: #91c8eb; /* Slightly darker blue */
 }
 
 nav ul {
@@ -37,7 +32,7 @@ nav ul li {
 }
 
 nav ul li a {
-    color: #333;
+    color: #a9d3f5; /* Lighter blue */
     text-decoration: none;
     font-weight: bold;
     padding: 5px 10px;
@@ -46,7 +41,7 @@ nav ul li a {
 }
 
 nav ul li a:hover {
-    background: #c2f0e8; /* Light mint */
+    background: #1b4e7e; /* Slightly darker blue */
     transform: scale(1.05);
 }
 
@@ -55,13 +50,14 @@ section {
     padding: 40px 20px;
     margin: 20px auto;
     max-width: 900px;
-    background: #fff;
+    background: #3a86c8; /* Medium blue */
     border-radius: 10px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    color: #eef6fc; /* Text in sections stays light blue */
 }
 
 h1, h2 {
-    color: #333;
+    color: #eef6fc;
     text-align: center;
 }
 
@@ -75,36 +71,45 @@ h1, h2 {
 .gallery img {
     width: 100%;
     border-radius: 5px;
+    border: 2px solid #1b4e7e; /* Dark blue border */
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     cursor: pointer;
 }
 
 .gallery img:hover {
     transform: scale(1.05);
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
 }
 
 /* Footer */
 footer {
     text-align: center;
     padding: 15px 0;
-    background: #a2d9ff; /* Light blue */
-    color: #fff;
+    background: #17456a; /* Deep navy blue */
+    color: #eef6fc;
 }
 
+/* Buttons and Links */
 .button {
     display: inline-block;
     text-decoration: none;
-    color: white;
-    background: #4db8ff; /* Brighter blue */
+    color: #eef6fc; /* Light blue text */
+    background: #1b4e7e; /* Dark blue button */
     padding: 5px 10px;
     border-radius: 5px;
     cursor: pointer;
     transition: background 0.3s ease, transform 0.2s ease;
 }
 
 .button:hover {
-    background: #0099cc; /* Darker blue */
+    background: #17456a; /* Slightly darker navy */
     transform: scale(1.05);
 }
 
+/* Images and Text */
+img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 10px;
+    margin: 10px 0;
+}