body {
  background-color: #EFECEA;
}

circle:hover {
  fill: #ffffff;
}

svg {
  overflow: visible !important;
}

text {
  font-family: 'ITC Franklin Gothic Std';
  font-size: 12px ;
  color: #635F5D;
  opacity: 1;
  text-align: left;
}

h1 {
  font-family: 'ITC Franklin Gothic Std';
  font-size: 16px;
  color: #635F5D;
  line-height: 20px;
  opacity: 1;
  text-align: center;
  font-weight: normal;
}

hr {
    border: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #C0C0BB, rgba(0, 0, 0, 0));
}

#tooltip {
  position: absolute;
  display: none;
  background: rgb(255, 255, 255);
  box-shadow: -3px 3px 15px #939393;
  border: #C0C0BB;
  border-width:2px;
  padding: 6px;
  font-size: 12px;
  color: #635F5D;
  font-style: italic;
  max-width: 400px;
  z-index: 100;
  text-transform:capitalize;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.legend-background {
  fill: #E5E2E0;
  stroke:#C0C0BB
}

.artist_info {
  padding: 8px;
  text-align: left;
  box-shadow: rgba(255, 255, 255, 0.09) 0px 2px 1px, rgba(255, 255, 255, 0.09) 0px 4px 2px, rgba(255, 255, 255, 0.09) 0px 8px 4px, rgba(255, 255, 255, 0.09) 0px 16px 8px, rgba(255, 255, 255, 0.09) 0px 32px 16px;  margin: 10px;
  font-size: 12px;
  text-transform: capitalize;
  color: #EFECEA;
  background-color: white;
  border-style: solid;
  border-width: 3px;
}

text.subtitle {
  font-size: 12px;
  font-family: 'ITC Franklin Gothic Std';
  fill: #635F5D !important;
  opacity: 1;
}

.title {
  font-size: 20px;
  font-family: 'ITC Franklin Gothic Std';
  fill: #635F5D !important;
  text-align: left;
  font-weight: light;
}

.extra-info {
  inline-size: initial;
  line-height: 20px;
  overflow-wrap: break-word;
  font-size: 12px;
  font-family: 'Georgia';
  color: #8E8883;
  font-style: italic;
}

.extra-info-right {
  text-align: left;
  inline-size: initial;
  line-height: 20px;
  overflow-wrap: break-word;
  font-size: 12px;
  font-family: 'Georgia';
  color: #8E8883;
  font-style: italic;
}

.container {
  width: 80vw;
  height: 250vh;
  margin: 2rem;
  padding: 2rem 2rem;
  text-align: left;
}

#right {
  height: 80vh;
  width:16%;
  left: 80vw;
  font-size: 20px;
  position: fixed;
  opacity: 1;
  text-align: center;
  overflow-y: scroll;
  background-color:#F5F3F2;
  border: 1px solid #C0C0BB ;
  padding: 15px;
}

.left {
  border-width: 10px;
  width:60%;
  height:50vh;
  left: 19vw;
  display: flex;
  position: absolute; 
}

.step {
  margin-bottom: 200px;
  font-family: Arial;
  font-size: 20px;
  line-height: 23px;
  position: relative;
  left: -15vw;
}

#sections .title {
  font-family: Arial;
  font-size: 20px;
  font-weight: light;
  margin-bottom: 2px;
  color: #635F5D;
  inline-size: 300px;
  overflow-wrap: break-word;
}

#graphic {
  height: 80vh;
}

#sections {
  position: relative;
}

#vis {
  position: fixed;
}

.histogram path,
.histogram line {
  stroke: white;
  fill: white;
  shape-rendering:optimizeSpeed;
}


text.axis.title {
  fill: #635F5D;
  font-size: 18px;
  font-weight: 500;
}

axis title {
  stroke: #635F5D;
  color: #635F5D;
  font-family: Arial;
}

.title {
  color: #635F5D;

}

.axis.label {
  font-family: 'ITC Franklin Gothic Std';
  text-transform: capitalize;
  font-size: 12px ;
  line-height: 10px;
  fill: #635F5D;
  opacity: 1;
  color: #635F5D;
}

.highlight {
  fill: #ffecec;
  font-weight: bold;
}

.link {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1px;
}

.label {
  pointer-events: none;
  font-family: sans-serif;
  fill: white;
  font-weight: 100;
}

rect{ 
  box-sizing: border-box;
}

rect:hover {
  fill: white;
  stroke: white;
}

text.labels {
  fill: #635F5D;
}