*{
	box-sizing: border-box;
}
.header{
	padding: 0.5rem;
	background-color: darkseagreen;
	max-width: 100%;
}
.logo{
	text-align: center;
	color: white;
	font-style: oblique;
	font-weight: bold;
	font-size: 1.5rem;
}
.content{
	margin: auto;
	width: 50%;
	padding: 1rem;
}
.title{
	padding-top: 2rem;
}
.intro-text{
	padding-bottom: 2rem;
}
.btn-primary{
	background-color: darkseagreen;
	border-color: darkseagreen;
	border: solid 3px;
	box-shadow: none;
}
.btn-primary:hover{
	background-color: darkseagreen;
	border-color: darkseagreen;
}
.btn-primary:focus{
	background-color: darkseagreen;
	border-color: darkseagreen;
}
.btn-check:focus+.btn-primary, .btn-primary:focus{
	box-shadow: 0 0 0 0.25rem darkseagreen;
}
.content-block{
	display: flex;
	max-width: 100%;
	max-height: 100%;
	border-bottom: 2px solid darkseagreen;
}
.block-left{
	margin: 1rem;
	float: left;
	max-width: 50%;
	min-width: 20%;
}
.block-right{
	height: 100%;
	float:right;
	flex: 1 1 0%;
}
.splitter{
	background-color: darkseagreen;
    cursor: ew-resize;
    width: 6px;
}
.list-names{
	text-decoration: none;
	color: forestgreen;
}
.list-names:hover{
	color: darkseagreen;
}
.compiler{
	background-color: darkseagreen;
	color: white;
	border: none;
	height: 40px;
}

@media screen and (max-width: 600px) {
  .content {
    width: 100%;
  }
	.content-block{
		display: block;
	}
	.block-left{
		max-width: 100%;
	}
	.block-right{
		width: 100%;
	}
}