body{
    margin: 0;
    background-color: black;
  }
  h1{
      text-align: center;
  }
  .img{
      height: 20%;
      width: 50%;
      margin: auto;
      display: block;
  }
  .container{
    /* width: 100%; */
    min-height: 40vh;
    padding: 20px;
    margin: 40px;
    border: 2px solid black;
    background-color: rgb(175, 234, 239);
    border-radius: 20px;
  }
  .para{
      text-align: center;
  }
  .card{
    border: 2px solid black;
    border-radius: 20px;
    margin: 70px;
    background: linear-gradient(rgb(216, 222, 225), rgb(74, 71, 71));
    padding: 20px;
  }
  .speech{
    padding: 20px 0;
    color: black;
    text-shadow: 0 0 2px gray;
    font: bold 26px 'Open Sans', sans-serif;
    margin: auto;
    width: 100%;
    max-width: 580px;
    text-align: center;
  }
  #form{
      font-size: 17px;
      font-weight: bold;
  }
  .input{
    margin: auto;
    width: 100%;
    max-width: 580px;
  }
  .input input{
    box-sizing: border-box;
    width: 80%;
    padding: 5px;
    margin-left: 20px;
    border:solid;
    font: 20px 'Open Sans', sans-serif;
  }
  .input input[type="range"]{
    color: #444;
    font: bold 19px sans-serif;
  }
  .input input[type="range"]:before{
    content: "Faster";
    text-shadow: 0 0 5px white;
  }
  
  .input input[type="range"]:after{
    content: "Slower";
    text-shadow: 0 0 5px white;
  }