.button {
	margin-top: 10px;
	background-color: rgb(66, 66, 66);
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	transition-duration: 0.4s;
	border-radius: 10px;
}

body {
	background-color: black;
}

.button:hover {
	background-color: rgb(99, 99, 99);
}

.rules {
	width: 45%;
	height: 395px;
	float: right;
	border-width: 10px;
	border-style: solid;
	border-color: rgb(66, 66, 66);
	resize: vertical;
}

.turns {
	width: 100%;
	height: 25px;
	overflow: visible;
}

.output {
	float: left;
	width: 45%;
	height: 200px;
	overflow: auto;
	border-width: 10px;
	border-style: solid;
	border-color: rgb(66, 66, 66);
}

.buttonpress {
	float: right;
	width: 45%;
	height: 200px;
	overflow: auto;
	border-width: 10px;
	border-style: solid;
	border-color: rgb(66, 66, 66);
}

.redbutton {
	background-color: rgb(207, 56, 56);
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	transition-duration: 0.4s;
	border-radius: 10px;
	margin-top: 10px;
}

.redbutton:hover {
	background-color: rgb(207, 112, 112);
}

.purplebutton {
	background-color: rgb(137, 69, 176);
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	transition-duration: 0.4s;
	border-radius: 10px;
	margin-top: 10px;
}

.purplebutton:hover {
	background-color: rgb(145, 114, 163);
}

.greenbutton {
	background-color: rgb(9, 92, 9);
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	transition-duration: 0.4s;
	border-radius: 10px;
	margin-top: 10px;
}

.greenbutton:hover {
	background-color: rgb(62, 138, 62);
}

.bluebutton {
	background-color: rgb(43, 37, 156);
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	transition-duration: 0.4s;
	border-radius: 10px;
	margin-top: 10px;
}

.bluebutton:hover {
	background-color: rgb(86, 83, 145);
}

.orangebutton {
	background-color: rgb(224, 109, 43);
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	transition-duration: 0.4s;
	border-radius: 10px;
	margin-top: 10px;
}

.orangebutton:hover {
	background-color: rgb(222, 136, 87);
}

.yellowbutton {
	background-color: rgb(245, 224, 0);
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	transition-duration: 0.4s;
	border-radius: 10px;
	margin-top: 10px;
}

.yellowbutton:hover {
	background-color: rgb(224, 211, 72);
}

.limitbutton {
	margin-top: 10px;
	background-color: red;
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	transition-duration: 0.4s;
	border-radius: 10px;
	content: 'Limited Turns: Off';
}

.slide {
	width: 25%;
	float: right;
	margin-right: 30px;
}

.limitbutton:hover {
	background-color: rgb(255, 50, 50);
}

.limitslider {
	-webkit-appearance: none;
	width: 100%;
	height: 10px;
	background: rgb(66, 66, 66);
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
}

.limitslider:hover {
	opacity: 1;
}

.limitslider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1.83%;
	height: 25px;
	background: rgb(69, 68, 247);
	cursor: pointer;
}

.limitslider::-moz-range-thumb {
	width: 1.83%;
	height: 25px;
	background: rgb(69, 68, 247);
	cursor: pointer;
}