html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

section {
  margin: 0;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #C0B3A0;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.paralax {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("https://i.imgur.com/aUhsJQv.jpg");
  background-size: cover;
  background-position: center;
}

.paralax .layer {
  position: absolute;
  width: 400%;
}

.paralax .foreground {
  height: 50%;
  bottom: 0;
  background: url("https://i.imgur.com/8zJY67y.png") repeat-x;
  background-size: 25% 100%;
  animation: slideshow 30s linear infinite;
}

.paralax .hills {
  height: 40%;
  bottom: 15%;
  background: url("https://www.makersofmilkshakes.com/usa/contactslider/img/hills.png") repeat-x;
  background-size: 25% 100%;
  animation: slideshow 60s linear infinite;
}

.paralax .rocks1 {
  height: 35%;
  bottom: 25%;
  background: url("https://i.imgur.com/quKGwyQ.png") repeat-x;
  background-size: 25% 100%;
  animation: slideshow 120s linear infinite;
}

.paralax .rocks2 {
  height: 40%;
  bottom: 15%;
  background: url("https://i.imgur.com/g3gfYTB.png") repeat-x;
  background-size: 25% 100%;
  animation: slideshow 240s linear infinite;
}

@keyframes slideshow {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes dayToNight {
  0% {
    -webkit-filter: hue-rotate(0deg) brightness(1);
    filter: hue-rotate(0deg) brightness(1);
  }
  50% {
    -webkit-filter: hue-rotate(180deg) brightness(0.1);
    filter: hue-rotate(180deg) brightness(0.1);
  }
  100% {
    -webkit-filter: hue-rotate(0deg) brightness(1);
    filter: hue-rotate(0deg) brightness(1);
  }
}
/**	
* Nonatomic Branding
*/
#link {
  font-family: 'Roboto', sans-serif;
  position: fixed;
  bottom: 5%;
  width: 100%;
  text-align: center;
}

.img-url {
  text-decoration: none;
}

.url {
  opacity: 0.5;
  text-decoration: none;
}

a:link {
  color: white;
}

a:visited {
  color: white;
}

a:hover {
  color: purple;
}

a:active {
  color: white;
}

#small-logo {
  width: 30px;
  transform: translate(-10px, 12px);
  opacity: 1;
}

/**
* Versions
*/
#versions {
  font-family: 'Roboto', sans-serif;
  position: fixed;
  top: 5%;
  width: 100%;
  text-align: center;
}

.url-highlighted {
  opacity: 1;
  text-decoration: none;
}

.url-normal {
  opacity: 0.5;
  text-decoration: none;
}


.bike-1,
.bike-2 {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/bike.png) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 100px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 75px;
  animation: parallax_bike linear 10s infinite both;
}

.bike-2 {
  animation: parallax_bike linear 15s infinite both;
}

@keyframes parallax_bike {
  0% {
    background-position: -300px 100%;
  }
  100% {
    background-position: 2000px 100%;
  }
}