html{
    height: 100%;
}

body{
	margin:0;
	padding:0;
	color: #FBFBFB;
	background-color:#F2F2F2;
	background-image:url('puzzle.svg');
	background-repeat:no-repeat;
	font-family: MozTT, sans-serif;
}

.button{
	text-align:center;
	margin:.4rem 0;
	height:2rem;
	width:12rem;
	border-radius: .2rem;
	font-size:1rem;
}

.primary{
	border: .1rem solid #C1C1C1;
	background-color: rgba(251,251,251,1)
}

.primary:focus,.primary:hover{
	background-color:#ebebeb;
}

.primary:active{
	background-color:#dadada;
}

@media screen and (orientation: portrait) {
	body{
		background-size:60%;
		background-position:100% 25%;
	}
	
	#buttons{
		width:12rem;
		position:absolute;
		top:75%;
		left:50%;
		margin:-5.6rem 0 0 -6rem;
	}
	
	#logo{
		width:80%;
		position:absolute;
		top:2%;
		left:2%;
	}
}

@media screen and (orientation: landscape) {
	body{
		background-size:48%;
		background-position:100% 93%;
	}

	#buttons{
		width:12rem;
		position:absolute;
		top:66%;
		left:28%;
		margin: -5.6rem 0 0 -6rem;
	}
	
	#logo{
		width:75%;
		position:absolute;
		top:5%;
		left:5%;
	}
}