#root {
  display: grid;
  padding: 20px;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 
  minmax(20px, 30px) 
  minmax(20px, 40px) 
  minmax(10px, 20px) 
  minmax(200px, 500px) 
  30px;
  font-size: calc(10px + 2vmin);
  background-color: #C3D2D7;
  grid-template-areas: 
    "header header header"
    "text button button"
    "text annotation annotation"
    "text graphic graphic"
    "footer footer footer"
  ;
}

@media (max-width:800px){
  #root{
    grid-template-columns: 1fr;
    grid-template-rows: minmax(10px, 30px) minmax(200px, 550px) minmax(20px, 40px) minmax(20px, 40px) minmax(200px, 500px) 30px;
    grid-template-areas: 
      "header header"
      "text text"
      "button button"
      "annotation annotation"
      "graphic graphic"
      "footer footer";
  }
}

.img-div{
  padding: 15px;
  justify-items: start;
  align-items: center;
}
.img{
  max-width:100%;
}
.header{
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 200px 1fr;
  grid-area: header;
}
.buttons{
  display: grid;
  grid-gap:4px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-area: button;
  vertical-align: top;
  color: #495050;
  text-align: center;
  transition-duration: 0.4s;
  justify-content: center;
  opacity: 1;
}

.button1{
  font-size: 13px;
  font-family: 'Roboto Slab', serif;
  font-weight: 300;
  font-style: normal;
  border-color: #C3D2D7;
  border-width: 0;
}
.button2{
  font-size: 13px;
  font-family: 'Roboto Slab', serif;
  font-weight: 300;
  font-style: normal;
  border-color: #C3D2D7;
  border-width: 0;
}
.button3{
  font-size: 13px;
  font-family: 'Roboto Slab', serif;
  font-weight: 300;
  font-style: normal;
  border-color: #C3D2D7;
  border-width: 0;
}
[class^="button"]:focus{
  background-color:#F9FAFA;
  border: 0px;
  font-size: 16px;
  -webkit-background-composite:initial;
  }
.annotation p{
  display: grid;
  grid-gap:4px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-area: annotation;
  font-size: 13px;
  font-family: 'Roboto Slab', serif;
  font-weight: 300;
  font-style: normal;
  position: relative;
  display: inline-block;
  padding-left: 20px;
  align-items: bottom;
  min-width: 0;
  }
.annotation p.auctions-rect{
  position:absolute;
  z-index: 10;
}
.annotation p.debtors-rect{
  position:absolute;
  z-index: 11;
}
    
.annotation p.auctions-rect::before{
  content:"";
  height: 10px;
  width: 10px;
  outline-color: black;
  outline-width: 1px;
  outline-style:solid;
  position:absolute;
  display: block;
  left: 0px;
  bottom: 4px;
  
}

.annotation p.debtors-rect1::before{
  content:"";
  height: 10px;
  width: 10px;
  outline-color: #BA1506;
  outline-width: 1px;
  outline-style:solid;
  background: #BA1506;
  position:absolute;
  display: block;
  left: 0px;
  bottom: 4px;
}
.annotation p.debtors-rect2::before{
  content:"";
  height: 10px;
  width: 10px;
  outline-color: #D98458;
  outline-width: 1px;
  outline-style:solid;
  background: #D98458;
  position:absolute;
  display: block;
  left: 0px;
  bottom: 4px;
}
.annotation p.debtors-rect3::before{
  content:"";
  height: 10px;
  width: 10px;
  outline-color: #338C83;
  outline-width: 1px;
  outline-style:solid;
  background: #338C83;
  position:absolute;
  display: block;
  left: 0px;
  bottom: 4px;
}
/* .annotation-rect{
  height: .5em;
  width: .5em;
  outline-color: black;
  outline-width: 1px;
  outline-style:solid;
} */

.text{
  padding: 10px;
  justify-content: start ;
  grid-area:text;
  font-family: 'Roboto Slab', serif;
  font-weight: 200;
  font-style: normal;
  font-size: 18px;
  position: relative;
  display: block;
  min-height: 100% !important;
}
.first-view{
  position: absolute;
  /* left:0; */
  z-index:4;

}
.button-1-text{
  position: absolute;
  /* z-index: 3; */
  left: 0;

}
.button-2-text{
  position: absolute;
  /* z-index: 2; */
  left: 0;

}
.button-3-text{
  position: absolute;
  /* z-index: 1; */
  left: 0;

}
.main-graphic{
  grid-area: graphic;
  display: inline-block;
  position: relative;
  /* overflow: hidden; */
}
.svg-content{
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
.footer{
  grid-area:footer;
  font-family: 'Roboto Slab', serif;
  font-weight: 200;
  font-style: normal;
  font-size: 14px;
  align-self: center;
  justify-self: self-end;
  padding-right: 15px;
  color: azure;
}
li{
  background: #DAE4EA;
  margin:0 0 5px 0;
  list-style-type: square;
  list-style-type: style color;
}