.main-container {
	margin: auto;
	display: flex;
	background-color: aliceblue;
	height: 80vh;
}

.demo-and-exercise {
	// border: 1px solid black;
	margin: 15px;
	width: 50%;
	height: 75%;
	margin-right: 0px;
}

.bsearch-demo,
.quicksort-demo,
.mergesort-demo {
	height: 50%;
	// border: 1px solid red;
}

.bsearch-exercise,
.quicksort-exercise,
.mergesort-exercise {
	margin-top: 20px;
	// border: 1px solid green;
	height: 50%;
}

.solution-container {
  width: 50%;
	height: 90%;
  padding: 30px;
  margin: auto;
}

.solution {
	height: 100%;
  background-color: #91C9FF;
  border: 2px solid black;
}

.solution-button-div {
  display: flex;
  justify-content: space-between;
  background-color: #417BB2;
}

.javascript-button,
.ruby-button,
.python-button,
.info-button {
  width: 25%;
  display: flex;
  justify-content: center;
  padding: 10px;
  border-radius: 1px;
  color: black;
}

.selected-solution-button {
  background-color: #91C9FF;
  color: black;
}

.solution-div {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
  padding: 30px;
  font-size: 14px;
	height: 92%;
	box-sizing: border-box;
}

.solution-div div {
	width: 100%;
}

.solution-image-div {
}

.solution-div div img {
	width: 100%;
	height: auto;

}

.solution-info {
	display:flex;
	padding-top: 0px;
	flex-direction: column;
}
 .solution-info p {
	 margin-bottom: 10px;
 }