.plain {
  background-color: white;
}

.invert {
  background-color: black;
  filter: invert(100%)
}

div.container {
  margin-top: 3vw; 
  font-family: 'Nanum Gothic';
}

div.top {
  padding-bottom: 2.7vw;
  border-bottom: 0.23vw solid darkgray;
}

header {
  z-index: 5;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 10vw;
  width: 100vw;
  background-color: white;
  width: 100%;
  height: 5.8vw;
  padding-bottom: 2.7vw;
  border-bottom: 0.28vw solid darkgray; 
}

a.phb {
  text-decoration: none;
  font-size: 2.35vw;
  letter-spacing: 0.18vw;
  color: rgb(38,35,38);
  background-color: rgb(251,251,251);
  border: 0.1em solid dodgerblue; 
  border-radius: 20em;
  box-shadow: 0.085em 0.16em 0.2em gray;
  padding: 1.37vw 1.67vw;
  position: fixed;
  top: 1.4vw; left: 0.65vw;
}

span.doing {
  font-style: italic;
  font-size: 1.36vw;
  margin-left: 1.0vw; 
  position: fixed;
  top: 5.4vw; left: 28.1vw
}

button {
  font-family: 'Helvetica'
}

button.next {
  position: absolute;
  left: 0.9vw; top: 9.5vw;
  font-size: 1.7vw;
  border: 1px solid darkgray;
  border-radius: 0.5em;
  box-shadow: 0.085em 0.08em 0.2em rgb(165,100,0);
  padding: 0.1em 0.6em;
  background-color: orange;
  color: white;
}

button.pause {
  position: absolute;
  left: 7.4vw; top: 9.5vw;
  font-size: 1.7vw;
  border: 1px solid darkgray;
  border-radius: 0.5em;
  box-shadow: 0.085em 0.08em 0.2em rgb(0,25,200);
  padding: 0.1em 0.6em;
  background-color: dodgerblue;
  color: white;
}
button.resume {
  position: absolute;
  left: 7.4vw; top: 9.5vw;
  font-size: 1.7vw;
  border: 1px solid darkgray;
  border-radius: 0.5em;
  box-shadow: 0.085em 0.08em 0.2em rgb(0,40,0);
  padding: 0.1em 0.6em;
  background-color: green;
  color: white;
  display: none;
}

div.date {
  position: absolute;
  left: 15.35vw; top: 9.755vw;
  width: 51.6vw; height: 2vw;
  border: 0.12em solid darkgray;
  padding: 0.2vw 0.45vw;
  border-radius: 0.5em;
  white-space: nowrap;
  overflow: scroll;
}

#jqdate {
  font-size: 1.45vw;
  position: absolute;
  top: -1.16vw;
}

.answerbox {
  position: relative;
  right: 0.55vw; bottom: 0.33vw;
  width: 51.6vw; height: 2vw;
  font-size: 1.3vw;
  border: 0.12em solid darkgray;
  padding: 0.2vw 0.45vw;
  border-radius: 0.5em;
  background-color: white;
  display: none;
  -webkit-appearance: none;
}

button.buzz {
  position: absolute;
  right: 25vw; top: 9.5vw;
  font-size: 1.7vw;
  border: 1px solid darkgray;
  border-radius: 0.5em;
  box-shadow: 0.085em 0.08em 0.2em maroon;
  padding: 0.1em 0.6em;
  background-color: red;
  color: white;
}

div.welcome {
  position: absolute;
  right: 1vw; top: 9.5vw;
  width: 21vw; height: auto;
  border: 2px solid darkgray;
  border-radius: 0.6em 0.6em 1.2em 1.2em;
  padding: 0.5vw 1vw;
  font-size: 1.3vw;
  line-height: 3.3vw;
}

x.pts {
  width: auto;
  font-size: 1.3vw;
  text-align: center;
  border: 1px solid darkgray;
  border-radius: 0.5em;
  padding: 0.1em 0.5em;
  background-color: dodgerblue;
  color: white;
  margin-left: 0.27vw; 
}

#skip {
  width: 1.4vw; height: 1.4vw;
}

.dm {
  font-family: "Nanum Gothic";
  font-size: 1.1vw;
  border: 1px solid darkgray;
  border-radius: 0.5em;
  box-shadow: 0.085em 0.08em 0.2em;
  color: white;
  background-color: DarkTurquoise;
  padding: 0.1vw 0.7vw;
}

#resetpoints {
  font-family: "Nanum Gothic";
  font-size: 1.1vw;
  border: 1px solid darkgray;
  border-radius: 0.5em;
  box-shadow: 0.085em 0.08em 0.2em;
  color: white;
  background-color: LightCoral;
  padding: 0.1vw 0.6vw;
}

.usernamebox {
  width: 19.7vw; height: 1.5vw;
  font-size: 1.1vw;
}

div.questionbox {
  position: absolute;
  left: 1vw; top: 13.36vw;
  width: 70.1vw; height: auto;
  border: 0.32vw solid darkgray;
  border-radius: 1.5vw 1.5vw 1.2em 1.2em;
  padding: 1vw 1.2vw;
  font-size: 1.4vw;
}

div.bottom {
  display: none;
  width: 70.1vw; height: 6.7vw;
  font-size: 1.4vw;
}

span.buzz {
  font-size: 1.3vw;
  border: 1px solid darkgray;
  border-radius: 0.5em;
  box-shadow: 0.065em 0.06em 0.2em blue;
  padding: 0.1em 0.6em;
  background-color: dodgerblue;
  color: white;
  margin-right: 0.6vw;
  display: none;
}

.loader {
  width: 10vw; 
  height: 10vw;
  border: 1.4vw solid lightgray;   
  border-top: 1.4vw solid dodgerblue;
  border-bottom: 1.4vw solid darkorange;
  border-left: 1.4vw solid rgb(240,240,240);
  border-radius: 50%;
  position: absolute;
  top: 24vw;
  left: 45vw;
  animation: spin 0.7s linear infinite;
}
 
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.pHbDB {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#userquery {
  height: 1.4vw;
  font-size: 1.2vw;
  font-family: "Nanum Gothic";
  margin-bottom: 0.6vw;
  margin-top: 0.2vw;
  width: 65%;
  margin-right: 5%;
  border: 0.2vw solid darkgray;
  -webkit-appearance: none;
}

.go {
  width: 30%;
  margin-left: none;
  margin-top: 0.2vw;
  height: 2.4vw;
  font-family: "Nanum Gothic";
  font-size: 1.4vw;
  border: 0.16vw solid darkgray;
  border-radius: 0.5em;
  box-shadow: 0.085em 0.08em 0.2em;
  color: white;
  background-color: dodgerblue;
}

.querySelectors input{
  width: 1.5vw;
  height: 1.5vw;

}

.all {
  margin-bottom: 0.2vw;
  width: 100%;
  height: 2.4vw;
  font-family: "Nanum Gothic";
  font-size: 1.4vw;
  border: 0.16vw solid darkgray;
  border-radius: 0.5em;
  box-shadow: 0.085em 0.08em 0.2em;
  color: white;
  background-color: coral;
}