html, body {
  margin: 0;
  padding: 0;
  height: 100vh; /* full viewport height */
  overflow: hidden;

}

svg, header, body, main {
  margin: 0;
  padding: 0;
}

  body {
  margin: 0;
  position: relative;
  }

header {
  position: fixed;
  width: 100vw;
  text-align: center;
  overflow: visible;
  z-index: 1; 
}


main {
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  z-index: 100;

}

img {
  user-select: none;
  -webkit-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-select: none;
  pointer-events: auto;
}


#description {
  display: none;
  width: 100%;
  margin-top: auto;
  margin-bottom: 0px;
  bottom: 0px;
  height: 600px;
  background-color: rgb(0, 0, 0);
  position: fixed;
  z-index: 200; 

}


  #svg {
  width: 100vw;

 
}

.line {
  fill: none;
  stroke: red;
  stroke-width: 1.5;
}




#tree {
  display: none;
}


.more-button {
  position: absolute;
  top: 5px;
  right: 8px;
  background: transparent;
  border: none;
  padding: 0;
  width: 20px;
  height: 20px;
}



#mainArea {
  position: relative; /* so popups inside can be absolutely positioned */
  z-index: 1; /* lower than header */
  width:100%;
}


#popupContainer {
  position: relative;
  width: 100vw;
  height: 500px;
  margin: 275px 10px 0px 10px;

  /*border: 2px solid red;*/

}