body {
  background-color: black;
  color: white;
  font-family: Garamond , 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;
  text-shadow: 
        0 0 5px purple,
        0 0 10px purple,
        0 0 20px rgb(58, 23, 128),
        0 0 40px rgb(58, 23, 128),
        0 0 60px rgb(58, 23, 128);
}

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

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

.outerBook{
  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%;
}

ul{
  list-style-type: none;
}

.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);
  }
}

/*body {
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQenxrmi1D17INlJJm_MzzF-MQU_3G-RYAuX-16R13ayQ&s=10');
  font-family: 'Syne', sans-serif;
  margin: 15%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

h1{
  text-align: center;
}

.outerBook{
  background-color: white;
  border: 5px solid rgba(159, 115, 255);
  background-color: rgba(159, 115, 255);
  padding: 0 1%;
  border-radius: 5px;
  width: 100%;
}

#rin_blume{
  width: 100%;
  height: 30vh;
  object-fit: cover;
  object-position: 60% 75%;
  margin: 2% 0;
  border-radius: 5px;
}

.innerBook{
  margin: 1%;
  padding: 2%;
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ21zyTIM9_Ryj_yvr1dvnShbkUq0f0qaL6GtxgfT6u8Q&s=10');
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 5px;
}
*/