body{
  
  background-image: url('../../Images/blueGradient.jpg');

    font-family:'Calibri', 'Lucida Grande', sans-serif;
    h1{
      padding-top:5%;
    }
  .center{
    align-items: center;
    margin-left:25%;
    float:center;
  }
  canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 800px;
    padding-bottom:10%;
  }
      .valueBox{
        float: center;
        margin:auto;
        width: 90%;
        height:30%;
        border: 15px solid #70aec8;
        padding-bottom:2%;
        align-items: center;
        background-color: white;
      }

      h2{
        text-align: center;
        color: #000000;
        padding-top:2%;
        padding-bottom: 2%;
      }
      h3{margin-left: 2%;
      color: #000000;}
      .button {
        background-color: #3da4ab;
        border: none;
        color: white;
        padding: 15px 32px;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        margin-left: 25%;
        margin-right: 25%;
      }
      p{
        text-align: center;
        align-items: center;
      }
      .slidecontainer {
        width: 80%; /* Width of the outside container */
        float:center;
        margin:auto;
      }
      
      /* The slider itself */
      .slider {
        -webkit-appearance: none;  /* Override default CSS styles */
        appearance: none;
        width: 100%; /* Full-width */
        height: 25px; /* Specified height */
        background: #d3d3d3; /* Grey background */
        outline: none; /* Remove outline */
        opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
        -webkit-transition: .2s; /* 0.2 seconds transition on hover */
        transition: opacity .2s;

      }
      @media screen and (max-width: 1000px) {

          .slider{
            height: 3rem;
            width:98%;

          }
          .slidercontainer{
            width:100%;
          }
          h3{
            font-size: 30px;
          }
          p{
            font-size: 25px;
          }

      }
      
      /* Mouse-over effects */
      .slider:hover {
        opacity: 1; /* Fully shown on mouse-over */
      }
      
      /* 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: #3da4ab; /* Green background */
        cursor: pointer; /* Cursor on hover */
      }
      
      .slider::-moz-range-thumb {
        width: 25px; /* Set a specific slider handle width */
        height: 25px; /* Slider handle height */
        background: #3da4ab; /* Green background */
        cursor: pointer; /* Cursor on hover */
      }




header{
    text-align: center;
  h1{
        color: rgb(0, 0, 0);
        padding-bottom:5%;
    }
  }


      }