.timer-text {
  font-family: "Fira Sans", sans-serif;
  margin: auto;
  align-items: center;
  margin-right: 15%;
  font-size: 20px;
}

#timer-image{
  width: 15%;
  margin-left: 115%;
}

.timer-container {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top:20px;
  margin-bottom:-20px;
 }
  
  .current-word{
    text-align: center;
    font-size: 50px;
  }

  .controls{
    text-align: center;
  }

  .recent-words {
    text-align: left;
  }

  table {
    margin-left: -100%;
    width: 300%;
    align-items: center;
  }

  th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }

  th {
    background-color: #f0ecec;
  }

#passButton{
    background-color:#081c44;
    color: white;
    border: 2px solid black;
    border-radius: 5px;
    width: 80px;
    height: 40px;
    font-weight: bold;
}

#playButton,
#pauseButton{
    background-color:#70747c;
    color: white;
    border: 2px solid #70747c;
    border-radius: 5px;
    width: 150px;
    height: 40px;
    margin-left: 5%;
}

.pausetext{
    color: black;
    margin-left: 17%;
}

  .information{
    text-align: center;
    color: rgb(55, 52, 52);
    padding: 10px;
    font-family: Georgia, 'Times New Roman', Times, serif;
  }

.main{
  background-color: #CAE3EC;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 680px;
  max-width: 800px;
  margin:auto;
  box-sizing: border-box;
  z-index: 0;
  justify-content: center;
}


.complete{
    color:green;
}

.passed{
    color:red;
}

.letters{
  display: grid;
  align-items: center;
  
}

#activeWord{
  display: grid;
  align-items: center;
}
.letter{
  background: transparent;
  border: none;

}


.stats-bar {
  margin-top:10%;
  margin-bottom:5%;
  width: 50%; 
  margin-left: 25%;
  height: 2px;
  background-color: black;
}


  #words-remaining{
    font-family:Georgia, 'Times New Roman', Times, serif;
    font-size: 20px;
    text-align: right;
    margin-top: -120%;
    margin-left: 275%;
}

#words-completed{
  font-family:Georgia, 'Times New Roman', Times, serif;
  font-size: 20px;
  text-align: right;
  margin-top: -175%;
  margin-left: 275%;
}

.timer-text {
  font-family: "Fira Sans", sans-serif;
  margin: auto;
  align-items: center;
}


.timer-container {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top:20px;
  margin-bottom:0px;
  padding: 20px;
 }

.missed-window{
  background: rgb(172, 172, 172);
  position: fixed;
  width: 300px;
  height: 200px; 
  display: none;
  
}

.footer {
  background-color: #444444;
  color: #fff;
  padding: 5px 0px;
  position:fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: black;
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}


.button:hover {
  background-color: #616161;
}

.missed-button {
  background-color: #95d5e9;
  border: none;
  padding: 5px 30px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
  margin-bottom: 10px;
}


.missed-button:hover {
  background-color: #4ac1e6;
}

#popup-window {
  display: none;
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  max-width: 400px;
  width: 100%;
  z-index: 10000
}

#popup-window h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

#popup-window p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
}

#close-button {
  background-color: #ccc;
  color: #000;
  border: none;
  padding: 5px 20px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 15px;
  border-radius: 3px;
}

#close-button:hover {
  background-color: #6b6b6b;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); 
  z-index: 9999; 
  display: none; 
}

.close-button2 {
  position: absolute;
  top: 5px;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #000; 
}


.retry-button{
  background-color: #011e41;
  border: none;
  color: white;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
  width: 120px;
  margin-top:20px;
}

.retry-button:hover {
  background-color: #00387c;
  color: rgb(219, 219, 219);
}


.new-test-button{
  color: white;
  background-color: #6c757d;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
  width: 200px;
  margin-left: 20px;
  margin-top:20px;
}

.new-test-button:hover {
  background-color: rgb(20, 20, 20);
  color: rgb(219, 219, 219);
}

.results-container {
  background-color: #CAE3EC;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 700px;
  max-width: 800px;
  margin:auto;
  box-sizing: border-box;
  z-index: 0;
  justify-content: center;
}

.test-configuration-container {
  background-color: #CAE3EC;
  padding-bottom: 5px;
  padding-top: 15px;
  border-radius: 10px;
  text-align: center;
  width: 700px;
  max-width: 800px;
  margin:auto;
  box-sizing: border-box;
  z-index: 0;
  justify-content: center;
  margin-bottom:20px;
  align-items: center;
}

.test-complete{
  font-weight: bold;
  font-size: 40px;

}

.correct-words{
  font-size:20px;
}

.test-config-settings{
  font-size:25px;
  font-weight: 500;
}

.recent-words-container {
  text-align: center;

}

.popup-header {
  border-bottom: 1px solid #ccc; 
}

.popup-content {
  margin-top: 5px;
  margin-bottom: 5px;
}

.popup-footer {
  border-top: 1px solid #ccc; 
}

.progress-bar {
  background-color: #f1f1f1;
  height: 20px;
  width:100%;
}

.progress-fill {
  text-align: center;
  background-color: #081c44;
  height: 100%;
  border: 0px solid white;
  border-radius: 5px;
  text-align: right;
  color: white;
  width:25%;
}

.progress-bar-container {
  position: relative; 
  margin-top: -20px; 
  margin-bottom: 10px;
  margin-left: -19px;
  width: 106%;
}

.progress-text {
  text-align: center;
}