html, body, * {
    box-sizing: border-box;
}

body {
    font-family: "Avenir Next", "Helvetica Neue", Helvetica;
}

button {
    display: block;
}

p {
    white-space: pre-line;
}
#post_experiment_survey {
  display: none;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.consent {
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-style: italic;
}

.instruction {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.trial_img {
    border: 5px solid transparent;
    width: 600px;
    height: 400px;
}

.sub_container {
    width: 100%;
    display: flex;
    flex-direction: row;
    background-color: white;
    justify-content: center;
}

.frame {
  display: flex;
  align-self: flex-start;
  border-color: dimgray;
  border-style: solid;
  display: block;
  width: 200px;
}

.bar {
  background-color: lightseagreen;
  height: 21px;
  width: 0;
}

#left_button {
  margin-right: 35px;
}

.start_button {
  max-width: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;

}
.selected .trial_img {
  border: 5px solid orange;
}

.experiment_images {
  display: none;
}