.quicksort-demo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  margin-top: 10px;
  border-bottom: 2px solid
}

.quicksort-try {
  margin-top:15px;
  font-size: 25px;
  margin-bottom: 15px;
  display:flex;
  justify-content: center
}

.quicksort-button-container{
  display: flex;
  justify-content: center;
  align-items: center;
}

.quicksort-start-exercise {
  font-size: 20px;
  padding: 5px;
  border-radius: 5px;
  margin-right: 50px;
}

.quicksort-start-exercise:hover {
  font-size: 20px;
  padding: 5px;
  border-radius: 5px;
  background-color: #93D1FF;
  margin-right: 50px;
}

.quicksort-exercise-subarray {
  margin-top: 20px;
  display:flex;
  justify-content: center;
}

// .quicksort-exercise-buttons {
//   margin-bottom: 20px;
// }

.quicksort-demo-buttons {
  display: flex;
}

.quicksort-demo-start {
  font-size: 20px;
  margin-right: 50px;
  padding: 5px;
  border-radius: 5px;
}

.quicksort-demo-start:hover {
  background-color: #91C9FF;
  padding: 5px;
  border-radius: 5px;
}

.quicksort-demo-array {
  margin-top: 20px;
  padding: 5px;
  border-radius: 5px;
}

.quicksort-demo-newarray:hover {
  background-color: #91C9FF;
  padding: 5px;
  border-radius: 5px;
}

.quicksort-demo-newarray {
  font-size: 20px;
  padding: 5px;
  border-radius: 5px;
}

.quicksort-exercise-andrew {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 30px;
}

.quicksort-exercise-continer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.quicksort-text {
  background-color: red;
  color: black;
}

.quicksort-exercise {
  display: flex;
  justify-content: center;
  align-items: center;
}

.subarray-container {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center
}

.subarray {
  display:flex;
}

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

.subarray {
  display: flex;
  flex-direction: row
}

.quicksortIdle {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid rgba(184,184,184,.5);
 background-color: rgba(184,184,184,.5);
}

.quicksortIdleExercise {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid rgba(184,184,184,.5);
 background-color: rgba(184,184,184,.5);
}

.active {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid #93D1FF;
 background-color: #93D1FF;
}

.activeExercise {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid #93D1FF;
 background-color: #93D1FF;
}

.hidden {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid transparent;
  color:transparent;
  background-color: transparent;
}


.hiddenExercise {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
  color:transparent;
  background-color: transparent;
}

.unfocused {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid rgba(184,184,184,.2);
 background-color: rgba(184,184,184,.2);
 color: rgba(0,0,0,.3)
}

.unfocusedExercise {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid rgba(184,184,184,.2);
 background-color: rgba(184,184,184,.2);
 color: rgba(0,0,0,.3)
}

.smaller {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid #C4DEFF;
 background-color: #C4DEFF;
  color: black;
}

.smallerExercise {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid #C4DEFF;
 background-color: #C4DEFF;
  color: black;
}


.larger {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid #93D1FF;
 background-color: #417BB2;
  color: black;
}

.sorted {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid rgba(45, 166, 36, 0.2);
 background-color: rgba(45, 166, 36, 0.2);
  color: black;
}

.correct {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid rgba(45, 166, 36, 0.2);
 background-color: rgba(45, 166, 36, 0.2);
  color: black;
}

.hiddenExercise {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid transparent;
 background-color: transparent;
  color: transparent;
}

.incorrect {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid rgba(196, 61, 61, 0.5);
 background-color: rgba(196, 61, 61, 0.5);
  color: black;
}

.sortedExercise {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid rgba(45, 166, 36, 0.2);
 background-color:rgba(45, 166, 36, 0.2);
  color: black;
}

.pivot {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid #91C9FF;
 background-color: #91C9FF;
  color: black;
}

.pivotShow {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid #91C9FF;
 background-color: #91C9FF;
  color: black;
}

.pivotTextShow {
  color: black;
  font-size: 13px;
  background-color: transparent;
  margin-right: 10px;
  font-size: 20px;
}
.pivotTextHidden {
  color: transparent;
  background-color: transparent;
  margin-right: 10px;
  font-size: 20px;
}

.largerTextShow {
  color: black;
  font-size: 13px;
  background-color: transparent;
  margin-right: 10px;
  font-size: 20px;
}

.largerTextHidden {
  color: transparent;
  background-color: transparent;
  margin-right: 10px;
  font-size: 20px;
}


.smallerTextShow {
  color: black;
  font-size: 13px;
  background-color: transparent;
  margin-right: 10px;
  font-size: 20px;
}

.smallerTextHidden {
  color: transparent;
  background-color: transparent;
  margin-right: 10px;
  font-size: 20px;
}

.pivotShowExercise {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid #91C9FF;
 background-color: #91C9FF;
  color: black;
}

.smallerShow {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid  #C4DEFF;
 background-color:  #C4DEFF;
  color: black;
}
.smallerShowExercise {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid #C4DEFF;
 background-color: #C4DEFF;
  color: black;
}

.largerShow {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid #417BB2;
 background-color: #417BB2;
  color: black;
}
.largerShowExercise {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid #417BB2;
 background-color: #417BB2;
  color: black;
}

.pivotHidden {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid transparent;
 background-color: transparent;
  color: transparent;
}
.pivotHiddenExercise {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid transparent;
 background-color: transparent;
  color: transparent;
}
.smallerHidden {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid transparent;
 background-color: transparent;
  color: transparent;
}
.smallerHiddenExercise {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid transparent;
 background-color: transparent;
  color: transparent;
}
.smallerExercise {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid #C4DEFF;
 background-color: #C4DEFF;
  color: black;
}
.largerHidden {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid transparent;
 background-color: transparent;
  color: transparent;
}
.largerHiddenExercise {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid transparent;
 background-color: transparent;
  color: transparent;
}
.pivotExercise {
  border-radius: 0.8em;
 -moz-border-radius: 0.8em;
 -webkit-border-radius: 0.8em;
 display: inline-block;
 font-weight: bold;
 line-height: 1.5em;
 margin-right: 10px;
 text-align: center;
 width: 1.5em;
 border: 1px solid transparent;
 background-color: #91C9FF;
  color: black;
}

.instructions {
  margin-top: 15px;
  display:flex;
  justify-content: center;
  font-size: 20px;
}