@font-face {
	font-family: "Benny Blanco";
	src:url(../fonts/bennyblanco.woff2);
	font-weight: normal;
	font-style: normal;
}

html, body, #container, .hero, .hero-scroll {
	height: 100%;
}

.hero {
	text-align: center;
	background: url(../assets/scrollertile.jpg) repeat-x 45%;
	background-size: cover;
}

.hero-scroll {
	position: absolute;
	width: 40vw;
}

.left {
	left: 0;
}

.right {
	right: 0;
}

.hero-strip {
	position: absolute;
	bottom: 6vw;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

.hero-strip-inner {
	padding: 2vw;
}

h1 {
	margin: 0;
	font: 10vw "Benny Blanco", sans-serif;
}

.yellow {
	color: #ff0;
}

.blue {
	color: #09f;
}

.icon {
	display: block;
	margin: 1vw auto;
	padding: 1vw;
	width: 10vw;
	height: 10vw;
	border-radius: 50%;
	transition: background-color 0.5s;
	transition: filter 0.5s;
}

.icon:hover {
	background-color: #000;
	filter: invert(1);
}

.icon-inner {
	width: 100%;
	height: 100%;
	background-image: url(../assets/github.png);
	background-size: contain;
}