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

.fotoquiz-image-panel {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.fotoquiz-image-panel h1 {
  margin-bottom: calc(var(--percentage-height) * 4);
  margin-top: calc(var(--percentage-height) * 2);
  font-size: calc(var(--percentage-width) * 4);
}

.fotoquiz-images {
  width: calc(var(--percentage-width) * 75);
  height: calc(var(--percentage-height) * 75);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.photo {
  width: calc(var(--percentage-width) * 32);
  height: calc(var(--percentage-height) * 32);
  border-style: solid;
  border-width: calc(var(--percentage-width) * 0.2);
  border-radius: calc(var(--percentage-width) * 1);
  border-color: black;
  box-sizing: border-box;
}

.photo {
  outline: none;
  overflow: hidden;
}

.photo img {
  position: relative;
  z-index: 2;
  width: calc(var(--percentage-width) * 32);
  height: calc(var(--percentage-height) * 32);
}

.photo:focus::before {
  border: calc(var(--percentage-width)* 0.7) solid var(--illi-purple);
  content: "";
  position: absolute;
  width: calc(var(--percentage-width)* 33.6);
  height: calc(var(--percentage-height)* 34.5);
  background: var(--illi-light-purple);
  border-radius: calc(var(--percentage-width)* 2);
  z-index: 1;
  margin-left: calc(var(--percentage-width)* -1.6);
  margin-top: calc(var(--percentage-height)* -2.75);
}

.photo.right:focus::before {
  border: calc(var(--percentage-width) * 0.7) solid var(--illi-green);
  background: var(--illi-light-green);
}

.photo.wrong:focus::before {
  margin-left: calc(var(--percentage-width) * -2);
  margin-top: calc(var(--percentage-height) * -3.2);
}

.photo.wrong {
  border-color: var(--illi-game-red);
  border-width: calc(var(--percentage-width) * 0.5);
}

.photo.wrong .quiz-img {
  opacity: 0.2;
}

.photo .wrong,
.photo .right {
  display: none;
}

.photo.wrong .wrong,
.photo.right .right {
  display: flex;
  margin-top: calc(var(--percentage-width) * -14.5);
  margin-left: calc(var(--percentage-width) * 10.5);
  width: calc(var(--percentage-width) * 10);
  height: calc(var(--percentage-width) * 10);
}

/* HINT CSS */
.fotoquiz-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;
}

.hint-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--percentage-width) * 60);
  height: calc(var(--percentage-height) * 30);
  background-color: #fff0cc;
  text-align: center;
  border-radius: calc(var(--percentage-width) * 1);
  font-size: calc(var(--percentage-width) * 3);
  border: calc(var(--percentage-width) * 0.5) solid;
  border-color: var(--illi-yellow);
}

.hint.button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  width: calc(var(--percentage-width) * 10);
  height: calc(var(--percentage-width) * 10);
  background-color: var(--illi-yellow);
  border-radius: calc(var(--percentage-width) * 2);
}

.hint.button i{
  font-size: calc(var(--percentage-width) * 4);
  margin-bottom: calc(var(--percentage-height) * 1);
}

.hint.button p {
  font-size: calc(var(--percentage-width) * 2);
  margin: 0;
}

.hint.button:focus {
  outline: none;
}

.hint.button:focus::before {
  border: calc(var(--percentage-width) * 0.5) solid var(--illi-yellow);
  content: "";
  position: absolute;
  width: calc(var(--percentage-width) * 13.5);
  height: calc(var(--percentage-width) * 13.5);
  background: var(--illi-light-yellow);
  border-radius: calc(var(--percentage-width) * 3);
  z-index: 1;
}

.fotoquiz-button-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#fotoquiz .fotoquiz-button-container .titlebar-button{
  font-size: calc(var(--percentage-height)* 3);
  width: calc(var(--percentage-width)* 9);
  height: calc(var(--percentage-height)* 4);
  margin-top: calc(var(--percentage-height)* 3);
  margin-bottom: calc(var(--percentage-height)* 3);
}

#fotoquiz .fotoquiz-button-container .titlebar-button:focus::after {
	width: calc(var(--percentage-width)* 12.1);
  height: calc(var(--percentage-height)* 9.5);
}