@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');

*{
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #000; 
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#mainBox{
  position: relative;
  text-align: center;
  width: 50vw;
  max-height: 80vh;
  background-color: #121212;
  padding: 3%;
  border-radius: 2%;
  box-shadow: 1vh 1vh 2vh rgba(255, 255, 255, 0.322);
}
#gameNameH1{
  font-family: "Orbitron";
  font-size: 6vh;
  color: hsla(237, 100%, 51%, 0.908);
  margin-bottom: 5%;
}
#difficultyPanel{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin: auto;
  display: none;
  background-color: hsla(0, 0%, 31%, 0.137);
  font-size: 2vh;
  max-width: 50%;
  height: 55vh;
}
#chooseDifficultyText{
  font-size: 5vh;
  margin: 5% 0 5% 0;
  color: #fff;
  display: none;
}
#difficultyPanel button{
  padding: 5%;
  cursor: pointer;
  font-family: "Orbitron";
  font-size: 4vh;
}
#easy{
  background-color: hsla(120, 100%, 50%, 0.6);
  border: 0.15em solid hsla(120, 100%, 15%, 0.6);
}
#easy:hover{
  background-color: hsla(120, 100%, 50%, 0.7);
}
#easy:active{
  transform: scale(0.95);
}
#medium{
  background-color: hsla(60, 100%, 50%, 0.8);
  border: 0.15em solid hsla(60, 100%, 15%, 0.8);
}
#medium:hover{
  background-color: hsla(60, 100%, 50%, 0.9)
}
#medium:active{
  transform: scale(0.95);
}
#hard{
  background-color: hsla(0, 100%, 50%, 0.8);
  border: 0.15em solid hsla(0, 100%, 15%, 0.8);
}
#hard:hover{
   background-color: hsla(0, 100%, 50%, 0.9);
}
#hard:active{
  transform: scale(0.95);
}
#mainText{
  margin-top: 10%;
  font-weight: bold;
  font-size: 3vh;
  color: #fff;
}
#mainText span{
  display: inline-block;
  margin-top: 10%;
  color: #7a7a7a;
  text-shadow: 0px 0px 2px #7a7a7a;
  animation: fadeIn 2s ease-in forwards;
}
#expressionsPanel{
  background-color: hsla(0, 0%, 31%, 0.137);
  width: 90%;
  padding: 5%;
  text-align: center;
  margin: auto;
  margin-bottom: 5%;
  display: none;
}
#motivationalText{
  padding: 3%;
  font-weight: bold;
  font-size: 4vh;
  color: #fff;
}
#expressions{
  font-size: 4vh;
  font-family: "Orbitron";
  color: #fff;
}
#startButton{
  font-family: "Orbitron";
  margin-top: 10%;
  padding: 3%;
  font-size: 5vh;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  border-style: none;
  background-color: #000;
  color: #fff;
}
#startButton:hover{
  background-color: #fff;
  color: #000;
}
#trueButton{
  background-color: hsla(120, 100%, 51%, 0.7);
  padding: 5%;
  margin-right: 0.2%;
  font-size: 5vh;
  border-radius: 5%;
  border-style: none;
  border: 0.3vw solid hsla(120, 98%, 25%, 0.5);
  cursor: pointer;
  display: none;
}
#trueButton:hover{
  background-color: hsla(120, 100%, 51%, 0.9);
}
#trueButton:active{
  transform: scale(0.95);
}
#falseButton{
  background-color: hsla(0, 100%, 51%, 0.7);
  padding: 5%;
  margin-left: 0.2%;
  font-size: 5vh;
  border-radius: 5%;
  border-style: none;
  border: 0.3vw solid hsla(0, 98%, 25%, 0.5);
  cursor: pointer;
  display: none;
}
#falseButton:hover{
background-color: hsla(0, 100%, 51%, 0.9)
}
#falseButton:active{
  transform: scale(0.95);
}
#resetButton{
  display: none;
  font-family: "Orbitron";
  font-size: 3vh;
  margin-top: 3%;
  padding: 3%;
  border-style: none;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  background-color: #000;
  color: #fff;
}
#resetButton:hover{
  background-color: #fff;
  color: #000;
}
#resetButton:active{
  transform: scale(0.95);
}
#questionCounter{
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0 5% 3% 0;
  color: #fff;
  font-size: 5vh;
  font-family: "Orbitron";
  display: none;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}