.woordzoeker-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.woordzoeker .image-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  position: absolute;
}

.woordzoeker .image-container img {
  margin-left: 0;
  max-width: 50%;
  object-fit: cover;
}

.answer-container-woordzoeker {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: calc(var(--percentage-height) * 8);
}

.word-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.input-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(var(--percentage-height) * 2);
  width: calc(var(--percentage-width) * 80);
  right: calc(var(--percentage-width) * 22);
  position: absolute;
}

.letter-container {
  margin-bottom: calc(var(--percentage-width) * 1);
  bottom: calc(var(--percentage-width) * 1);
  position: relative;
}

.selecteer-container {
  right: calc(var(--percentage-width) * 13);
  position: relative;
  height: calc(var(--percentage-width) * 0);
  width: 30%;
  margin-bottom: calc(var(--percentage-width) * 45);
  right: calc(var(--percentage-width) * 23);
}

.woordzoeker-container img {
  border-radius: calc(var(--percentage-width) * 1);
  margin-left: calc(var(--percentage-width) * 3);
  margin-bottom: calc(var(--percentage-width) * 4);
  height: calc(var(--percentage-width) * 30);
}

.woordzoeker-image {
  border: solid 4px #22912e;
}

.letter {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(var(--percentage-width) * 5);
  width: calc(var(--percentage-width) * 5);
  height: calc(var(--percentage-width) * 5);
}

.letter-text-woordzoeker {
  position: relative;
  color: #22912e;
  font-size: calc(var(--percentage-width) * 2.3);
  bottom: calc(var(--percentage-width) * 1);
  left: calc(var(--percentage-width) * 1);
}

.text-line {
  border-bottom: solid 2px gray;
  margin-bottom: calc(var(--percentage-width) * 1);
  padding: calc(var(--percentage-width) * 2.4);
}

.word-container .letter {
  border-width: calc(var(--percentage-height) * 1);
  position: relative;
  border: solid 2px gray;
  border-radius: calc(var(--percentage-width) * 1);
  background-color: white;
  margin: calc(var(--percentage-width) * 0.3);
  padding: 3px;
}

.word-container .letter:focus {
  outline: none;
}

.word-container .letter:focus::before {
  border: 5px solid #0d64c6;
  content: "";
  position: absolute;
  background: rgba(125, 144, 207, 0.1);
  border-radius: calc(var(--percentage-width) * 1.1);
  z-index: 1;
  width: calc(var(--percentage-width) * 5);
  height: calc(var(--percentage-width) * 5.2);
}

.word.letter.active {
  background-color: var(--illi-blue);
}

.letter-container .letter {
  background-color: #dcdcdc;
  border-radius: calc(var(--percentage-width) * 1);
  font-size: calc(var(--percentage-width) * 5);
  position: relative;
  width: 21%;
  border: solid 1px black;
  display: inline-flex;
  padding: 3px;
  margin-left: calc(var(--percentage-width) * 1);
  margin-bottom: calc(var(--percentage-width) * 1);
}

.picked {
  opacity: 70%
}

.letter-container .letter:focus {
  outline: none;
  font-weight: bold;
}

.letter-container .letter:focus::before {
  border: 5px solid #0d64c6;
  content: "";
  position: absolute;
  width: calc(var(--percentage-width) * 5);
  height: calc(var(--percentage-width) * 5);
  background: rgba(125, 144, 207, 0.1);
  border-radius: calc(var(--percentage-width) * 1);
  z-index: 1;
}

.woordzoeker-button-container {
  display: flex;
  left: calc(var(--percentage-width) * 80);
  position: absolute;
  flex-direction: column;
  top: calc(var(--percentage-height) * 50);
}

.woordzoeker-button-container .button,
.woordzoeker-controleer {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: calc(var(--percentage-height) * 5);
  background-color: var(--illi-green);
  font-size: calc(var(--percentage-width) * 2);
  flex-shrink: 0;
  width: calc(var(--percentage-width) * 10);
  position: relative;
}

.woordzoeker-button-container .button:focus,
.woordzoeker-controleer:focus {
  outline: none;
}

.woordzoeker-button-container .button:focus::before,
.woordzoeker-controleer:focus::before {
  border: calc(var(--percentage-width) * 0.3) solid var(--illi-green);
  content: "";
  position: absolute;
  width: calc(var(--percentage-width) * 13);
  height: calc(var(--percentage-height) * 5 + var(--percentage-width) * 3);
  background: var(--illi-light-green);
  border-radius: calc(var(--percentage-width) * 1);
  z-index: 1;
}

.woordzoeker-button-container .woordzoeker-hint {
  background-color: var(--illi-yellow);
}

.woordzoeker-button-container .woordzoeker-hint:focus {
  outline: none;
}

.woordzoeker-button-container .woordzoeker-hint:focus::before {
  border-color: var(--illi-yellow);
  background: var(--illi-light-yellow);
}

.woordzoeker-button-container .woordzoeker-pause {
  background-color: var(--illi-black);
}

.woordzoeker-button-container .woordzoeker-pause:focus {
  outline: none;
}

.woordzoeker-button-container .woordzoeker-pause:focus::before {
  border: calc(var(--percentage-width) * 0.3) solid var(--illi-gray);
}

.woordzoeker-controleer {
  position: absolute;
  left: calc(var(--percentage-width) * 80);
  bottom: calc(var(--percentage-height) * 8);
}

.word.letter.correct {
  background-color: #aceab3;
}

.word.letter.incorrect {
  background-color: #eeaeae;
}

.letter.misplaced {
  background-color: #ffdc9f;
}

.woordzoeker .correct-overlay {
  color: var(--illi-green);
  display: none;
  position: absolute;
  font-size: calc(var(--percentage-width) * 18);
  background-color: #ffffff;
  border-radius: calc(var(--percentage-width) * 20);
  padding: calc(var(--percentage-width) * 0.9);
  margin-top: calc(var(--percentage-width) * 5);
}

.woordzoeker-hint img {
  display: flex;
  filter: invert(1);
  margin-left: calc(var(--percentage-width) * -1);
  height: calc(var(--percentage-width) * 3);
  margin: 0;
}

.woordzoeker-hint i {
  margin-left: calc(var(--percentage-width)* -1);
  margin-right: calc(var(--percentage-width)* 0.75);
  font-size: calc(var(--percentage-height) * 3.5);
  margin-top: calc(var(--percentage-height) * 0.5);
}

/* HINT CSS */
.woordzoeker-hint-overlay {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.38);
  justify-content: center;
  align-items: center;
}


.word-container .letter:focus::before,
.letter-container .letter:focus::before,
.answer-container-woordzoeker .button:focus::before {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.woordzoeker-rounds {
  right: calc(var(--percentage-width) * 6);
  bottom: calc(var(--percentage-width) * 46);
  position: absolute;
}

.wz-logo {
  position: absolute;
  left: calc(var(--percentage-width) * 77);
  max-height: 24%;
  bottom: calc(var(--percentage-width) * 25);
}

.word-container .letter-word-container {
  position: relative;
  border: solid 2px black;
  border-bottom-width: 2px;
  border-radius: calc(var(--percentage-width) * 1);
  border-bottom-width: 8px;
  background-color: white;
  margin: calc(var(--percentage-width) * 0.3);
  padding: calc(var(--percentage-width) * 0.3);
}