/* Body  */
body {
  background: white;
  font-family: 'Cinzel', serif;
  margin: 20px;
  color: #2f2f2f;
  text-align: center; 
  cursor: url("images/cursor.cur"), auto; /* Image Source: <a href="https://www.flaticon.com/free-icons/wand" title="wand icons">Wand icons created by Freepik - Flaticon</a> */ 
}

h1 {
  margin-bottom: 20px;
}

#container {
  display: flex;
  align-items: flex-start; 
  gap: 20px;
  max-width: 1200px; 
  margin: 0 auto;   
}

/* CHART AREA */
#chart {
  width: 910px;  
  height: 600px;
  position: relative;
  background: url("images/frame.jpg") no-repeat center; /* Image source: https://stock.adobe.com/search/images?filters%5Bcontent_type%3Aphoto%5D=1&filters%5Bcontent_type%3Aillustration%5D=1&filters%5Bcontent_type%3Azip_vector%5D=1&filters%5Bcontent_type%3Aimage%5D=1&k=frame&order=relevance&price%5B%24%5D=1&limit=100&search_page=1&search_type=usertyped&acp=&aco=frame&get_facets=0&asset_id=284921759 */
  background-size: contain;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px; 
}

/* dont fiddle cause we need to keep frame around chart */
#chart svg {
  width: 750px; 
  height: 670px;
  margin-top: 60px;
  margin-left: 20px;

}

/* no overflow - its cancelled*/
#chart svg foreignObject {
  height: 700px;
  width: 900px;
}

/* lovely side panel */
#side-panel {
  width: 300px;
  min-height: 500px;
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  padding: 15px;
  box-sizing: border-box;
  text-align: left; 
}

#side-panel h2 {
  margin-top: 0;
}

.house-image {
  max-width: 100px;
  display: block;
  margin-bottom: 10px;
}


/* MAKING LEGEND */

#legend {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
  background: white; 
  border: 2px solid #ccc;
  margin-bottom: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin: 0 10px;
}

.legend-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 5px;
}