* {
  margin: 0em;
}

body {
  font-family: Arial;
  text-align: center;
  background-color: #F2F2F2;
}

.wrapperTopMost {
  width: 99%;
  padding: 1%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.wrapperTop {
  width: 85%;
  padding-bottom: 1.5em;
  margin: 0 auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.wrapperMid {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
}

.wrapperBottom {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}

#changeLang, #generateQuestionButton {
  font-weight: bold;
}

.menuButton {
   cursor: pointer;
   z-index: 2;
   font-size: 30px;
}

.compShow {
  font-size: 26px;
}

.buttonStyle {
  font-family: Arial;
  height: 2em;
  margin: 10px;
  font-size: 22px;
  background: #FFFFFF;
  cursor: pointer;
  color: white;
  border: 1px solid #aaa;
}

#generateQuestionButton {
  display: none;
  height: 2.4em;
  width: 5.5em;
  font-size: 20px;
  margin: 20px;
  background: #FF5E5B;
  cursor: pointer;
  color: white;
  border: none;
}

#buttonC {
}

.score {
  font-size: 1.5em;
}

.conclusion {
  margin-top: 0.7em;
  margin-bottom: 0.7em;
  font-size: 26px;
  min-height: 1.5em;
}

.figures {
  display: none;
  text-align: left;
  position: absolute;
  top: 1.5em;
  left: 5.5em;
  padding: 1em 2.5em;
  border-radius: 25px;
  background-color: gray;
}

figcaption {
  color: white;
  font-weight: 600;
  padding: 15px;
  font-size:20px;
}

#changeLang, #menuButton {
  color: #949CB5;
}

.questionShow, .buttonStyle, .conclusion {
  color: black; 
}

.selected {
  background-color: #BBFFAF;
}

.item:hover .caption {
  display: block;
}
.item:hover {
  animation: bounce 0.6s;
}

button:focus {
  outline-color: #C3D6D1;
}

#changeLang:hover {
  cursor: pointer;
}


@keyframes bounce {
	0%, 20%, 60%, 100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	40% {
		-webkit-transform: translateY(-12px);
		transform: translateY(-12px);
	}

	80% {
		-webkit-transform: translateY(-5px);
		transform: translateY(-5px);
	}
}


@media only screen and (max-width: 780px) {
  .wrapperMid {
      flex-flow: column wrap;
  }
  
  .wrapperTop {
      width: 100%;
  }
  
  .wrapperTopMost {
      padding: 0em 0.7em;
  }
  
  .figures {
      font-size: 1em;
      padding: 1em 2.2em 0em 2.2em;
      top: 1.2em;
      left: 0.8em;
      width: 10em;
  }
}

@media only screen and (max-width: 580px) {
  .compShow {
      font-size: 2em;
  }
  .buttonStyle {
      font-size: 1.5em;
  }
  
  #generateQuestionButton {
      font-size: 20px;
  }
  .figures img {
      height: 45px;
      width: 45px;
  }
  
  .figures {
      padding: 1em 2em 0em 2em;
      top: 1.1em;
      left: 0.8em;
      width: 9em;
  }
  
  .score {
      font-size: 1.3em;
  }
  
  .conclusion {
      font-size: 1.6em;
      margin-top: 0.6em;
      margin-bottom: 0.5em;
  }
}


}
@media screen and (max-width: 1200px) {
.menuButton {
   font-size: 32px;
}
.compShow {
  font-size: 28px;
}

figcaption {
  font-size:26px;
}

#generateQuestionButton {
  font-size: 26px;
}

.buttonStyle{
font-size: 26px;
}
}

@media screen and (max-width: 992px) {
.menuButton {
   font-size: 32px;
}
.compShow {
  font-size: 28px;
}

figcaption {
  font-size:26px;
}

#generateQuestionButton {
  font-size: 26px;
}

.buttonStyle{
font-size: 26px;
}
  }
  
@media screen and (max-width: 768px)  {
.menuButton {
   font-size: 32px;
}
.compShow {
  font-size: 28px;
}

figcaption {
  font-size:26px;
}

#generateQuestionButton {
  font-size: 26px;
}

.buttonStyle{
font-size: 26px;
}
  }