<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Mono" rel="stylesheet">

html,body {
	width: 100%;
	height: 100%;
}

.background {
  background-color: black;
  height: 2900px;
	width: 100%;
	z-index: 1;
	position: absolute;
}

.photo {
  position: absolute;
	z-index: 2;
	top: -10px;
}

	.moving {
	position: relative;
	z-index: 2;
	left: 0px;
	top: 0;
	animation: moving_frames 6s forwards;
}

	@keyframes moving_frames {
		0% { left: -150px; }
		100% { left: 0px; }
	}

.logo {
   position: absolute;
   top: 10px;
	 left: 40px;
	 transform: rotate(-13deg);
	 z-index: 2;
}

.button {
    transition-duration: 0.4s;
		color: white;
		padding: 15px;
		display:inline-block;
		z-index: 2;
		position: absolute;
		top: 50px;
		left: 900px;
		text-decoration:none;
}

.button a:link {
    background-color: none;
    color: white;
		text-decoration: none;
		padding: 15px;
		font-size: 15px;
		font-weight:bolder;
		font-family: 'Roboto Mono', sans-serif;
}

.button a:hover {
    background-color: #cebaa1;
    color: white;
		text-decoration: none;
		padding: 15px;
		font-size: 15px;
}

.button a:active {
    background-color: #cebaa1;
    color: white;
		text-decoration: none;
		padding: 15px;
		font-size: 15px;
}

.button a:visited {
	background-color: #cebaa1;
	color: white;
	text-decoration: none;
	padding: 15px;
	font-size: 15px;
}

.quote {
  font-family: 'Open Sans', sans-serif;
  font-size: 25px;
	letter-spacing: 3px;
	color: white;
  position: absolute;
  text-align:left;
  width: 450px;
	z-index: 5;
	background-color: black;
	padding: 30px;
	top: 430px;
	float: right;
}


.bike_photo p {
	position: absolute;
	z-index: 9;
	left: 50%;
	text-align: center;
	transform: translate(-250px);
	top: 1000px;
	padding: 20px;
	width: 500px;
	color: white;
	font-family: 'Roboto Mono', sans-serif;
	letter-spacing: 2px;
	font-size: 34px;
}

.about {
	position: absolute;
	z-index: 6;
	color: #bcbcbc;
	font-family: 'Roboto Mono', sans-serif;
	font-size: 30px;
	line-height: 34px;
	letter-spacing: 1px;
	text-align: center;
	top: 1200px;
	width: 700px;
	left: 50%;
	transform: translate(-350px);
}

.select1 {
	position: absolute;
	font-family: 'Roboto Mono', sans-serif;
	font-size: 20px;
	letter-spacing: 2px;
	text-align: center;
	line-height: 2.3em;
	width: 180px;
	height: 50px;
	background-color: rgba(255, 27, 21, 0.8);
	color: white;
	border-radius: 15px;
	top: 1275px;
	left: 50%;
	transform: translate(-90px);
	cursor: pointer;
	z-index: 9;
}

.select2 {
	position: absolute;
	font-family: 'Roboto Mono', sans-serif;
	font-size: 20px;
	letter-spacing: 2px;
	text-align: center;
	line-height: 2.3em;
	width: 180px;
	height: 50px;
	background-color: rgba(255, 27, 21, 0.8);
	color: white;
	border-radius: 15px;
	top: 1675px;
	left: 50%;
	transform: translate(-90px);
	cursor: pointer;
	z-index: 9;
}

.select3 {
	position: absolute;
	font-family: 'Roboto Mono', sans-serif;
	font-size: 20px;
	letter-spacing: 2px;
	text-align: center;
	line-height: 2.3em;
	width: 180px;
	height: 50px;
	background-color: rgba(255, 27, 21, 0.8);
	color: white;
	border-radius: 15px;
	top: 2075px;
	left: 50%;
	transform: translate(-90px);
	cursor: pointer;
	z-index: 9;
}

.select4 {
	position: absolute;
	font-family: 'Roboto Mono', sans-serif;
	font-size: 20px;
	letter-spacing: 2px;
	text-align: center;
	line-height: 2.3em;
	width: 180px;
	height: 50px;
	background-color: rgba(255, 27, 21, 0.8);
	color: white;
	border-radius: 15px;
	top: 2475px;
	left: 50%;
	transform: translate(-90px);
	cursor: pointer;
	z-index: 9;
}

.the_bike {
	position: absolute;
	z-index: 9;
	top: 1100px;
	left: 50%;
	transform: translate(-400px);
}

.gadgets {
	position: absolute;
	z-index: 9;
	top: 1500px;
	left: 50%;
	transform: translate(-400px);
}

.tech {
	position: absolute;
	z-index: 9;
	top: 1900px;
	left: 50%;
	transform: translate(-400px);
}

.seat {
	position: absolute;
	z-index: 9;
	top: 2300px;
	left: 50%;
	transform: translate(-400px);
}