#main {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
}

#parallaxContainerAlt {
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
  height: 512px;
  width: 512px;
  border: solid 1px lightgray;
  perspective: 800px;
}

#parallaxObjectAlt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate3d(0, 0, 0, 45deg);
  transform-style: preserve-3d;
  height: 80%;
  width: 80%;
  background: linear-gradient(135deg,#FF0000,#FFCC00);
  border-radius: 4px;
  cursor: pointer;
}

#parallaxObjectAlt:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  transform: translateZ(-50px);
  filter: blur(10px);
  background: rgba(0,0,0,0.5);
}

#parallaxObjectalt * {
  pointer-events: none;
}


#parallaxObjectAlt h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(75px);
  display: inline-block;
  color: white;
  font-family: 'Montserrat', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 300;
  margin: 0;
}

h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(0%, -50%);
  font-family: 'Montserrat', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 100;
  font-size: 64px;
  margin: 0;
}

h2 a {
  text-decoration: none;
  outline: none;
}

#debug {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: #EEEEEE;
  padding: 8px;
  border-radius: 4px;
  font-family: monospace;
  color: black;
  opacity: 0.5;
  transition: all 200ms;
}

#debug:hover {
  background: #222222;
  color: white;
  opacity: 1;
}