body{
    background-color: lightgray;
}

/*Removes unnecessary focusing when button is clicked or hovered on*/

#paragraph{
  height: 110px;
  text-align: center;
}

textarea:focus{
    outline: 1;
}

button:focus, input:focus{
    outline: 0;
}

#mainDisplay{
  width: 100%;
  height: 250px;
  background-color: white;
}

progress[value]{
    float: right;
   -webkit-appearance: none;
   appearance: none;
    width: 43%;
    height: 100px;
}

#userInputContainer{
    background-color: white;
    height: 400px;
    width: 100%;
}

/*Amazing progress bar CSS!*/
progress[value]::-webkit-progress-bar {
  background-color: #eee;
  /* border-radius: 2px; */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
  color: yellow;
}

progress[value]::-webkit-progress-value {
  background-image:
	   -webkit-linear-gradient(-45deg, 
	                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
	                           rgba(0,0, 0, .1) 66%, transparent 66%),
	   -webkit-linear-gradient(top, 
	                           rgba(255, 255, 255, .25), 
	                           rgba(0, 0, 0, .25)),
	   -webkit-linear-gradient(left, rgb(153, 157, 159), rgb(21, 21, 21));

    border-radius: 2px; 
    background-size: 35px 20px, 100% 100%, 100% 100%;
}

h1{
    font-size: 100px;
    text-align: center;
    font-family: sans-serif;
}

#cell {
    /* border: 3px solid; */
    background-color: lightgray;
    padding: 5px;
    width: 25%;
    float: left;
    height: 100px;
}

#speedLabel {
font-size: 30px;
text-align: center;
font-family: sans-serif;
}

#wordCount {
font-size: 30px;
text-align: center;
font-family: sans-serif;   
}

/*User Input textfield*/
#input {
float: left;
font-family: sans-serif;
font-size: 25px;
width: 75%;
height: 360px;
background-color: rgb(255, 255, 255);
text-align: center;
resize: none;
}
/*User Input textfield*/

#playButton{
    float: right;
    width: 20%;
    height: 75px;
    background-color: white;
    font-size: 60px;
    border-radius: 60px;
}

.idealStyleForButton {
    float: right;
    width: 20%;
    height: 75px;
    background-color: white;
    border-radius: 60px;
    font-size: 30px;
}

#slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider styles */
.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;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
  background-color: yellow;
}

/* 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 */
  border-radius: 60px;
  padding: 5px;

  background-color: black; /* 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: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

/* modal content style */
.close {
 color: #aaaaaa;
 float: right;
 font-size: 28px;
 font-weight: bold;
}

.close:hover, .close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

.modal {
              display: none; /* Hidden by default */
              position: fixed; /* Stay in place */
              z-index: 1; /* Sit on top */
              padding-top: 100px; /* Location of the box */
              left: 0;
              top: 0;
              width: 100%; /* Full width */
              height: 100%; /* Full height */
              overflow: auto; /* Enable scroll if needed */
              background-color: rgb(0,0,0); /* Fallback color */
              background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modalContent {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    height: 45%;
}