/* Golang at Speed */
/* Animation based on Starry Night Demo, by Chris Coyier */

html { overflow-y: scroll; }

.clear {
	clear: both;
}

@-webkit-keyframes STAR-MOVE {
	from {
		left: 0;
		top: -2000px;
	}
	to { 
		left: -10000px;
		top: 2000px;
	}
}
@-webkit-keyframes SHIP-FLY {
	from {
		left: 100px;
		top: 0px;
	}
	to { 
		left: 100%;
		top: 60%;
	}
}
@-webkit-keyframes SHIP-FLY-MOBILE {
	from {
		left: 1%;
		top: 0px;
	}
	to { 
		left: 40%;
		top: 80%;
	}
}


#background {
	/*background: url(../images/background.png) repeat 5% 5%;*/
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 180px;
	z-index: 100;

	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 200s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#midground {
	background: url(../images/midground-2.png) repeat 20% 20%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 180px;
	z-index: 200;

	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 150s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#foreground {
	background: url(../images/foreground-2.png) repeat 35% 35%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 180px;
	z-index: 300;

	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 100s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#ship {
	background:url(../images/goatspeed_v1.svg) no-repeat;
	position: absolute;
	top: 60%; left: 100%; right: 0; bottom: 0;
	width:300px;
	height:auto;
	z-index: 350;

	-webkit-animation-name: SHIP-FLY;
	-webkit-animation-duration: 30s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: 1;
}

nav{
	background-color:rgb(109, 200, 236);
}

.nav-wrapper a:link {
	color:black;
	font-size:20px;
}

.nav-wrapper a:active {
	color:black;
	font-size:20px;
}

.nav-wrapper a:visited {
	color:black;
	font-size:20px;
}

.brand-logo{
	margin-left:10px;
}

.sidenav {
	background-color:orange;
}

.sidenav a:link {
	color:white;
	font-size:20px;
}

.sidenav hr{
	margin-bottom:20px;
	border:1px solid darkorange;
}

body {
  	background-color: #262525;
	font-family: 'Roboto Slab', serif;
  	color: white;
	font-size:18px;
}

.main {
	background: rgba(0,0,0,0.5);
}

.bg-orange{
	background-color:darkorange;
	margin-bottom:50px;
	padding:20px;
}

#toc > .row > h2{
	text-align:center;
	color: white;
}

#toc > .row > p{
	color: white;
}

#toc > .row > p{
	color: white;
}

.toc {
	font-size: 30px;
	padding-left:200px!important;
}

.todo {
	color:#dddddd;
}

.toc li {
	margin-left: 50px;
	line-height:50px;
}

a:any-link{
	color:orange;
}

h1{
	font-family: 'Oswald', sans-serif;
	font-size:3em;
}

h2, h3{
	font-family: 'Oswald', sans-serif;
	color:orange;
	font-size: 2em;
}

#content{
	position: relative;
	line-height: 1.5;
	z-index: 500;

}

.go{
	color:rgb(109, 200, 236)
}

.page-footer{
	background-color:rgb(109, 200, 236);
	color:black!important;
}

.footer-copyright{
	font-size:16px;
	color:black;
}

.button {
	font-family: 'Oswald', sans-serif;
	height:70px;
	width:200px;
	background-color:orange;
	border-radius:5px;
	border:none;
	color:black;
	font-size:22px;
	margin:20px;
}

.button:hover{
	cursor:pointer;
}

.align-iframe{
	margin-left:-190px;
}

#code-examples{
	background-color: rgb(109, 200, 236);
	margin-bottom:50px;
	padding:20px;
}

#code-examples a:link, #code-examples a:hover, #code-examples  a:visited  {
	color: #ffffff!important;
}

@media only screen and (max-width: 415px) {
	#ship {
		background:url(../images/goatspeed_v1.svg) no-repeat;
		position: absolute;
		top: 80%; left: 40%; right: 0; bottom: 0;
		width:200px;
		height:auto;
		z-index: 350;
	
		-webkit-animation-name: SHIP-FLY-MOBILE;
		-webkit-animation-duration: 20s;
		-webkit-animation-timing-function: linear;
		-webkit-animation-iteration-count: 1;
	}

	#book-cover{display:none;}

	.align-iframe{
		margin-left:0;
	}

	.toc {
		font-size: 16px;
		padding-left:10px!important;
	}
	.toc li {
		margin-left: 20px;
		line-height:20px;
	}

	#code-examples p {
		font-size:12px;
	}

}