html, body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: #1c1c1c;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  overflow: auto;
}

.map-container {
  position: relative;
  width: 1920px;
  height: 1223px;
  margin: 0 auto;
}

#mappy {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1223px;
  display: block;
}

#home-button {
  position: absolute;
  top: 130px; /* just under Nordsted's height of 81px + some gap */
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  background-color: rgba(41, 41, 41, 0.9);
  border: 2px solid #fbffbb;
  border-radius: 8px;
  padding: 10px 20px;
  font-family: 'Cinzel Decorative', cursive;
  font-size: 20px;
  text-align: center;
}

#home-button a {
  color: #fbffbb;
  text-decoration: none;
}

#home-button a:hover {
  text-decoration: underline;
}

.overlay {
  position: absolute;
}

.tooltip {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.tooltip img{
  display: block;
  object-fit: fill;
  cursor: pointer;
 }


img#nord {
  width: 1884px; 
  height: 81px;
}


img#sehd {
  width: 341px; 
  height: 379px;
}

img#skag {
  width: 501px; 
  height: 529px;
}

img#myrk {
  width: 190px; 
  height: 270px;
}

img#vael {
  width: 538px; 
  height: 387px;
}

img#oury {
  width: 402px; 
  height: 506px;
}

img#norr {
  width: 363px; 
  height: 328px;
}

img#vorl {
  width: 397px; 
  height: 302px; 
}

img#isla {
  width: 202px; 
  height: 244px;
}

img#comp {
  width: 304px; 
  height: 304px;
}

img#rask {
  width: 320px; 
  height: 40px;
}

img#kold {
  width: 1884px; 
  height: 319px;
}

.overlay:hover .tooltip {
  opacity: 1;
}

.overlay_txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cinzel Decorative', cursive;
  font-weight: 700;
  font-size: 32px;
  color: #33160d;
  text-shadow:
    0 0 5px #fbffbb,
    0 0 10px #fbffbb,
    0 0 15px #fbffbb;
}

.caption-popup {
  display: none;
  position: absolute;
  width: 420px;
  background-color: #292929;
  color: #fbffbb;
  padding: 20px;
  border: 2px solid #fbffbb;
  border-radius: 10px;
  font-family: serif;
  font-weight: 400;
  font-size: 22px;
  z-index: 20;
}

.caption-popup .close-btn {
  position: absolute;
  top: 5px;
  right: 12px;
  font-size: 24px;
  cursor: pointer;
  color: #fbffbb;
}

.caption-popup h3 {
  margin: 0 0 10px 0;
  font-size: 20px;
  font-family: 'Cinzel Decorative', cursive;
  font-weight: 700;
}

#nordo {
  left: 18px;
  top: 33px;
  width: 1884px;
  height: 81px;
  z-index: 9;
}

#sehdo {
  left: 1524px;
  top: 585px;
  width: 341px;
  height: 379px;
  z-index: 9;
}

#skago {
  left: 1132px;
  top: 445px;
  width: 501px;
  height: 529px;
  z-index: 8;
}

#myrko {
  left: 1685px;
  top: 344px;
  width: 190px;
  height: 270px;
  z-index: 9;
}

#vaelo {
  left: 1320px;
  top: 90px;
  width: 538px;
  height: 387px;
  z-index: 8;
}

#ouryo {
  left: 412px;
  top: 474px;
  width: 402px;
  height: 506px;
  z-index: 9;
}

#norro {
  left: 471px;
  top: 161px;
  width: 363px;
  height: 328px;
  z-index: 8;
}

#vorlo {
  left: 144px;
  top: 276px;
  width: 397px;
  height: 302px;
  z-index: 7;
}

#koldo {
  left: 18px;
  top: 904px;
  width: 1884px;
  height: 319px;
  z-index: 5;
}

#rasko {
  left: 1551px;
  top: 1063px;
  width: 320px;
  height: 40px;
  z-index: 9;
}

#compo {
  left: 69px;
  top: 797px;
  width: 304px;
  height: 304px;
  z-index: 9;
}

#islao {
  left: 877px;
  top: 367px;
  width: 202px;
  height: 244px;
  z-index: 9;
}

#nordt {
  width: 1884px;
  height: 81px;
}

#sehdt {
  width: 341px;
  height: 379px;
}

#skagt {
  width: 501px;
  height: 529px;
}

#myrkt {
  width: 190px;
  height: 270px;
}

#vaelt {
  width: 538px;
  height: 387px;
}

#ouryt {
  width: 402px;
  height: 506px;
}

#norrt {
  width: 363px;
  height: 328px;
}

#vorlt {
  width: 397px;
  height: 302px;
}

#koldt {
  width: 1884px;
  height: 319px;
}

#raskt {
  width: 100%;
  height: 100%;
}

#compt {
  width: 100%;
  height: 100%;
}

#islat {
  width: 100%;
  height: 100%;
  position: relative;
}
#cover { 
  position: absolute; 
  left: 35px; 
  top: 899px; 
  width: 1850px; 
  height: 170px; 
  z-index: 6; 
  }
  
#oury-popup {
  left: 828px; 
  top: 475px; 	
}

#vorlya-popup {
  left: 0px; 
  top: 575px; 	
}

#norrund-popup {
  left: 858px; 
  top: 175px; 	
}

#vael-popup {
  left: 858px;
  top: 175px;
}

#myrkan-popup {
  left: 1218px;
  top: 375px;
}
  
  
#nordsted-popup {
  left: 728px; 
  top: 165px;
}

#koldsted-popup {
  left: 728px; 
  top: 875px;  
}
  
#caption-popup { 
  left: 1424px; 
  top: 740px;
 }
 
#compass-popup {
  left: 35px; 
  top: 105px;
}

#island-popup {
  left: 770px; 
  top: 35px;
 }

#myrkx, #norrx {
  left:60%;
}

#vorlx {
  left:55%;
}

#koldx {
  top:75%;
}

  /* 
  © 2025 Daniela A. Wolfe. All rights reserved.
  Styling for Heimshuhl interactive map.
*/