body {
    font-family: Open Sans;
    text-align: center;
}

.first-viz-dot:hover, .second-viz-dot:hover {
    fill: #B21DAC;
    stroke:#B21DAC;
    stroke-width:3px;
}

div {
    text-align: center;
    display: inline-block;
}

/* Style the lines by removing the fill and applying a stroke */
.line {
    fill: none;
    stroke: blue;
    stroke-width: 3;
}

.legend {
    font: 16px sans-serif;
    font-weight: bold;         
    text-anchor: start;
  }

.tooltip {
    position: absolute;
    z-index: 10;
    visibility: hidden;
    background-color: black;
    text-align: center;
    padding: 4px;
    border-radius: 4px;
    /*font-weight: bold;*/
    color: white;
    font-size: 20px;
}

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: fixed;
    margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
    left: 0;
    right: 0;
    margin-top: 0px;
    z-index: -1;
  }

div.sticky2 {
    position: -webkit-sticky; /* Safari */
    position: fixed;
    margin: 1% auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
  }

article{
    width: 30%;
    margin: auto;
}

div.wordbox{
    margin-top: 800px;
    pointer-events: none;
    z-index: -2;
    display: block;
}

p.wordboxText{
    font-size: 20px;
    color: white;
    text-align: center;
    /* display:inline; */
    z-index: 5;
    border-radius: 6px;
    border: 1px solid #0e005e; 
    background-color: #0e005e
}

/* The navigation bar */
.navbar {
    /* margin-left: -10px; */
    overflow: hidden;
    background-color: #0e005e;
    position: fixed;
    top: 0;
    left: 0; /* Position the navbar at the top of the page */
    width: 100%; 
    z-index: 999;
    border-style: solid;
    border-width: 0px;
    border-bottom-width: 2px;
    border-bottom-color: #0e005e;
    border-right-width: 2px;
    border-right-color: #0e005e;
    visibility: hidden;
  }
  
  /* Links inside the navbar */
  .navbar a {
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 5px 16px;
    text-decoration: none;
    font-size: 30px;
    font-weight: bold;
  }
  
  /* Change background on mouse-over */
  .navbar a:hover {
    background: white;
    color: #0e005e;
  }

  .axis { font-size: 16px; }

  .slidecontainer {
    width: 25%; /* Width of the outside container */
  }
  
  /* The slider itself */
  .slider {
    margin-top: 1%;
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 25%; /* Full-width */
    height: 20px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 1; /* Set transparency (for mouse-over effects on hover) */
  }
  
  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #0e005e; /* Green background */
    cursor: pointer; /* Cursor on hover */
    border-radius: 50%;
  }
  
  .slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #0e005e; /* Green background */
    cursor: pointer; /* Cursor on hover */
  }

  /* Mobile CSS */
  @media only screen and (max-width: 768px) {
    .axis { font-size: 12px; }
    h1 {font-size: 1.5em;}
    h2 {font-size: 1.25em;}
    article{
      width: 90%;
      margin: auto;
    }
    p.wordboxText{
      font-size: 15px;
      color: white;
      text-align: center;
      /* display:inline; */
      z-index: 5;
      border-radius: 6px;
      border: 1px solid #0e005e; 
      background-color: #0e005e
    }
  }

  a {
    text-decoration: none;
    color: #0e005e;
  }