/* styles.css */

body {
  width: 100%;
  max-height: 650px;
  height: 100%;
  position: relative;
  margin: auto;
  background-color: black;
}

.image-map-container {
  position: relative;
  width: 100%;
  max-width: 3600px;
}
.image-map-container img {
  width: 100%;
  height: auto;
  display: block;
}
.image-map-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.image-map-overlay a {
  position: absolute;
  pointer-events: auto;
  display: block;
  text-decoration: none;
}
.area-0 {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(
    4.84% 25.04%,
    6.34% 26.99%,
    3.24% 29.5%,
    5.29% 30.05%,
    4.91% 35.24%,
    7.52% 32.44%,
    8.35% 36.01%,
    11.34% 32.69%,
    13.4% 36.22%,
    15.59% 32.52%,
    20.77% 35.79%,
    19.13% 32.61%,
    25.08% 31.5%,
    21.12% 30.31%,
    23.76% 24.4%,
    19.97% 26.19%,
    19.85% 20.74%,
    15.89% 24.3%,
    14.83% 19.82%,
    12.48% 24.67%,
    8.46% 21.48%,
    8.91% 24.3%,
    8.91% 24.3%
  );
}
.area-1 {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(
    42.4% 21.33%,
    43.97% 26.04%,
    40.56% 26.36%,
    43.36% 29.89%,
    40.82% 32.67%,
    45.11% 32.78%,
    45.28% 36.1%,
    50.19% 32.35%,
    52.38% 36.31%,
    53.08% 32.57%,
    57.72% 34.92%,
    56.67% 30%,
    60.08% 30.64%,
    57.02% 25.93%,
    58.68% 24.11%,
    54.56% 23.36%,
    55.09% 19.51%,
    51.85% 21.97%,
    50.36% 18.97%,
    47.82% 23.47%,
    47.82% 23.47%
  );
}
.area-2 {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(
    78.37% 24.33%,
    82.05% 25.18%,
    83.63% 19.83%,
    85.12% 23.9%,
    87.92% 20.26%,
    89.23% 24.75%,
    92.38% 22.83%,
    92.82% 26.47%,
    96.67% 24.54%,
    94.13% 30.21%,
    98.16% 31.6%,
    93.34% 33%,
    95.36% 36.21%,
    89.67% 34.39%,
    88.88% 37.38%,
    85.55% 34.28%,
    81.44% 36.85%,
    80.91% 32.14%,
    77.24% 32.03%,
    79.95% 27.64%
  );
}
.area-3 {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(
    77.76% 83.95%,
    80.13% 85.23%,
    79.51% 81.27%,
    82.66% 83.41%,
    83.71% 79.88%,
    85.29% 82.34%,
    87.3% 79.45%,
    88.97% 82.56%,
    91.16% 80.31%,
    91.68% 82.99%,
    96.06% 82.24%,
    95.27% 84.81%,
    97.98% 87.91%,
    95.62% 89.73%,
    97.2% 94.76%,
    94.22% 92.51%,
    92.38% 95.4%,
    89.93% 92.73%,
    88% 94.98%,
    85.47% 92.09%,
    83.19% 94.98%,
    82.66% 91.23%,
    80.56% 93.8%,
    80.74% 90.69%,
    77.32% 91.23%,
    79.6% 88.87%,
    76.62% 84.16%,
    76.62% 84.16%
  );
}
.area-4 {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(
    3.7% 81.49%,
    6.42% 83.52%,
    6.5% 81.06%,
    8.87% 82.24%,
    8.87% 79.13%,
    12.9% 81.27%,
    15% 77.53%,
    17.71% 81.27%,
    21.04% 77.53%,
    21.82% 82.34%,
    24.28% 81.17%,
    22.96% 85.23%,
    25.41% 88.77%,
    19.46% 89.41%,
    21.74% 91.98%,
    17.27% 93.05%,
    17.8% 96.37%,
    14.21% 94.33%,
    13.86% 97.76%,
    10.44% 94.55%,
    8.69% 97.12%,
    7.47% 92.19%,
    5.1% 93.69%,
    4.58% 90.27%,
    2.3% 90.37%,
    3.7% 86.73%,
    2.3% 84.81%,
    4.58% 84.59%,
    4.58% 84.59%
  );
}