/* Simple and fresh color scheme from:
https://www.canva.com/learn/website-color-schemes/ 
Originally designed by https://madebyshape.co.uk/*/
:root {
  --color-dark: #414141;
  --color-mint: #ccdfcb;
  --color-watermelon: #ff6a5c;
  --color-teal: #056571;
  --color-lightgray: #eeeeee;
  --color-darkgray: #333333;
}
.letter-grid {
  border: solid black 2px;
  font-size: 36pt;
  font-family: monospace;
  background-color: papayawhip;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 20px;
}

#new-game {
  background-color: var(--color-teal);
  border: solid var(--color-watermelon) 2px;
  /* border-radius: 10px; */
  width: 300px;
  height: 100px;
  font-size: 18pt;
  margin: 15px 25px 25px 0px;
  color: var(--color-lightgray);
}

#countdown-start {
  background-color: var(--color-teal);
  /* border-radius: 10px; */
  border: none;
  width: 200px;
  height: 75px;
  font-size: 18pt;
  margin: 0 2px;
  color: var(--color-lightgray);
}

#countdown-stop {
  background-color: var(--color-watermelon);
  /* border-radius: 10px; */
  border: none;
  width: 200px;
  height: 75px;
  font-size: 18pt;
  margin: 0 2px;
  color: var(--color-darkgray);
}

.word-cell {
  font-family: monospace;
  font-size: 14pt;
  border: solid 1px teal;
  border-collapse: collapse;
}

#countdown-restart {
  background-color: var(--color-lightgray);
  /* border-radius: 10px; */
  border: none;
  width: 200px;
  height: 75px;
  font-size: 18pt;
  margin: 0 2px;
  color: var(--color-darkgray);
}

section {
  display: flex;
}

.countdown-bound {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 2px var(--color-teal) solid;
  margin: 20px 10px 20px 2px;
  background: linear-gradient(45deg, var(--color-lightgray), var(--color-mint));
  width: 25%;
  /* border: solid 2px slateblue;
  margin: 20px;
  border-top-left-radius: 35px;
  background: linear-gradient(45deg, whitesmoke, lemonchiffon);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px; */
}

#countdown-timer {
  font-size: 30pt;
  color: var(--color-teal);
  font-family: sans-serif;
  margin: 20px;
  font-weight: bold;
  /* padding-top: 0.7em; */
}

#slider {
  width: 40%;
  height: 30px;
  background: lightgray;
  outline: none;
  opacity: 0.7;
  transition: opacity 0.2s;
  border: solid gray 2px;
  border-radius: 5px;
}

#slider:hover {
  opacity: 1;
}

#slider::-webkit-slider-thumb {
  appearance: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: greenyellow;
  cursor: pointer;
}

#slider::-moz-slider-thumb {
  appearance: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: greenyellow;
  cursor: pointer;
}

#vowel-label {
  font-size: 14pt;
  font-weight: bold;
  font-family: sans-serif;
}

#slide-label {
  font-size: 14pt;
  font-weight: bold;
  font-family: sans-serif;
}

#num-vowel {
  font-size: 14pt;
  font-weight: bold;
  font-family: sans-serif;
}

.word-table-body {
  overflow-x: visible;
  overflow-y: scroll;
  height: 300px;
  width: auto;
  margin-left: 30px;
}

.is-selected {
  background-color: var(--color-watermelon);
}

.not-selected {
  background-color: white;
}

.solve-entry {
  margin: 20px;
  font-size: 24pt;
  font-weight: bold;
  color: var(--color-dark);
  font-family: sans-serif;
}

#selected-word,
#selected-path {
  margin: 20px;
  font-size: 14pt;
  font-family: sans-serif;
  color: royalblue;
  font-weight: lighter;
}

#selected-word-header,
#selected-path-header {
  margin: 20px;
  font-size: 14pt;
  color: rebeccapurple;
  font-family: sans-serif;
  font-weight: bold;
}

.solve-entry-bound {
  visibility: hidden;
  background-color: var(--color-mint);
  margin: 20px 10px 20px 10px;
  border: 2px solid var(--color-dark);
  /* border: solid 2px slateblue;
  margin: 20px;
  border-top-left-radius: 35px;
  background: linear-gradient(45deg, var(--color-mint), var(--color-dark));
  border-top-right-radius: 5px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px; */
}

#score-holder-header {
  color: var(--color-dark);
  font-weight: normal;
}

label {
  font-family: sans-serif;
  font-size: 14pt;
}

#sort-alpha {
  visibility: hidden;
  background-color: var(--color-dark);
  color: var(--color-mint);
  height: 100px;
  width: 150px;
  font-family: sans-serif;
  font-size: 14pt;
  margin: 20px;
}

/*
  .slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
  }
*/