.accordion {
  border: 0.75px solid #ccc;
  border-radius: 5px;
}
.sound-button-div {
  margin-top: 20px;
}

.soundBtn {
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: var(--side-bg);
  color: var(--body-color);
}

.submitBtn,
.clearBtn,
.start-btn,
.stop-btn {
  width: 90px;
  height: 60px;
  border-radius: 5px;
  font-size: 1.3em;
  padding: 0;
  color: #fff;
  border: 1px solid var(--green);
}

.start-btn {
  background-color: rgb(17, 89, 17);
}

.stop-btn {
  background-color: rgb(194, 69, 20);
}

.submitBtn {
  background-color: rgb(27, 143, 27);
}
.clearBtn {
  background-color: rgb(52, 52, 228);
}

.start-btn:hover,
.stop-btn:hover,
.submitBtn:hover,
.clearBtn:hover {
  color: rgb(213, 211, 211) !important;
  border-color: rgb(213, 211, 211) !important;
}

.submitBtn:disabled,
.clearBtn:disabled,
.dropLetter:disabled {
  pointer-events: none;
}

.anagram-game {
  margin: 0 auto;
  max-width: 400px;
}
.info {
  font-size: 1.5em;
  text-align: center;
}
#quiz-container {
  margin: 10px auto 0 auto;
  text-align: center;
}

.top-row {
  display: flex;
  justify-content: space-between;
  border-radius: 5px;
  padding: 6px 10px;
  background-color: rgb(206, 141, 29);
  color: white;
  font-size: 1.1em;
}

.controls {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.timer {
}

.timer-choice {
  text-align: left;
  margin-bottom: 0;
}

#selTime {
  border-radius: 5px;
  height: 48px;
  font-size: 1.1em;
}

#selTime option {
  text-align: center;
}

#count-div {
  font-size: 1.8em;
  color: rgb(174, 63, 26);
}

#squares {
  cursor: pointer;
  width: 320px;
  height: 220px;
  margin: 5px auto 0 auto;
  display: flex;
  justify-content: center;
  align-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
}
.dropLetter {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2px;
  width: 23%;
  height: 31%;
  border-radius: 5px;
  background-color: rgb(214, 212, 212);
  color: #000;
  font-size: 32px;
}

.input-div {
  display: flex;
  justify-content: space-between;
}
#wordInput {
  width: 186px;
  height: 60px;
  padding-left: 8px;
  font-size: 1.2em;
  border: 1px solid var(--input-anagram-drop);
  border-radius: 5px;
}

#wordInput:focus {
  /* background-color: var(--input-anagram-drop); */
  box-shadow: none !important;
  outline: none;
}

#error-div {
  height: 22px;
}
#foundWords {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: 20px;
}

#foundWords div {
  margin: 2px;
  padding: 5px;
  border: 1px solid rgb(14, 99, 14);
  border-radius: 5px;
}

.error {
  border-radius: 15px;
  position: relative;
  animation: shake 0.1s linear;
  animation-iteration-count: 2;
}

.error-blue {
  position: relative;
  animation: shake 0.1s linear;
  animation-iteration-count: 2;
}

.bounce {
  font-size: 36px;
  position: relative;
  animation: shake2 0.2s linear;
  animation-iteration-count: 2;
}

@keyframes shake {
  0% {
    left: -3px;
  }
  100% {
    right: -3px;
  }
}

@keyframes shake2 {
  0% {
    top: -3px;
  }
  100% {
    bottom: -3px;
  }
}
.score-container {
  height: 40px;
  text-align: center;
  font-size: 1.3em;
  color: rgb(8, 7, 80);
}

.you-scored {
  font-size: 1.2em;
}
#total-score {
  font-weight: 700;
}

.new-high {
  color: rgb(146, 7, 35);
  font-size: 1.1em;
}

.hide {
  display: none;
}

.show {
  display: inline;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.center {
  text-align: center;
}

.green {
  color: rgb(5, 94, 5);
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 0 10px;
  display: none;
}
.modal.show {
  transition: opacity 0.4s 0.4s ease;
}
.modal-content {
  padding: 15px;
  width: 100%;
  background: #fff;
  text-align: center;
}
.modal h4 {
  font-size: 1.2rem;
}

.modal-body p {
  font-size: 1.2rem;
  margin: 15px 0 0;
  font-weight: 500;
}

.modal button {
  padding: 12px 23px;
}

@media screen and (min-width: 768px) {
  .modal h4 {
    font-size: 1.53rem;
  }

  .modal-body p {
    font-size: 1.53rem;
    margin: 15px 0 0;
    font-weight: 500;
  }
}