/* CSS Document */
* {
  margin:0;
  padding:0;
}
body, html {
  height: 100%;
  font-family: 'Cinzel', serif;
} 

h1 {
  position: absolute;
  bottom: 20px;
  left: 10px;
  color: #050e09;
  font-weight: 400;
  font-size: 24px;
  z-index: 1;
}

/* Parallax base styles
  --------------------------------------------- */

.parallax {
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-perspective: 1px;
  perspective: 1px;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.parallax__layer--base {
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

.parallax__layer--back {
  -webkit-transform: translateZ(-1px) scale(2);
          transform: translateZ(-1px) scale(2);
}

.parallax__layer--deep {
  -webkit-transform: translateZ(-2px) scale(3);
          transform: translateZ(-2px) scale(3);
}

/* add some padding to force scrollbars */
.parallax__layer {
  
  pointer-events: none;
}

/* Art */
body {
  background: -webkit-linear-gradient(#1d6140 0%, #3eb379 100%);
  background: linear-gradient(#1d6140 0%, #3eb379 100%);
}
.background {
  position: absolute;
  display: block;
}
.parallax__layer--deep {
  padding: 0 0;
}
.parallax__layer--deep .background {
 
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;  
  background-repeat: no-repeat;
  background-position: top center;  
  background-size: 512px 498px;
  background-image:   url('img/mare_in_the_moon_vector_by_speedingturtle-d49dynr.png');

}
.parallax__layer--base{
  padding: 0 0;
}
.parallax__layer--base .background {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url('img/building.png') repeat-x bottom 0px center;
  background-size: 800px 400px;

}