style.css

body {
    
      background-color: #f7f7f7;
      
  }
  
  header {
      font-family: "Roboto","Helvetica","Arial",sans-serif;
      border-bottom: solid 1px rgba(0,0,0,0.4);
      background-color: #183D4E;
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      position: relative;
      line-height: 1.45em;
      font-weight: 300;
      letter-spacing: -.02em;
      color: rgba(255, 255, 255, 0.7);
  
  }
  
  .heading {
      margin-left: auto;
      margin-right: auto;
      font-size: 30px;
      text-align: center;
      margin-top: 30px;
      -webkit-font-smoothing: antialiased;
  }
  
  h1 {
      font-weight: 300;
  }
  
  .heading b{
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
  }
  
  #main {
      display: flex;
      margin-left: auto;
      margin-right: auto;
      width: 1100px;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      margin-bottom: 100px;
  }
  
  .dartimg {
      height: 200px;
      width: 220px;
      margin:auto;
      display: block;
  }
  
  #main h4 {
      font-weight: 400;
      font-size: 20px;
      text-transform: uppercase;
  }
  
  #main span {
      font-weight: 300;
      font-size: 20px;
      margin-bottom: 10px;
      margin-right: 5px;
  }
  
  #colormap {
      vertical-align: top;
      margin-left: 20px;
  }
  
  #main p {
      color: #777;
      font-size: 16px;
      font-weight: 300;
      font-family: "Helvetica", "Arial", sans-serif;
  }
  
  .noisecontainer {
      margin-top: 20px;
  }
  .kselect > span {
      display: inline-block;
     
  }
  
  .error > p {
      display: inline-block;
      margin-right:10px;
     
  }
  #legend {
      margin-left: 40px;
  }
  #legend p {
      display:inline-block;
      font-size: 12px;
      line-height: 12px;
      width: 150px;
      
  }
  #controls {
      width: 20%;
  }
  #output {
      width:40%;
      
  }
  
  .dartimgcontainer > div {
      display: inline-block;
  }
  
  .dartdescr {
      font-size: 14px !important;
      color: black !important;
      text-align: center !important;
  }
  
  #output h4 {
      margin-bottom: 0px;
  }
  
  #plot{
      position: relative;
      width: 500px;
  }
  
  #plotcontainer {
      height: 430px;
  }
  
  .var {
      margin-bottom: 0;
      display: inline;
  }
  
  #dartcontainer {
   width: 350px;
  
  }
  
  #dartcontainer {
      font-size: 14px;
  }
  
  #dartcontainer br {
      display: block;
      margin: 10px 0;}
  
  .axis path,
  .axis line {
    fill: none;
    stroke: rgb(165, 165, 165);
    shape-rendering: crispEdges;
    fill-opacity: 0.8;
  }
  
  .tick {
      fill: rgb(165, 165, 165); 
      fill-opacity: 0.8;
  }
  .dot {
  }
  
  .train {
      stroke: white;
      stroke-width: 1;
      stroke-opacity: 0.8;
      fill-opacity: 0.9;
  }
  
  .test{
      stroke: black;
      stroke-width: 1;
      stroke-opacity: 0.8;
      fill-opacity: 0.9; 
  }
  
  #test {
      margin-top: 20px;
  }
  #test p {
      display: inline-block;
  }
  
  
  /* Slider */
  
  #main-part .mdl-slider.is-upgraded {
    color: #183D4E;
  }
  
  #main-part .mdl-slider__background-lower {
    background-color: #183D4E;
  }
  
  #main-part .mdl-slider.is-upgraded::-webkit-slider-thumb {
    background-color: #183D4E;
  }
  
  #main-part .mdl-slider.is-upgraded::-moz-range-thumb {
    background-color: #183D4E;
  }
  
  #main-part .mdl-slider.is-upgraded::-ms-thumb {
    background-color: #183D4E;
  }
  
  #main-part .mdl-slider.is-upgraded.is-lowest-value::-webkit-slider-thumb {
    border-color: #183D4E;
  }
  
  #main-part .mdl-slider.is-upgraded.is-lowest-value::-moz-range-thumb {
    border-color: #183D4E;
  }
  /* Keep grey focus circle for non-start values */
  #main-part .mdl-slider.is-upgraded:focus:not(:active)::-webkit-slider-thumb {
    box-shadow: 0 0 0 10px rgba(0,0,0, 0.12);
  }
  
  
  #story {
  
      width: 500px;
      margin-left: auto;
      margin-right: auto;
  }
  
  #story p {
      font-weight: 400;
      font-size: 17px;
      line-height: 1.6;
      color: rgba(0, 0, 0, 0.7);
      text-align:justify;
  }
  
  #datageneration{
      position: relative;
      width: 400px;
      height: 400px;
      margin-left: auto;
      margin-right: auto;
  
  }
  
  #generation_legend {
      position:relative;
  }
  
  .means {
      stroke: black;
      stroke-width: 2;
  }
  
  footer {
      border-top: solid 1px #eee;
      background-color: #ecebeb;
      color: grey;
      font-weight: 300;
      padding: 40px 20px;
      height: 30px;
      margin-top: 50px;
      
      text-align: right;
  }
  
  #datagenerationcontainer {
      margin: 60px 0px;
      
  }