/********** GLOBAL STYLES **********/

html, body {
    width: 100vw;
    height:100vh;
    overflow-x: hidden;
    background-color:#1f1e2a;
    background:url("Paul Proshin_Unsplash.JPG") center center #dfdee8;
    color:#dfdee8;
}
body{
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	margin: 0px;
	padding:0px;
	box-sizing: border-box;
	background: url(background.png) no-repeat top right rgba(31,30,42,.85); 
	background-size:150px 250px;
}


/*********** Typeography **********/

.content{
	max-width:900px;
	padding:20px;
	box-sizing:border-box;
	margin: auto;
}

.container{
	max-width:900px;
	margin: auto;
	box-sizing:border-box;
	padding-bottom:300px;
}


/*********** Typeography **********/

h1{
	font-size:3em;
	font-weight: normal;
}

p{
	margin:2em 0em;
}

.subheader:not(p){
	font-weight:300;
	margin-top:-1em;
	color:#9d9ab3;
}


/*********** Links & Buttons **********/

a.support, 
a.support:visited, 
a.support:hover{
	text-decoration: none;
	color:#00f6ff;
}

#button a{
	position:fixed;
	bottom:0px;
	left:0px;
	width:100%;
	box-sizing: border-box;
	padding:20px;
	text-align: center;
	background-color:#ff3d5a;
	vertical-align: middle;
	border-bottom: 0px;
}

#button img{
	height:50px;
}

/*********** Mobile **********/

@media all and (max-width: 650px) {
	body{
		background-size:25%;
		padding-top:150px;
	}
	.grid>div{
		width:25%;
		font-size: 1.5em;
		height:200px;
	}
	.grid{
		position:relative;
	}
}