/* Import the "Mountains of Christmas" font using the @import rule */
@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas&display=swap');


body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Hide overflow to prevent scrollbars */
}

#snowfall {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows interactions with elements beneath */
	z-index: 2; /* Increase the z-index */
}

.snowflake {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #fff;
	opacity: 0.8;
    clip-path: polygon(
    50% 0%,
    54.3% 22.6%,
    71.1% 29.4%,
    57.1% 42.6%,
    60% 60%,
    50% 50%,
    40% 60%,
    42.9% 42.6%,
    28.9% 29.4%,
    45.7% 22.6%
  );
  animation: snowfall 10s linear infinite;
}

@keyframes snowfall {
    0% {
        transform: translateY(0) translateX(0);
    }
    100% {
        transform: translateY(100vh) translateX(15vw);
    }
}

.title-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0); /* Transparent white background */
  font-family: 'Mountains of Christmas', sans-serif; /* Use the custom font */
  text-align: center; /* Center the text */
  font-weight: bold; /* Make the text bold */
  padding: 20px 0;
  z-index: 1002; /* Place it above the map */
  pointer-events: none; /* Make it non-clickable */
}

/* Media query for mobile devices */
@media (max-width: 767px) {
  .title-card {
    z-index: 1000; /* Change the z-index for mobile */
  }
}

.title-card h1 {
  font-size: 64px;
  color: #00873E; /* Red text color */
}

/* Media query for mobile devices */
@media (max-width: 767px) {
  .title-card h1 {
    font-size: 32px; /* Adjust the font size for smaller screens */
  }
}

#map {
  height: 100vh; /* Set the height to 100% of the viewport height */
  width: 100vw; /* Set the width to 100% of the viewport width */
  z-index: 1; /* Increase the z-index */
}

/* Add the watermark logo */
#watermark {
  position: fixed;
  bottom: 10px; /* Adjust the position as needed */
  right: 10px; /* Adjust the position as needed */
  z-index: 1000; /* Make sure it's above the snowfall animation */
}

/* Media query for mobile devices */
@media (max-width: 767px) {
  #watermark {
    display: none; /* Hide the watermark on mobile */
  }
}

/* Adjust the size and other styles as needed */
#watermark img {
  width: 250px; /* Adjust the width as needed */
  opacity: 0.8; /* Adjust the opacity as needed */
}

#sidebar {
  position: fixed;
  left: 50%; /* Center horizontally */
  top: 15%; /* Adjust the top position as needed */
  transform: translateX(-50%); /* Center horizontally */
  height: 80%;
  background-color: #fff;
  z-index: 1001;
  overflow: hidden;
  transition: width 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
}

/* Media query for mobile devices */
@media (max-width: 767px) {
  #sidebar {
    top: 5%; /* Align the sidebar to the top */
    height: 95%; /* Fill the entire viewport height */
  }
}

#open-sidebar {
display: none;
}

#close-sidebar {
position: absolute;
top: 0.5%;
left: 50%;
cursor: pointer;
font-size: 36px;
}

#close-sidebar:hover {
  color: #5d1117; /* Change the color to red on hover */
}

#sidebar-content {
width: 100%;
height: 100%;
}

.custom-marker .responsive-icon {
  max-width: 100%; /* Ensure the image doesn't exceed the container's width */
  max-height: 100%; /* Ensure the image doesn't exceed the container's height */
  width: auto; /* Allow the image to scale with its aspect ratio */
  height: auto; /* Allow the image to scale with its aspect ratio */
}

/* Add festive styles to the popup */
.leaflet-popup {
    border: 3px solid rgba(255, 0, 0, 0.5); /* Add a 3px solid red border with 50% opacity */
	border-radius: 10px;
    box-shadow: 0px 0px 5px 5px rgba(255, 0, 0, 0.5); /* Add a semi-transparent red shadow around the popup */
}

/* Add some animation to the popup */
.leaflet-popup-content {
	color: #ff0000; /* Red text color */
	font-family: 'Mountains of Christmas', sans-serif; /* Use the custom font */
	text-align: center; /* Center the text */
    font-weight: bold; /* Make the text bold */
    transition: background-color 0.3s, transform 0.2s;
	border-radius: 5px;
}

/* Change the background color and add a subtle animation on hover */
.leaflet-popup-content:hover {
    transform: scale(1.1); /* Scale up on hover */
}