@charset "utf-8";
/* CSS Document */
*{
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	margin: 0;
	padding: 0;
}
body{
	background-image: url("../img/background.jpg");
}
.button{
	padding: 15px;
	border: none;
	font-size: 20px;
}
.number{
	height: 50px;
	width:50px;
	border: 1px solid #242424;
	border-radius: 3px;
	font-size: 25px;
}

/*defin center*/
.middle{
	margin: 0 auto;
}
.center{
	margin: 0 auto;
}
.above{
	width: 45%;
	background-color: #F5F2F3;
	padding: 4% 0;
	margin: auto;
	box-shadow: 0px 0px 30px 5px #ccc;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translatex(-50%) translateY(-50%);
	text-align: center;
	
}
#actiontwo input{
	margin: 0 0 15px 0;
}
#actiontwo container{
	font-size: 35px;
}
#actiontwo .button{
	background-color: #182DCF;
}
#actiontwo .button:hover{
	background-color: #384CE7;
}
/*text styling*/
h1{
	text-transform: uppercase;
    text-align: center;
    font-size: 45px;
    margin: 40px 0 0 0;
    color: #304056;
    text-shadow: 0px 0px 10px #fff;
}
p{
	margin: 0 0 15px;
	font-size: 25px;
}
.output{
	text-transform: uppercase;
	font-size: 55px;
}
#action{
	margin-bottom: 50px;
}
.new{
	color: #182DCF!important;
	font-size: 45px;
}
input{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/*mobile*/
@media only screen and (max-width: 850px) {
	.above{
		width: 90%;
		padding: 12% 0;
	}
}
@media only screen and (max-width: 460px) {
	p{
		font-size: 22px;
	}
	.output{
		font-size: 45px;
	}
	.button{
		font-size: 20px;
	}
	h1{
		font-size: 30px;
		margin-top: 10px;
	}
	.above{
		padding: 8% 0;
		margin-top: ;
	}
	 .button{
		transform: scale(0.8);
	}
}