body{
	background:mediumseagreen;
	padding: 0px 0px 0px 0px;
	font-family : courier;
	width : 100%;
	height: 100%;
}

.game_play{
	position : absolute;
	width:100%;
	height:100%;
}

.connector1 {
	position:absolute;
	width : 20px;
	height : 100px;
	background-image: url("line.png");
}

.connector2 {
	position:absolute;
	width : 100px;
	height : 20px;
	background-image: url("line.png");
}

.loader1 {
	position:absolute;
	width:100px;
	height:100px;
	background: royalblue;
	background-image : url("ring.png");
}
.ball_handler {
	position:absolute;
	width : 100px;
	height : 20px;
	background: rgba(1,1,1,0);
	animation: spin 2s linear 0;
}


@keyframes spin {
	0% {
		transform : rotate(0deg);
	}
	100% {
		transform : rotate(360deg);
	}
}



.ball {
	position : absolute;
	border-radius : 50%;
	background:tomato;
	width : 20px;
	height : 20px;
}

.btn_handler {
	position : absolute;
	top:85%;
	left :35%;
	background : lavender;
	width :300px;
	height:50px;
	border : 2px solid royalblue;
	box-shadow : 2px 5px 0px 0px royalblue;
	padding:10px;
}

.handler_btn {
	position : absolute;
	left:25%;
	background : tomato;
	box-shadow : 3px 3px 0px 0px orange;
	text-shadow: 5px 5px 5px red;
	cursor:pointer;
	font-family :courier;
	font-weight:bolder;
	font-size: 30px;
	padding:5px;
	color:white;
	cursor : pointer;
}

.handler_btn:hover {
	background :royalblue;
	box-shadow : 3px 3px 0px 0px dodgerblue;
	text-shadow: 5px 5px 5px dodgerblue;
	color: white;
}

.handler_btn:active {
	background :tan;
	box-shadow : 3px 3px 0px 0px orange;
	text-shadow: 5px 5px 5px grey;
	color: dodgerblue;
}

.start_menu {
	position : absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	background : rgba(0,100,100,0.5);
	z-index:2;
}

.cross{
	position : absolute;
	right : 0px;
	background: dodgerblue;
	font-size: 60px;
	border-radius : 50%;
	box-shadow : 0px 5px 0px 0px royalblue;
	text-shadow: 5px 5px 5px grey;
	color : white;
	font-weight  : bolder;
	width : 70px;
	height : 70px;
	text-align : center;
	cursor: pointer;
}

.cross:hover{
	background: tomato;
	box-shadow : 0px 5px 0px 0px yellow;
	text-shadow: 5px 5px 5px grey;
	color : white;
}

.cross:active{
	background: orange;
	box-shadow : 0px 5px 0px 0px tomato;
	text-shadow: 5px 5px 5px grey;
	color : white;
}


.menu_title {
	position : absolute;
	top : 10%;
	left : 20%;
	font-size : 90px;
	font-weight : bolder;
	text-shadow: 7px 7px 5px dodgerblue;
	box-shadow : 0px 5px 5px 0px dodgerblue;
	color : white;
	background: rgba(100,50,100,0.5);
	padding: 10px;
	border-radius: 20px;
}

.menu_btn{
	position : absolute;
	top : 40%;
	left : 40%;
	font-size : 30px;
	font-weight : bolder;
	text-shadow: 3px 3px 0px grey;
	box-shadow : 5px 5px 0px 0px orange;
	color : white;
	background: tomato;
	padding: 10px;
	cursor: pointer;
	z-index : 3;
}

.menu_btn:hover {
	text-shadow: 3px 3px 0px grey;
	box-shadow : 5px 5px 0px 0px royalblue;
	color : white;
	background: dodgerblue;
	
}

.win {
	background:green;
	box-shadow : 5px 5px 0px 0px limegreen;
}

.menu_btn:active {
	background: orange;
	box-shadow : 5px 5px 0px 0px tomato;
	text-shadow: 3px 3px 0px grey;
	color : white;
}

.rules_panel {
	position : absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background: rgba(150,1,200,0.5);
	display:none;
}

.rules {
	position : absolute;
	top : 10%;
	left : 5%;
	width : 90%;
	height : 80%;
	background : orange;
	z-index :5;
	font-size : 50px;
	font-weight : bolder;
	text-shadow: 0px 4px 0px royalblue;
	box-shadow : 0px 5px 0px 0px royalblue;
	color : white;
	text-align :center;
	border-radius: 20px;
}

.rules_content {
	position :absolute;
	font-size:20px;
	text-shadow: 0px 2px 0px royalblue;
	text-align:left;
	left:20px;	
}

.game_panel {
	position : absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background: rgba(100,200,150,0.5);
	display:none;
	font-size:90px;
	color : white;
	text-align :center;
	z-index :4;
	font-weight : bolder;
	text-shadow: 2px 4px 0px tomato;
	text-align :center;
}

.me {
	position : absolute;
	top : 70%;
	left : 40%;
	color: white;
	font-size: 20px;
	font-weight:bolder;
	text-shadow: 2px 4px 0px tomato;
	text-align :center;
}