html {
    position: relative;
    min-width: 1280px;
    max-width: 1920px;
    height: 100%;
}

.experimentText {
  position: absolute;
  width: 99%;
  font-size: 18pt;
  font-family: Helvetica;
  background-color: white;
  color: black;
  text-align: center;
}

#correctFeedback {
  position: absolute;
  width: 1000px;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) translateY(-10px);
  color: forestgreen;
}

#incorrectFeedback {
  position: absolute;
  width: 1000px;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) translateY(-10px);
  color: red;
}

#fixation {
  position: absolute;
  width: 1000px;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) translateY(-10px);
}

#canvas {
  position: relative;
  outline: black 5px solid;
}

#canvasWrapper {
    position: absolute;
    position: absolute;
    height: 500px;
    width: 900px;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

#reminderText {
  position: relative;
  width: 100%;
  top: 20px;
  font-size: 14pt;
  font-family: Helvetica;
  text-align: center;
}

#slicedCircle {
  width: 70px;
  left: 50%;
  transform: translateX(-50%);
}

#scoopedCircle {
  width: 70px;
  left: 50%;
  transform: translateX(-50%);
}

#qual1 {
  position: absolute;
  top: 220px;
  left: 50%;
  transform: translateX(-50%);
  font-family: Helvetica;
  background-color:white;
  color:black;
  font-size:16pt;
}

#qual2 {
  position: absolute;
  top: 350px;
  left: 50%;
  transform: translateX(-50%);
  font-family: Helvetica;
  background-color:white;
  color:black;
  font-size:16pt;
}

#qual3 {
  position: absolute;
  top: 480px;
  left: 50%;
  transform: translateX(-50%);
  font-family: Helvetica;
  background-color:white;
  color:black;
  font-size:16pt;
}

#progress {
  position: absolute;
  margin-top: 17px;
  left: 50%;
  transform: translateX(-50%);
}

#progressFill {
  position: absolute;
  margin-top: 17px;
  left: 50%;
  transform: translateX(-50%);
}

#progressText {
  position: absolute;
  margin-top: 0px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14pt;
  font-family: Helvetica;
  color: black;
}
