@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;500;700&display=swap');
* {
  box-sizing: border-box;
  font-size: 16px;
  font-family: "IBM Plex Sans", sans-serif;
  /*sans-serif is the "fallback font"
/*   fhref="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" */
}

[hidden] {
  display: none !important;
}

/* default to border-box */
html {
  box-sizing: border-box;
  font-size: 16px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* adjust typography defaults */
body {
  margin: 0 auto;
  font-family: "IBM Plex Sans";
  line-height: 1.5;
  background-color: #2B1212;
  color: white;
  font-weight: 300;
  max-width: 900px;
  /* width: 950px; */
}

/* .container {
  background-color: #eeeeee;
  position: relative;
  border: 1px solid black;
} */
header {
  background-image: url("header.jpeg");
  /* height: 400px;  */
  background-repeat: no-repeat;
  /* background-size: cover; */
  /* set the height to the desired value */
}

header-test {
width: 100%;
  /* background-size: cover; */
  height: 100px; /* set the height to the desired value */
}
.image {
  margin-left: 10px;
  position: relative;
}
/*  creating flex boxes for the description section. 1 parent box and 2 children boxes. The parent box is the overall box containing all of the content above the canvas.*/
.flex-container {
  display: flex;
  /*   border: 2px solid black; */
  max-width: 1000px;
  /* border: 1px solid black; */
  margin: 20px;
  padding:20px;
  
}
/*  this child box is for the left side of the canvas containing the image and the caption*/
#flex-container .side1 {
  flex: 1 1 0;
  flex-wrap: wrap;
  /* margin: 40px; */
}
/*  this child box is for the right side of the canvas with the intro paragraphs and legend*/

#flex-container .side2 {
  flex: 1 1 0;
  flex-wrap: wrap;
  flex-grow: 0;
  /* margin: 40px; */
}
.title {
  font-family: "IBM Plex Sans", sans-serif;
  /* font-style: 900; */
  font-weight: 300;
  font-size: 36px;
  line-height: 105%;
  position: relative;
  color: white;
  margin: 20px;
  /* margin-left:200px */
}

.heading {
  font-size: 24px;
  margin: 20px;
}

.sub-heading {
  font-family:"IBM Plex Sans", sans-serif;
  font-style: 500;
  /* font-weight: bold; */
  font-size: 24px;
  line-height: 105%;
  margin: 20px;
  position: relative;
  color: white;
}

.main-text {
  margin: 20px;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 300;
}
.legend-text {
  font-size: 10px;
  margin: 20px;
}


.quote-box{
  font-size: 12px;
  /* margin: 10px; */
  padding:20px;
  background-color:white;
  color: #2B1212;
  border: 2px solid #2B1212;
  width:600px;
}
#chart{
  width:500px;
  /* width: 50%; */
  /* height: 100vh; */
} 

.tooltip {
 display: inline;
  /* position: fixed; */ 
  position: absolute;
  padding: 10px;
  /* background-color: black; */
  /* border: 1px solid #000; */
  border-radius: 5px;
  pointer-events: none;
}

.mySlider {
  fill: black;
}
/* .chart{
  width: 500px
} */

g.tick > text {
  transform: translateX(-5px);
  text-anchor: end;
}

.bubbles {
  stroke-width: 2px;

}

.bubbles:hover {
  stroke: white;
}

.bars {
  stroke-width: 2px;

}

.bars:hover {
  stroke: white;
}
/* #bar-chart{
  margin: 40px;
} */

#text-box-container {
  margin: 20px;
  /* border: 1px solid #ccc; */
  /* padding: 10px; */
}

#text-box {
  font-size: 16px;
}

@media (max-width: 768px) {
  #text-box {
    font-size: 14px;
  }
}