body, html {
  height: 100%;
  box-sizing: border-box;
  overflow:hidden; /* stops scroll from the entire page */
  background-color: #ad6364;
}
#wrapper {
  display: grid;
  height:100%;
  grid-template-columns: 25% repeat(10,7%) 5%;
  grid-template-rows: 5% repeat(4,15%) 30% 5%;
  grid-template-areas:
    "nav nav nav nav nav nav nav nav nav nav nav nav"
    "side1 side1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 side2"
    "side1 side1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 side2"
    "side1 side1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 side2"
    "side1 side1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 side2"
    "int   int  int  int  int  int  int  int  int  int  int  int"
    "ftr   ftr  ftr  ftr  ftr  ftr  ftr  ftr  ftr  ftr  ftr  ftr";
  grid-gap:1px;
}

#scroll-content {
  display:block;
  grid-column: 1/3;
  grid-row: 2 / 6;
  /*background-color:#ad6364;*/
  /*opacity: 0.75;*/
  overflow: auto;
  background-color:#2B3033;
}
.step{
  margin-bottom: 1000px;
  overflow: auto;
  max-height: 100vh;
  position: relative;
  fill:#bdbdc1;
}

#viz-container{
  background-color:#2B3033;
  grid-area: viz1;
}
#nav-bar{
  grid-area:nav;
  background-color:#767678;
}
#side-bar1{
  grid-area:side1;
  background-color:#767678;
}
#side-bar2{
  grid-area:side2;
  background-color:#767678;
}
#footer{
  grid-area:ftr;
  background-color:#767678;
}
#interaction{
  grid-area:int;
  background-color:#767678;
}
.general-text{
  text-align: center;
  vertical-align: middle;
  color:#bdbdc1;
  font-size:12px;
}