@charset "utf-8";
body{
	align-items:stretch; -webkit-align-items:stretch;
	background-blend-mode:multiply;/*Não possui suporte para ie até onde sei*/
	background-image:
		linear-gradient(
			to right top, 
			red,
			blue
		),	
	url(playing-games-on-playstation-4-picjumbo-com.jpg);
	background-size:cover;	-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover;
	display:grid;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	grid-template-columns:1fr;
	grid-template-rows:auto;
	height:100vh;
	margin:0;
	width:100%;}

	.box{
		background:#191919;
		border-radius:12px; -webkit-border-radius:12px; -moz-border-radius:12px;
		left:50%;		
		padding:40px;
		position:absolute;
		top:50%;		
		transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%);		
		text-align:center;
		width:300px;}

		.box h1{
			color:white;
			font-weight:500;
			text-transform:uppercase;}

		.box input[type="text"],.box input[type="password"]{
			background:none;
			border:2px solid #3498db;
			border-radius:24px; -webkit-border-radius:24px; -moz-border-radius:24px;
			color:white;
			display:block;
			margin:20px auto;
			outline:none;
			padding:14px 10px;
			text-align:center;
			transition:0.25s; -webkit-transition:0.25s; -moz-transition:0.25s; -o-transition:0.25s;
			width:200px;}

		.box input[type="text"]:focus,.box input[type="password"]:focus{
			border-color:#2ecc71;
			width:280px;}

		.box input[type="button"]{
			background:none;
			border:2px solid #2ecc71;
			border-radius:24px; -webkit-border-radius:24px; -moz-border-radius:24px;
			color:white;
			cursor:pointer;
			display:block;			
			margin:20px auto;
			outline:none;
			padding:14px 40px;
			text-align:center;
			transition:0.25s; -webkit-transition:0.25s; -moz-transition:0.25s; -o-transition:0.25s;}

		.box input[type="button"]:hover{
			background:#2ecc71;}