#grad1 {
  height: 800px;  
  background-color: green; /* For browsers that do not support gradients */
  background-image: linear-gradient(white, yellow, green); /* Standard syntax (must be last) */
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}

@media only screen and (max-width: 750px) {
  #grad1 {
    height: 950px; 
  }
}

/* want scroll bar on the question */
#grad1Q {
  overflow-x: auto;
}

#owl {
  position:absolute;
  top: 20px;
  left: 20px;
  display: inline;
  font-size: 24px;
  font-weight: bold;
}

#history {
  position:absolute;
  top: 20px;
  right:20px;
  display: inline;
  font-size: 24px;
  font-weight: bold;
}

#diffLabel {
  text-align: left;
  float: left;
  margin-left: 10px;
  font-size: 20px;
  font-weight: bold;
}

#diffSelect {
  text-align: left;
  float: left;
  margin-left: 10px;
  width: 100px;
  height: 25px;    
}

#speedLabel {
  text-align: left;
  float: left;
  margin-left: 10px;
  font-size: 20px;
  font-weight: bold;
}

#speed {
  text-align: left;
  float: left;
  margin-left: 10px;
  width: 100px;
  height: 25px;    
}

#filterLabel {
  text-align: left;
  float: left;
  margin-left: 10px;
  font-size: 20px;
  font-weight: bold;
  display: none;    /*hide by default and let individual apps display */
}

#filterSelect {
  text-align: left;
  margin-left: 10px;
  float: left;
  font-size:12px;
  display: none;    /*hide by default and let individual apps display */
  width: 100px;
  height: 25px;    
}



#startStop {
  text-align: center;
  width: 125px;
  height: 45px;  
}

/* I just want normal button focus highlighting */
#startStop:focus {
    outline: 1px solid currentColor; 
    outline-offset: 0px; /* Adds a tiny bit of breathing room around the button */
}

#q1 {
  /* margin-left: 250px;
  margin-right: 250px; */
  text-align: center;
  font-size: 75px;      
  /* font-weight: bold;*/
}

#q1note {
  font-size: 65px;
  /*font-weight: bold;*/
  text-align: center;
}


@media only screen and (max-width: 750px) {
  #q1 {
    font-size: 65px;    
    margin-left: 5px;
    margin-right: 5px;
  }

  #q1note {
    font-size: 50px;
    /*font-weight: bold;*/
    text-align: center;
  }

}




#q2 {
  font-size: 60px;
  /*font-weight: bold;*/
  text-align: center;
}

#q2a {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
}

#grad2 {
  text-align: center;
  /* margin-left: 150px; */
  font-size: 21px;
  overflow-x: auto;
}

#grad3 {
  height: 6500px; 
  background-color: yellow; /* For browsers that do not support gradients */
  background-image: linear-gradient(white, yellow, green); /* Standard syntax (must be last) */
  text-align: left;

}

#audio {
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: 15px;
  width: 125px;
  height: 30px;    
  margin-bottom: 1px;
}

#nonsense {
  text-align: center;
  display: inline;
  float: right;
  margin-right: 15px;
  width: 125px;
  height: 30px;  
}


#help1 {
  text-align: center;
  width: 125px;
  height: 30px;  
}

#helpText {
  text-align: left;
  margin-left: 15px;
  font-size: 30px;
  overflow-x: auto;
}

.MathJax_Display {
  text-align: left;
}