diff --git a/index.html b/index.html
index 2c14205..7507ec0 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
- background-color: #f4f4f4;
+ background-color: #eaeaea; /* Softer background color */
color: #333;
}
.header {
@@ -23,21 +23,39 @@
top: 0;
z-index: 1000;
}
- .navbar {
+ .legend {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ background-color: #fff;
+ padding: 10px;
+ border: 1px solid #ccc;
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+ width: 200px;
+ }
+ .legend h3 {
+ margin-top: 0;
+ font-size: 18px;
+ }
+ .legend ul {
+ list-style: none;
+ padding-left: 0;
+ margin: 0;
+ }
+ .legend li {
+ margin-bottom: 5px;
display: flex;
- justify-content: center;
- background-color: #2c3e50;
- padding: 10px 0;
+ align-items: center;
}
- .navbar a {
- color: white;
- padding: 14px 20px;
- text-decoration: none;
- text-align: center;
+ .legend .color-box {
+ width: 20px;
+ height: 20px;
+ display: inline-block;
+ margin-right: 10px;
+ border: 1px solid #ccc;
}
- .navbar a:hover {
- background-color: #2980b9;
- border-radius: 5px;
+ .color-green {
+ background-color: #00ff00;
}
.map-container {
width: 100%;
@@ -54,34 +72,6 @@
margin-bottom: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
- .legend {
- width: 960px;
- margin-bottom: 20px;
- text-align: left;
- padding: 10px;
- background-color: #fff;
- border: 1px solid #ccc;
- box-shadow: 0 4px 8px rgba(0,0,0,0.1);
- }
- .legend h3 {
- margin-top: 0;
- }
- .legend ul {
- list-style: none;
- padding-left: 0;
- }
- .legend li {
- margin-bottom: 5px;
- }
- .legend .color-box {
- width: 20px;
- height: 20px;
- display: inline-block;
- margin-right: 10px;
- }
- .color-green {
- background-color: #00ff00;
- }
.buttons {
text-align: center;
margin: 20px 0;
@@ -121,32 +111,10 @@
gtag('js', new Date());
gtag('config', 'G-CC1B9CQ691');
-
-
-
+
+
+
+