/*Add font style in web page body*/
*{
	font-family: arial;
}

body{
	background-image: url("https://w0.peakpx.com/wallpaper/327/438/HD-wallpaper-kids-background-for-kids-happy-students.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	
}

p{
	font-size: 13px;
	margin: 0;
}
h2{
	color: #8E44AD;
}

.card {
  /* Add shadows to create the "card" effect */
  margin: 5% 35% 0 35%;
  padding: 25px;
  background-color: #EAEDED;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
  padding: 2px 16px;
}
/*Add textbox style*/
.textbox{
	margin-bottom: 25px;
	padding: 5px;
	border: 0;
	background-color: #EAEDED;
	border-bottom: 2px solid #8E44AD;
	font-size: 15px;
}
/*Add user img style*/
.User_img{
	width: 200px;
	height: 200px;
}

select{
	width: 50%;
	text-align: center;
	height: 5vh;
	border-radius: 10px;
}
/*Add style for sign in button */
.btn_Next{
	margin-top: 15px;
	width: 150px;
	border:0;
	background-color: #3498DB;
	color: #fff;
	padding: 10px 25px 10px 25px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
/*On mouse-over, add a deeper shadow*/
.btn_Next:hover{
	font-size: 15px;
	font-weight: bold;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3);
	background-color: #2874A6;
}
/*Add style for sign in button */
.btn_signin{
	margin-top: 15px;
	width: 150px;
	border:0;
	background-color: #2ECC71;
	color: #fff;
	padding: 10px 25px 10px 25px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
/*On mouse-over, add a deeper shadow*/
.btn_signin:hover{
	font-size: 15px;
	font-weight: bold;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3);
	background-color: #239B56;
}
/*Add style for sign in button */
.btn_clear{
	width: 150px;
	border:0;
	background-color: #E74C3C;
	color: #fff;
	padding: 10px 25px 10px 25px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
/*On mouse-over, add a deeper shadow*/
.btn_clear:hover{
	font-size: 15px;
	font-weight: bold;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3);
	background-color: #B03A2E;
}