@font-face {
  font-family: Overpass;
  src: url(fonts/Overpass-Regular.ttf);
}

body
{
	background-color: #F5F5F5;
}

/* PRE GAME SECTION */
.step1
{
	display: inherit;
}

#top_title
{
	text-align: center;
	color: white;
	background-color: #70ffc1;
	font-family: Overpass;
}
#top_title_text
{
	width: auto;
}
#top_title_text:hover
{
	cursor: pointer;
}

h2, h3
{
	font-family: Overpass;
	/*color: #545454;*/
	margin-top: 20px;
}

h4, p
{
	font-family: Overpass;
}

.pattern_choice_card
{
	border: 0px black solid;
	background-color: white;
	margin-top: 30px;
}

.pattern_choice_item
{
	background-color: white;
	color: black;
	padding: 10px;
	transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
}
.pattern_choice_item:hover
{
	background-color: #70ffc1;
	color: white;
}


#speed_bar
{
	background-color: #545454;
	height: 5px;
	margin-top: 40px;
}

.speed_choice
{
	position: relative;
	top: -7px;
	font-size: 1.4em;
	color: #545454;
	transition: color 300ms ease-in-out;
}
.speed_choice:hover
{
	color: #70ffc1;
}



#choose_location
{
	border: 1px #545454 solid;
	background-color: white;
	margin-top: 40px;
}


#bt_start
{
	text-align: center;
	padding: 10px;
	background-color: #70ffc1;
	border: 2px #70ffc1 solid;
	color: white;
	font-family: Overpass;
	margin-top: 60px;
	margin-bottom: 30px;
	transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
}
#bt_start:hover
{
	background-color: #F5F5F5;
	color: #70ffc1;
	cursor: pointer;
}




/* GAME SECTION */
.step2
{
	display: none;
}

#game_here
{
	border: 2px black solid;
	margin-top: 20px;
}

#bt_stop_play, #bt_reload
{
	color: #545454;
	padding: 10px;
	margin-top: 10px;
}