@font-face {
  font-family: "MyCustomFont";
  src: url("/fonts/myfont.woff2") format("woff2"),
       url("/fonts/myfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


body {
  background-color: black;
  color: white;
  font-family: 'Grandstander', sans-serif;
  margin: 0 20%;
  padding: 20px;
  
  /*background-image: url("/rin_blume.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 50% auto;*/
  
  background-image: url("https://images.unsplash.com/photo-1570284613060-766c33850e00?fm=jpg&q=60&w=3000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8c3RhcnJ5fGVufDB8fDB8fHww");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

h1{
  font-size: 8vh;
  margin: 2vw 5vw;
}

p{
  font-size: 4vh;
  margin: 2vw 5vw;
}

span{
  display: inline;
  font-size: 1vw;
}

.outerDiv{
  border: 2px solid rgb(58, 23, 128);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 0 20px 2px rgba(58, 23, 128, 0.6);
  background-color: rgba(0, 0, 0, .7);
}

img{
  width: 100%;
  height: 30vh;
  object-fit: cover;
  object-position: 60% 70%;
}

.map-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 500px;
  margin: 40px auto;
  border-radius: 12px;
  overflow: hidden;
}

.map-path-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; 
}

.map-path-svg path {
  fill: none;
  stroke: rgba(255, 215, 0, 0.4); 
  stroke-width: 0.5; 
  
  stroke-dasharray: 2; 
  stroke-linecap: round;
}

.star-btn {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%); 
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  text-decoration: none;
  z-index: 2; 
  transition: transform 0.3s ease, filter 0.3s ease;
}

.six-point-star {
  width: 3.5rem;
  height: 3.5rem;
  background-color: gold;
  clip-path: polygon(
    50% 0%, 65% 28%, 95% 25%, 75% 50%, 95% 75%, 
    65% 72%, 50% 100%, 35% 72%, 5% 75%, 25% 50%, 
    5% 25%, 35% 28%
  );
  animation: global-pulse 1.5s infinite ease-in-out;
}

.star-label {
  position: absolute;
  top: 100%; 
  white-space: nowrap; 
  color: gold;
  font-size: 0.9rem;
  font-weight: bold;
  margin-top: 8px;
  
  opacity: 0;
  transform: translateY(-5px);
  
  transition: opacity 0.3s ease, transform 0.3s ease;
  
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.star-btn:hover {
  transform: translate(-50%, -50%) scale(1.3);
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 1)) 
          drop-shadow(0 0 22px rgba(255, 215, 0, 0.7));
}

.star-btn:hover .star-label {
  opacity: 1;
  transform: translateY(0);
}

@keyframes global-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}