:root{
  --clock_size: 150px;
}


#voicemodetext{
  font-family: var(--font_family);
  color: var(--text_color);
  font-size: 20px;
  margin-bottom: 0px;
  opacity: 0.6;

  position: relative;
  display: flex;
  justify-content: space-around;
  left: 0;
  right: 0;

}

#problemandinput{
  display: flex;
  justify-content: center;
}

#problemtruecontainer{
  position: relative;
  top: -267px;
  border: solid 1px red;
}

#problemscontainer{
  position: absolute;
  top: 50px;
  height: 290px;
  padding-top: 30px;
  overflow: hidden;
  display: inline-flex;
  justify-content: right;
  right: 50%;
  padding-top: 115px;
  min-width: 150px;
  margin-right: 15px;

}

.problemmask{
  position: absolute;
  width: 100%;
  height: 290px;
  transition: height 0.1s;
  background: -webkit-linear-gradient( rgba(255, 255, 255, 0) 0%, var(--background) 20% );
  z-index: 1;
}

.problems{
  position: relative;
  padding-top: 5px;
  display: inline-table;
}

.problem{
  font-size: 40px;
  color: var(--text_color);
  opacity: 0.5;
  font-family: var(--font_family);
  margin-top: 0px;
  margin-bottom: 0px;
  white-space: nowrap;
  right: 0px;
  height: 40px;
  display:flex;
  align-items: center;
  justify-content: right;
}

.hiddenuntilstart{
  opacity: 0 !important;
  pointer-events: none;
}

#lastcorrection{
  font-family: var(--font_family);
  color: red;
  font-size: 20px;
  opacity: 0.8;
  position: relative;
  left: 50%;
  margin-top: 40px;
  text-align: left;
}

.trigproblem{
  height: 90px;
}

.fractionproblem{
  height: 90px;
}

.powerproblem{
  height: 90px;
}

.rootproblem{
  height: 90px;
}

.quadraticproblem{
  height: 55px;
}

.clockproblem{
  margin-right:0px;
  height: var(--clock_size);
  width: var(--clock_size);
  z-index: 1;
}

.binaryproblem sub{
  font-size: 0.52em;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;
  position: relative;
  top: 0.35em;
}

.clockproblem.rightanswer{
  filter: brightness(50%) sepia(100) saturate(100) hue-rotate(100deg)
}

.clockproblem.wronganswer{
  filter: brightness(50%) sepia(100) saturate(100) hue-rotate(25deg)
}

#mainproblem{
  opacity: 1 !important;
  position: relative;
}

.inpandexample{
  position: relative;
}

.equation{
  position: relative;
  top: 0px;
  width: 100%;
  display:block;
  justify-content: space-around;
}

.timershow{
  position: relative;
  width: 75px;
  height: 75px;
  margin: auto;
  z-index: 1;
  transition: opacity 0.5s;
}

.timercontainer{
  text-align: center;
  margin-top: 40px;
  margin-bottom: 1em;
}

.numrestart{
  display: flex;
  position: relative;
  top: 30px;
  left: 50%;
}

@media screen and (max-width: 1000px) {
  .numrestart{
    flex-direction: column;
  }

  .numinput{
    width: 120px !important;
  }

  .widenuminput{
    width: 260px !important;
  }

  #restarttest{
    width: 120px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  #voicerestart{
    width: 120px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .problem{
    font-size: 30px !important;
  }

  .linearproblem{
    font-size: 22px !important;
  }

}


#restarttest{
  position: relative;
  width: 50px;
  height: 50px;
  font-size: 30px;
  padding: 0px;
}

#voicerestart{
  width: 50px;
  height: 50px;
  font-size: 30px;
  padding: 0px;
}

#restarttest:focus{
  opacity: 1
}

#voicerestart:focus{
  opacity: 1
}


.numinput::placeholder{
    font-size: 20px;
}

.numinput{
  all: unset;
  position: relative;
  width: 150px;
  font-family: var( --font_family);
  font-size: 40px;
  height: 50px;
  background: var(--button_background);
  border: solid 1px var(--button_border);
  color: gray;
  opacity: 0.65;
  transition: opacity 0.15s;
  padding-left: 10px;
  vertical-align: middle;
}
.numinput:hover{
  opacity: 0.8;
}

.numinput:focus{
  opacity: 1;
}

.wronganswer{
  color: red;
}

.rightanswer{
  color: green;
}

.widenuminput{
  width: 300px;
}