body {
  height: 150%;
  width: 95%;
}

#allElement {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.font48px {
  font-size: 3.6vh;
}
.font44px {
  font-size: 3.6vh;
}
.font24px {
  font-size: 3vh;
}
.circle4 {
  width: 4vh;
  height: 4vh;
}
.flag4 {
  width: 6vh;
  height: 4vh;
}
.circle36 {
  width: 3.6vh;
  height: 3.6vh;
}
.circle26 {
  width: 2.6vh;
  height: 2.6vh;
}

headerbox {
  width: 100%;
  height: 15%;
}
.menu {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
#helpButton, #aboutButton, #setupButton, #languageButton {
  display: flex;
  border: solid 0.1vh black;
  text-decoration: none;
  text-align: center;
  color: black;
  align-items: center;
  align-content: center;
  padding: 2px;
  margin: 2px 2px;
  background-color: white;
}

#languageButton {
  height: 6vh;
}

h1 {
  text-align: center;
  margin: 0;
}
main {
  display: flex;
  width: 100%;
  height: 80%;
}
copyrightBox {
  width: 100%;
  height: 5%;
}
gameBox {
  display: flex;
  position:relative;
  justify-content: space-evenly;
  align-items: stretch;
/*  height: 700px; */
/*  flex-grow: 3;*/
  width: 75%;
  border: solid 2px black;
  background-image: url('./images/background1.svg');

}
.notusedColorBox {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 0;
}
.notusedColor {
  display: block;
  background: red;
  border: 1px solid black;
  border-radius: 50%;
  margin: 0.1vh;
}

.puzzle, .emptyRow {
  display: block;
/*  position: relative;*/
  flex-grow: 1;
/*  top: 25%;
  height: 50%;*/
}

.puzzleBox {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-evenly;
  align-items: stretch;
  height: 100%;
}
h2 {
  display: block;
  margin: 0;

}
#puzzleHeader, #puzzleHeaderEmpty, #guessesHeader, #evalHeader {
/*  display: block;*/
/*  transform: rotate(-90deg);
  font-size: 28px;*/

  min-width: 2vh; 
  line-height: 2vh;
  writing-mode: vertical-rl;
  white-space: nowrap;
  text-align: center;
  transform: rotate(180deg);


}

.twoData, #puzzleHeader, #puzzleHeaderEmpty {
  display: flex;
  flex-grow: 1;
  flex-direction: column-reverse;
  justify-content: space-evenly;
/*  margin: 1vh;*/
}

.rowBox {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-evenly;
  flex-grow: 1;
}
.circleColor {
  display: block;
  background: red;
  border: 1px solid black;
  border-radius: 50%;
/*  margin: 0.1vh; */
}

.resultColor {
  display: block;
  background: white;
  border: 1px solid black;
  border-radius: 50%;
/*  margin: 0.1vh; */
}
.trialButton {
  display: block;
  border: 1px solid black;
/*  transform: rotate(-90deg);*/
  background-color: white;
}
.emptyRow {
  height: 100%;
  width: 2%;
}
colorBox {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
/*  flex-grow: 1;*/
  width: 25%;
  align-items: stretch;
  border: solid 2px black;
  background-image: url('./images/background1.svg');

}
availableColorBox0, currentColorBox0, gameModeBox0 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  border: 1px solid black;
  margin: 0;
  width: 100%;


}
availableColorBox0 {
  height: 50%;
}
currentColorBox0 {
  height: 15%;
}
gameModeBox0 {
  height: 35%;
}

.availableColorBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-around;
  width: 90%;
}
.availableColor {
  display: block;
  background: red;
  border: 1px solid black;
  border-radius: 50%;
  margin: 0.5%;
}
.emptyColorBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.currentColor {
  display: block;
  background: red;
  border: 1px solid black;
  border-radius: 50%;
  margin: 1px;
}
hr {
  width: 100%;
}
.radioText {
  display: inline-block;
  vertical-align: middle;
/*  margin: auto 0 auto 5%;*/
  margin: 0 0 -2px 0.5vh;
}
#default_radioButton1, #default_radioButton2 {
  display: inline-block;
  vertical-align: middle;
  height: 3vh;
  width: 3vh;
  margin: 0;
}
.radioButton {
  display: flex;
  align-items: center;
  width: 95%;
/*  height: 3vh; */
  margin: 0 0 0 1%;
}
#restartButton {
/*  width: 50%;
  height: 50px;*/
  margin: 2.5%;
  border-radius: 5%;
  text-align: center;
  padding: 2%;
}