html {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: "Roboto", sans-serif;
	font-size: 62.5%;
	font-weight: 400;
	text-align: center;
	line-height: 1;

	background-image: url("/_img/bg.jpg");
	background-size: 100% 100%;
	background-position: bottom center;
	background-repeat: no-repeat;

	background-attachment: fixed;

}

body {
	height: 100%;
	margin: 0;
	padding: 0;
	
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

nav {
	width: 100%;
	padding: 48px 0 16px 0;
	background: rgb(255,255,255);
}

section {
	width: 100%;
	padding: 96px 32px;
	color: rgb(255,255,255);
	box-sizing: border-box;
	flex-grow: 1;
}

h1 {
	font-family: "Roboto Condensed", sans-serif;
	font-size: 56pt;
	font-weight: 700;
	margin: 0;
	padding: 0;
}

p {
	max-width: 600px;
	margin: 28px auto 0 auto;
	font-size: 20pt;
	line-height: 1.4;
}

p + p {
	margin-top: 48px;
	font-size: 23pt;
	line-height: 1;
}

a {
	color: rgb(255,255,255);
	text-decoration: none;
	border-bottom: 2px rgb(255,255,255) solid;
}

footer {
	padding: 32px 0;
	font-size: 11pt;
	color: rgba(255,255,255,0.72);
}

@media only screen and (max-width: 1024px) {
	section {
		padding: 72px 32px;
	}
}

@media only screen and (max-width: 736px) {
	nav {
		padding: 24px 0 16px 0;
	}
	
	.logo {
		width: 120px;
	}
	
	section {
		padding: 48px 16px;
	}
	
	h1 {
		font-size: 28pt;
	}
	
	p {
		padding: 0 12px;
		font-size: 14pt;
	}
	
	p span::before {
		content: "\A";
		white-space: pre;
	}

	p + p {
		font-size: 16pt;
	}
	footer {
		font-size: 10pt;
	}
}

@media only screen and (max-width: 375px) {
	h1 span::before {
		content: "\A";
		white-space: pre;
	}
}