/* font */
@import url(https://fonts.googleapis.com/css?family=Nunito);

html {
  height: 100%;
  overflow: hidden; /* hides content na hindi kasya*/
}

/* creates the 3d effect */
body { 
  margin:0;
  padding:0;
	perspective: 1px;
	transform-style: preserve-3d;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  font-family: Nunito; 
}

/* design sa lahat ng h1 and paraggraph */
h1 {
   font-size: 250%
}

p {
  font-size: 100%;
  line-height: 150%;
  color: #000;
}

/* styles for every slide */
.slide {
  position: relative;
  padding: 25vh 10%;
  min-height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
	transform-style: inherit;
}

/* styles for every image */
img {
  position: absolute;
  top: 50%;
  left: 35%;
  width: 320px;
  height: 240px;
  transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
  padding: 10px;
  border-radius: 5px;
  background: rgba(240,230,220, .7);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}

/* style for every second image */
img:last-of-type {
  transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}

/* creates an overlay with a shadow effect */
.slide:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, .7);
}

/* style of the div(container) that contains the text in each slide */
.title {
  width: 45%;
  padding: 3%;
  border-radius: 5px;
  background: rgba(234, 236, 238, .7);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}

/* adjusts the layout of the title inside each slide depending if the slide is even or odd */
.slide:nth-child(2n) .title { /* even-numbered slides */
  margin-left: 0;
  margin-right: auto;
}

.slide:nth-child(2n+1) .title { /* odd-numbered slides */
  margin-left: auto;
  margin-right: 0;
}

/* ensures the background image is centered and cover the entire area*/
.slide, .slide:before {
  background: 50% 50% / cover;  
}

/* style for the beginning title */
.main-title {
  font-size: 2.75em; 
  font-family: 'Roboto', sans-serif;
  color: #000;
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);

}

.header {
  text-align: center;
  font-size: 175%;
  color: #fff;
  text-shadow: 0 2px 2px #000;
}


/* style of the background-image for each slide */
#title {
  background-image: url("../images/growingup.png");  /* picture of me cut outs from kid to adult */
  z-index:2;
}

#title h1 {
 transform: translateZ(.25px) scale(.75);
 transform-origin: 50% 100%;

}

#slide1:before {
  background-image: url("../images/intropic.png");
  transform: translateZ(-1px) scale(2);
}

#slide2 {
  background-image: url("../images/family.png");
  z-index:2;
}

#slide3:before {
  background-image: url("../images/hobbies.png");
  transform: translateZ(-1px) scale(2);
}

#slide4 {
  background-image: url("../images/bpcon.png"); 
  z-index: 2;
}

#slide5:before {
  background-image: url("../images/genesis.png");
  transform: translateZ(-1px) scale(2);
}

#slide6 {
  background-image: url("../images/journ.png"); 
  z-index: 2;
}


#slide7 {
  background-image: url("../images/letter.png");
  z-index: 2;
}

#slide8:before {
  background-image: url("../images/tb.png");
  transform: translateZ(-1px) scale(2);
}

#slide9 {
  background-image: url("../images/motivation.png");
  z-index: 2;
}

#slide10 {
  background-image: url("../images/end.png");
}

#slide11 {
  background: #000;
}