/*
controller.css
J O'Regan

Styling for mobile controller used with Antibody game
*/

.controller-border {
	color: white;
	border: 2px solid black;
	width: 1200px;
	background-color: lightyellow;
	padding: 40px 40px 60px;
	touch-action: manipulation;/*Stop screen zooming when double tapping buttons*/
	text-align: center;
	margin: 0 auto;
}

/* Mobile Game Controller */

.controller {
	background-color: #b2b4b2;
	border: 3px solid black;
	width: 1150px;
	text-align: center;
	border-radius: 200px;
	padding: 25px;
	margin: 0 auto;
	filter:drop-shadow(0 0 10px purple);
}

.button-box {
	display: inline-block;
	border: 2px solid white;
	text-align: center;
	width: 360px;
	border-radius: 200px;
	padding: 5px;
	background-color: #707372;
}

.controller-border .button {
	font-family: 'Teko', cursive;
	-webkit-text-fill-color: white;/* Will override color (regardless of order) */
	-webkit-text-stroke-width: 3px;
	-webkit-text-stroke-color: black;
	border: 3px solid black;
	border-radius: 120px;
	font-size: 60px;
}

.button-start {
	background-color: #999;/*Grey*/
	margin: 0 95px;
	padding: 10px 25px;
}

.button-round {
	background-color: #F14;
	color: white;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin: 5px 2px;/* Stop button text highlighting when buttons pressed repeatedly */
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-o-user-select: none;
	padding: 10px 25px;
}

.btn-direction {
	font-size: 50px;
	padding: 10px 12px;
}

.button-divider {
	width: 70px;
	height: auto;
	display: inline-block;
}

/* Action Button Colours */
.buttonA {
	background-color: #F14;/*Red*/
}

.buttonB {
	background-color: #FF0;/*Yellow*/
}

.buttonX {
	background-color: #00F;/*Blue*/
}

.buttonY {
	background-color: #0F0;/*Green*/
}