diff --git a/index.html b/index.html
index 7507ec0..e33fefe 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
- background-color: #eaeaea; /* Softer background color */
+ background-color: #f5f5f5;
color: #333;
}
.header {
@@ -23,19 +23,33 @@
top: 0;
z-index: 1000;
}
+ .map-container {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ flex: 1;
+ padding: 20px;
+ position: relative;
+ }
+ iframe {
+ width: 960px;
+ height: 660px;
+ border: none;
+ margin-bottom: 20px;
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+ }
.legend {
position: absolute;
- top: 10px;
- right: 10px;
- background-color: #fff;
+ top: 20px;
+ right: 20px;
+ background-color: white;
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;
+ margin: 0 0 10px;
}
.legend ul {
list-style: none;
@@ -44,34 +58,16 @@
}
.legend li {
margin-bottom: 5px;
- display: flex;
- align-items: center;
}
.legend .color-box {
width: 20px;
height: 20px;
display: inline-block;
margin-right: 10px;
- border: 1px solid #ccc;
}
.color-green {
background-color: #00ff00;
}
- .map-container {
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- flex: 1;
- padding: 20px;
- }
- iframe {
- width: 960px;
- height: 660px;
- border: none;
- margin-bottom: 20px;
- box-shadow: 0 4px 8px rgba(0,0,0,0.1);
- }
.buttons {
text-align: center;
margin: 20px 0;
@@ -111,20 +107,35 @@
gtag('js', new Date());
gtag('config', 'G-CC1B9CQ691');
+
+
-
-
+