body{
	background : lightgray;
	font-family:courier;
}

.start_menu {
	position : absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	background : rgba(100,70,150,0.5);
	z-index:2;
}
.menu_title {
	position : absolute;
	top : 20%;
	left : 18%;
	font-size : 60px;
	font-weight : bolder;
	text-shadow: 3px 3px 0px cyan;
	box-shadow : 0px 5px 0px 0px cyan;
	color : white;
	background:slateblue;
	padding: 10px;
	border-radius: 5px;
}

.menu_btn{
	position : absolute;
	top : 40%;
	left : 40%;
	font-size : 40px;
	font-weight : bolder;
	text-shadow: 2px 2px 0px lightgray;
	box-shadow : 0px 5px 0px 0px cyan;
	color : white;
	background: rgba(0,50,250,0.5);
	padding: 10px;
	cursor: pointer;
	z-index : 2;
	border-radius: 5px;
}

.menu_btn:hover {
	text-shadow: 3px 3px 0px gray;
	box-shadow : 0px 5px 0px 0px lime;
	color : lightgray;
	background: seagreen;
	
}
.menu_btn:active {
	background: seagreen;
	box-shadow : 0px 0px 0px 0px tomato;
	text-shadow: 3px 3px 3px lightgray;
	color : gray;
}

.me {
	position : absolute;
	top : 70%;
	left : 40%;
	color: dodgerblue;
	font-size: 25px;
	font-weight:bolder;
	text-shadow: 2px 2px 0px lightgray;
	text-align :center;
}

.gameplay{
position:absolute;
top:50px;
}

.data {
	position:absolute;
	width:40px;
	height:40px;
	border-radius:50%;
	color:white;
	font-weight:bolder;
	font-size:18px;
	animation: spin 2s linear infinite;
	text-shadow: 2px 2px 2px black;
	border:2px yellow solid;
	z-index:1;
	text-align:center;
	cursor :pointer;
}

.connect {
	position :absolute;
	background:cyan;
	border:2px dodgerblue solid;
	height:10px;
	z-index:0;
}

.score {
	position :absolute;
	left:20%;
	width:200px;
	height:50px;
	background:rgb(160,150,160);
	box-shadow : 0px 5px 0px 0px lime;
	text-shadow: 2px 2px 2px black;
	color:white;
	z-index:3;
	border-radius:5px;
	font-size:20px;
	text-align:center;
}

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

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

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

.cross{
	position : absolute;
	right : 0px;
	background: rgba(0,50,250,0.5);
	font-size: 60px;
	border-radius : 5px;
	box-shadow : 0px 5px 0px 0px cyan;
	text-shadow: 2px 2px 0px lightgray;
	color : white;
	font-weight  : bolder;
	width : 70px;
	height : 70px;
	text-align : center;
	cursor: pointer;
}

.cross:hover{
	background: seagreen;
	box-shadow : 0px 5px 0px 0px lime;
	text-shadow: 2px 2px 0px grey;
	color : lightgray;
}

.cross:active{
	box-shadow : 0px 0px 0px 0px tomato;
	text-shadow: 2px 2px 0px lightgray;
	color : gray;
}

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

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