@font-face {
  font-family: Fanwood;
  src: url(Fanwood.otf);
}

@font-face {
  font-family: OstrichSans;
  src: url(ostrich-regular-webfont.ttf);
}

html {
  background-color: rgba(160,181,172,1);
  font          : 62.5%/1.4 Fanwood, monospace, courier;
  margin          : 0;
  padding         : 0;
	height: 100%;
}

body {
  background-attachment : fixed;
  background-image    : url(background.jpg);
  background-position   : center bottom;
  background-size     : 50%;
  background-repeat   : repeat-x;
  color           : #FFF;
  font-family       : OstrichSans, "helvetica neue", helvetica, sans-serif;
  margin          : 0;
  overflow        : hidden;
  padding         : 0;
height: 100%;
}

a {
  color: rgba(160,181,172,1);
}

h1 {
  background-image    : url(logo.png);
  background-position   : center top;
  background-repeat     : no-repeat;
  background-size     : contain;
  height          : 120px;
  margin          : 20vh auto 20px;
  opacity         : .6;
  text-indent       : -99999px;
  width           : 120px;
  z-index         : 4;
}

#links {
  margin  : 0 auto;
  padding : 2em;
  width   : calc(100% - 4em);
	text-align:center;
}

#links a {
	color         : #FFF;
	margin  : 0 25px;
	opacity : .5;
	-webkit-transition: opacity 400ms ease;
	-moz-transition opacity 400ms ease;
	transition: opacity 400ms ease;
	display       : inline-block;
	font-family     : OstrichSans, "helvetica neue", helvetica, sans-serif;
	font-size       : 2em;
	height        : 25px;
	text-decoration   : none;
}

#links a.github {
	background-position   : -50px 0;
	margin-right: 2em;
}

#links a.twitter {
	background-position   : -100px 0;
}

#links a:hover {
	opacity: 1;
}

@media (max-device-width: 1100px) {
  body {
    background-size: 90%;
  }
}

@media (max-device-width: 500px) {
  body {
    background-size: 150%;
  }

	#links {
		padding: 0;
		width: 100%;
		text-align: left;
	}

	#links a {
		display: block;
		margin: 0 auto;
		text-align: center;
	}

	#links a.github {
		margin-right: 0;
	}
}