/* security.fileuri.strict_origin_policy false */

@font-face {
	font-family: Roboto;
	src: url(Roboto-Thin.ttf);
}

body {
	background: url(back.jpg) center fixed;
	background-size: cover;
	box-sizing: border-box;
	color: white;
	font-family: Roboto;
	text-align: center;
	height: 100vh;
	padding: 1em 0 2em 0;
	overflow: hidden;
}

@media screen and (orientation: landscape) {
	body { font-size: 1.7vw; }
}

@media screen and (orientation: portrait) {
	body { font-size: 2.5vh; }
	footer { flex-direction: column; }
	div { display: none; }
}

article {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

header, footer { display: flex; align-items: center; }

header { justify-content: space-between; }

footer { justify-content: space-evenly; }

a {
	color: inherit;
	margin: 1em;
	opacity: .7;
	text-decoration: none;
	transition: .5s ease-out;
}

a:hover {
	opacity: 1;
	transform: scale(1.1);
}

a b {
	font-size: 2.5em;
	font-weight: inherit;
}

a:hover b { text-shadow: 0 0 .1em white; }

a div {
	opacity: 0;
	transition: .5s ease-out;
}

a:hover div { opacity: .6; }

img { height: 1.8em }