/* General Characteristics */
:root{
	--white: #FFF;
	--black: #000;
	--darken: rgba(0,0,0,0.5);
	--lightblue: #5D8AA8;
	--darkblue: rgb(70, 130, 180);
	--lightbrown: #c9b490;
	--darkbrown: #674421;
	--darkorange: #644117;
	--gold: rgb(255,215,0);
	--purple: rgb(191,74,126);
	--red: rgb(225, 10, 8);
}
/*Drop Down Menu Styling*/
.dropdownmenu {
	width:100%;
	flex:0 0 auto;
	position: relative;
}
.autocomplete-list {
	position: absolute;
	list-style-type: none;
	margin: 0;
	margin-top: 5px;
	padding:0;
	border: solid #353839;
	border-width: 1px;
	border-radius: 0.5rem;
	background-color: #FFF;
	width: 100%;
	max-height: 200px;
	overflow-y: auto;
}

.autocomplete-list li {
	padding: 10px;
	margin: 5px;
	border: solid #dee2e6;
	border-width: 1px;
	border-radius: 0.5rem;
	background-color: #FFF;
	width: calc(100% - 30px);
	cursor: pointer;
}
.autocomplete-list li:hover {
	background: #f4f0ec;
	color: #666699;
}
/*Drop Down Menu Styling*/

/*Button Styling*/
.game-mode-funky {
	margin: 0 1rem 1rem 1rem;
	border: 1px solid var(--darkblue);
}
.game-mode-original {
	margin: 0 1rem 1rem 1rem;
	border: 1px solid var(--darkblue);
}

.active_button1{
	background-color: var(--purple) !important;
	border: 1px solid var(--black) !important;
	color: var(--gold) !important;
}

.active_button2{
	background-color: var(--red) !important;
	border: 1px solid var(--black) !important;
	color: var(--gold) !important;
}