body, html{
	width:100%;
	height:auto;
	margin:0;
	padding:0;
	background: #f1f1f1;
	font-family:sans-serif;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	background: url(bg.jpg) no-repeat center center fixed; 
	 background-size: cover;
}

body{
	
}

.container{
	 width: 100%;
  position:absolute;
  top:5%;
transform: translate(-50%, -50%)
color:black;
text-align:center;
text-transform:uppercase;
}

.container h1{
font-size:72px;
letter-spacing:0.2m;
}

.container h1 span{
	border:10px solid white;
	padding:6px 14px;
	display:inline-block;
}

.des{
	margin:20px;
	display:block;
	font-size:26px;
	text-shadow:0 0 10px black;
}

.btn{
	color:#313131;
	padding:10px 24px;
	font-size:20px;
	text-decoration:none;
	background:#f1f1f1;
	border-radius:8px;
	transition:0.3sall;
}

.btn:hover{
	opacity:0.8;
}

.footer{
  width: 100%;
  position:absolute;
  bottom:0;
  color:white;
text-align:center;
font-size: 0.8em;
}

@media only screen and (max-width:800px) {
  /* For tablets: */
  .container h1{
	font-size:40px;
	letter-spacing:0.2m;
	}
	.des{
	font-size:30px;
	}
	.footer{
	font-size:12px;
	}
}
@media only screen and (max-width:500px) {
  /* For mobile phones: */
  .container h1{
	font-size:24px;
	}
	.des{
	font-size:14px;
	}
	.footer{
	font-size:10px;
	}
}