body, html {
  font-family: 'Rubik', sans-serif;
  scroll-behavior: smooth;
  height: 100vh;
  /* background-color: rgb(0, 0, 0, 0.5); */

}

.h1 { font-size: 2em;
  color: #3FA9F5;
  font-weight: 700;
  background-color: rgb(0, 0, 0, 0.5);
  padding: 1rem; 
}
.h2 { font-size: 1.5em;
  color: #3FA9F5;
  font-weight: 700;
  background-color: rgb(0, 0, 0, 0.5);
  padding: 1rem;
}
.h3 { font-size: 1.17em; }
.h5 { font-size: .83em; }
.h6 { font-size: .75em; }

.wsMotion {
  position: fixed;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
}

.navbar {
  left: 0;
  right: 0;
  margin: auto;
  position: fixed;
  bottom: 0;
  height: 5rem;
  width: 500px;
  padding: 1rem;
  background-color: rgba(125, 125, 125, 0.8);
  /* box-shadow: outset 0 0 2000px rgba(255, 255, 255, .5); */
  /* filter: blur(5px); */
  z-index: 2;
}

.retry {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 60px;
  z-index: 2;
}

.playHUD {
  position: relative;
  height: 60px;
  width: 60px;
  grid-template-columns: repeat(auto-fit, minmax(30vw, 1fr));
  font-family: helvetica;
  font-size: 20px;
  color: #3FA9F5;
  background-color: rgba(255, 0, 0, 0.5);
}

/* .playHUD h2 {
  color: white;
  font-size: 20px;
  font-weight: 700;
  text-align: right;
  width: 12em;
  right: 0;
  margin: 2rem;
  padding: 26px 24px 26px 20px;
  background-color: #3FA9F5;
  border-radius: 12px;
  border-width: 0.25em;
  border-color: white;
  z-index: 1;
} */

.startScreen {
  margin: auto;
}

.scoreBoard {
  padding: 1rem;
  max-width: 50%;
  color: white;
}


.textBody, .startBody {
  vertical-align: middle;
  height: 18rem;
  text-align: center;
  line-height: 150%;
  padding: 2rem;
  font-size: 2rem;
  font-weight: 600;
  /* font-weight: 400; */
  background-color: rgb(0, 0, 0, 0.5);
}

#quiz, .startScreen, .scenarioScreen {
  margin: auto;

  background-color: rgba(0, 0, 0, 0);
  color: white;
  text-align: center;
  max-width: 500px;
  
}

#quiz > h1 {
  text-align: center;
  padding: 0em 0em 1em 0em;
  font-size: 20px;
  color: white;
}

.logo {
  text-align: center;
  /* margin: 3rem auto; */
}

.wsLogo {
  text-align: center;
  height: 10rem;
  /* padding: 1rem; */
  margin: 4rem;
  background-color: black, rgb(0, 0, 0, 0.5);
  /* border-top: 0.05em solid white;
  border-bottom: 0.05em solid white; */

}

.startButton {
  font-size: 1.2rem;
  font-weight: 700;
  width: 15em;
  margin: 1em auto;
  padding: 1em;
  color: black;
  background-color: white;
  border-radius: 12px;
  border-width: 0.25em;
  border-color: white;
}

.startButton:hover { 
  cursor: pointer;
  background-color: #3FA9F5;
  transition:.10s ease-in;
}

.nextButton {
  font-size: 1.2rem;
  font-weight: 700;
  width: 15em;
  margin: 1em auto;
  padding: 1em;
  color: black;
  background-color: white;
  border-radius: 12px;
  border-width: 0.25em;
  border-color: white;
}

.nextButton:hover {
  cursor: pointer;
  background-color: #3FA9F5;
  transition:.10s ease-in;
}
.answers {
  color: black;
  padding: auto;
}

.answers div {
  font-size: 1.2rem;
  font-weight: 700;
  width: 15em;
  margin: 1em auto;
  padding: 1em;
  background-color: white;
  border-radius: 12px;
  border-width: 0.25em;
  border-color: white;
}

.answers div:hover {
  cursor: pointer;
  background-color: #3FA9F5;
  transition:.10s ease-in;
}



.scenarioScreen {
margin: auto;
}

.scenarioTitle {
display: none;
font-size: 1.5rem;
font-weight: 700;
/* border-top: 0.05em solid white;
border-bottom: 0.05em solid white; */
background-color: rgb(0, 0, 0, 0.5);
padding: 1rem;
color: #3FA9F5;
}

.scenarioBody{
  height: 18rem;
  text-align: left;
  line-height: 150%;
  display: none;
  padding: 2em;
  font-size: 1rem;
  background-color: rgb(0, 0, 0, 0.5);

}

.checker {
  text-align: center;
  height: 3rem;
  width: auto;
  margin: auto;
  z-index: 9;
}


.questions {
  height: 6rem;
  font-size: 1.2em;
  font-weight: 700;
  text-align: center;
  margin: auto;
  background-color: rgb(0, 0, 0, 0.5);
  padding: 1em;
  color: #3FA9F5;
}

.playHUD img {
  cursor: pointer;
}

.sequence video {
  max-width: 500px;
  border-radius: 12px;
}   

.sequence {
  /* max-width: 500px; */
  /* left: 0; */
  /* right: 0; */
  /* margin: 0 auto; */
  /* left: 50%; */
  /* transform: translateX(-50%); */

}

.sequence img{
  position: absolute;
  left: 0;
  margin: 1rem;
  z-index: 1;
  max-width: 60px;
}


.correct {
  align-items: center;
  font-weight: 700;
  color: white;
  background-color: #3FA9F5;
  width: 2em;
  height: 2em;
  line-height: 2em;
  float: left;
  margin: auto 0.8rem;
  border-radius: 2em;


}

.false {
  position: relative;
  align-items: center;
  font-weight: 700;
  color: rgb(165, 165, 165);
  background-color: #3fa9f549;
  width: 2em;
  height: 2em;
  line-height: 2em;
  padding-left: 0em;
  float: left;
  margin: auto 0.8rem;
  border-radius: 2em;

}

.icons img {
  cursor: pointer;
  
}

.icons {
  display: inline-block;
  position: absolute;
  padding: 1rem;
  margin-top: .75rem;
  z-index: 2;
  max-width: 80px;
}