$scrub: #C0B3A0;
$dayTime: true;
$dayDuration: 120s;
$foregroundDuration: 30s;
$hillsDuration: 60s;
$rocks1Duration: 120s;
$rocks2Duration: 240s;

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

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

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

.paralax{
  position:absolute;
  width:100%;
  height:100%;
  overflow:hidden;
  background:url("http://www.testomic.com/public/codepen-assets/img/paralax/background.jpg");
  background-size:cover;
  background-position: center; 
}

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

.paralax .foreground{
  height:50%;           
  bottom:0; background:url("http://www.testomic.com/public/codepen-assets/img/paralax/foreground.png") repeat-x;
  background-size: 25% 100%;
  animation: slideshow $foregroundDuration linear infinite;
}

.paralax .hills{
  height:40%;           
  bottom:15%; background:url("http://www.testomic.com/public/codepen-assets/img/paralax/hills.png") repeat-x;
  background-size: 25% 100%;
  animation: slideshow $hillsDuration linear infinite;
}

.paralax .rocks1{
  height:35%;           
  bottom:25%; background:url("http://www.testomic.com/public/codepen-assets/img/paralax/rocks1.png") repeat-x;
  background-size: 25% 100%;
  animation: slideshow $rocks1Duration linear infinite;
}

.paralax .rocks2{
  height:40%;           
  bottom:15%; background:url("http://www.testomic.com/public/codepen-assets/img/paralax/rocks2.png") repeat-x;
  background-size: 25% 100%;
  animation: slideshow $rocks2Duration 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;
}