/*
 * Overall page styling. We use a flex layout to divide the page into
 * a sidebar and the main map area. A warm neutral palette echoes
 * the provided mock‑up and keeps the focus on the map itself.
 */
body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #fefaf6;
  color: #444;
}

.layout {
  display: flex;
  min-height: 100vh;
}

/* Sidebar on the left with navigation links */
.sidebar {
  width: 250px;
  background-color: #f5ede3;
  padding: 24px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.back-home {
  font-weight: 600;
  text-decoration: none;
  color: #a89080;
  margin-bottom: 24px;
  display: inline-block;
  transition: color 0.2s ease;
}

.back-home:hover {
  color: #7f5b4a;
}

.continent-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.continent-list li {
  margin: 16px 0;
}

.continent-list a {
  text-decoration: none;
  color: #4a3d34;
  display: flex;
  align-items: center;
  font-size: 16px;
  transition: transform 0.15s ease;
}

.continent-list a:hover {
  transform: translateX(4px);
}

/* Diamond used for numbering the continents */
/* Diamond wrapper around the numbers; rotate the square to form a diamond */
.diamond {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e1c5b4;
  border-radius: 2px;
  margin-right: 12px;
  transform: rotate(45deg);
}

/* Keep the numeric label upright by counter‑rotating it */
.diamond .number {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transform: rotate(-45deg);
  display: block;
}

/* Map area styling */
.map-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.map-container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  /* Use a cropped version of the map that removes the sidebar baked into
     the provided image. This ensures our own navigation doesn’t overlap. */
  background-image: url('map_cropped.png');
  background-size: contain;
  background-repeat: no-repeat;
  /* Shift the image slightly to the left to hide the navigation printed in
     the source image. This keeps the continents centered on the page. */
  background-position: 30% 50%;
  padding-top: 56.25%; /* Maintain aspect ratio (16:9) */
}

/* Dot base styles: all clickable circles share these properties */
.dot {
  position: absolute;
  width: 16px;
  height: 16px;
  margin-left: -8px; /* Center horizontally */
  margin-top: -8px;  /* Center vertically */
  border-radius: 50%;
  background-color: #2a70f3;
  box-shadow: 0 0 6px rgba(42, 112, 243, 0.8);
  animation: blink 1.5s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

/* Position each dot using percentage coordinates relative to the map container. */
.dot.africa {
  /* Africa is roughly centred on this vertical and horizontal axis */
  top: 47%;
  left: 56%;
}

.dot.asia {
  top: 33%;
  left: 70%;
}

.dot.europe {
  /* Europe sits in the north‑western part of the Eurasian landmass */
  top: 18%;
  left: 53%;
}

.dot.north-america {
  /* North America covers a large span; position the dot near its centre */
  top: 28%;
  left: 29%;
}

.dot.south-america {
  /* South America is centered slightly east of North America */
  top: 60%;
  left: 36%;
}

.dot.oceania {
  top: 73%;
  left: 80%;
}

/* On hover, enlarge the dot slightly to indicate interactivity */
.dot:hover {
  transform: scale(1.3);
}