@charset "utf-8";
/* CSS Document */
body
{
	direction: rtl;
	background-color: #e2e2e2;
	margin: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	color: #888;
	justify-content: center;
	align-items: center;
}
.box
{
	background-color: #e2e2e2;
	width: 500px;
	height: 600px;
	box-shadow: 8px 8px 16px #c4c4c4,
		-8px -8px 16px #f2f2f2;
	border-radius: 15;
}
.box h1{
    padding-top:50px;
	text-align: center;
	text-transform: uppercase;
	color: #888;
	text-shadow: 3px 3px 6px #c4c4c4,
		-3px -3px 6px #f2f2f2;
}
.box h4{
	text-align: center;
	text-transform: capitalize;
	font-weight: 100;
	color: #555;

}
.fields
{
	width: 90%;
	margin: 70px 20px;
}
.fields input
{
	color: #888;
	width: 100%;
	height: 40px;
	padding-right: 10px;
	border-radius: 24px;
	margin: 20px 20px;
	border: none;
	background: none;
	outline: none;
	box-shadow:inset 5px 5px 7px #c4c4c4,
		-5px -5px 7px #f2f2f2;
	
}
.fields .result input
{
	
	color: #888;
	width: 45px;
	height: 40px;
	padding-right: 10px;
	border-radius: 24px;
	margin: 20px 20px;
	border: none;
	background: none;
	outline: none;
	font-size: 20px;
	box-shadow:inset 5px 5px 7px #c4c4c4,
		-5px -5px 7px #f2f2f2;
	
}
.form-button button{
	width: 90%;
	height: 40px;
	border-radius: 35px;
	border: none;
	outline: none;
	margin:0px 20px 40px 20px ;
	background-color: #959595;
	box-shadow: 2px 2px 4px #c4c4c4,
		-2px -2px 4px #f2f2f2;
	transition: all 0.35s;
}
.form-button button:hover{
	background-color: #1ba2ee;
}
.form-button button{
	background-color: #82BFF7;
}
.link{
	text-align: center;
	font-family: sans-serif;
}
.link a{
	color: #555;
	text-decoration: none;
}
.link a:hover{
	color: #888;
	text-shadow: 1px 1px 2px #f2f2f2,
		-1px -1px 2px #c4c4c4;
}

/*Responsive*/

@media only screen and (max-width: 600px) {
    body
    {
        
        
    }
  .box {
    width: 100%;
  }
	
	.fields
	{
		width: 300px;
		margin: 70px 20px;
	}
	.fields .result input
    {
    	
    	
    	width: 25px;
    	height: 20px;
    	padding-right: 5px;
    	border-radius: 24px;
    	margin: 20px 5px;
    	
    }
}