#main-container {
  width: 1024px;
  height: 768px;
  margin: 0 auto;
  overflow: hidden; 
  position: relative;
} 


.pages {
  width: 1024px;
  height: 768px;
}

/**
 * the > symbol means apply this style to TOP-LEVEL (first-child) div's of
 * the container .pages i.e. all the individual pages.  Div's INSIDE of those
 * individual pages don't get passed this rule because of the >
 */
.pages > div {
  display: none; /* hide the page */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000; /* helps items animate without error in mobile webkit browsers */
}

.pages > div.current {
  display: block; /* turn the page visible if this is the current page */
}

/* ===========================================================================
 *
 *   Some quick general styles for the purpose of this example.  
 *   You can overwrite these with styles of your own.
 */

.button {
  cursor: pointer;
  padding: 0.5em 2em;
  display: inline-block;
  border-radius: 10px;
  position: absolute;
  width: auto;
  height: auto;
}

/**
 *  Below this point is where you would add your own css style rules for 
 *  each of your pages.  The example has been set up with 5 pages - an 
 *  intro, menu page and 3 content pages.  You should alter this to fit 
 *  your interactive, for instance, you might decide not to have a menu page.
 */

/* =========================================================================== *\

	INTRO PAGE

\* =========================================================================== */

.page-intro {
  height: 768px;
  position: relative;
  overflow: hidden;
}

.ufo {
  display: block;
  position: absolute;
  width:250px; 
  top: 35%;
  left: -250px; 
  z-index: 4;
}

.ufo-image {
  position: absolute;
  z-index: 2;
}

.beam {
  display: block;
  position: absolute;
  width: 50px;
  height: 150px;
  background: #73f7b3;
  left: 100px; 
  top: 125px;
  transform: scaleY(0);
  transition: transform 0.3s;
  z-index: 1;
}

.start-btn {
  display: none;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 450px;
}


.background {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================================== *\

	MENU PAGE

\* =========================================================================== */

.page-menu {
  height: 768px;
}

.background {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================================== *\

	OTHER PAGES

\* =========================================================================== */

/* PAGE 1 */
.page-yourPageID1 {
  height: 768px;
}

.p2-button, .p3-button, .p4-button, .p5-button, .p6-button, .p7-button, .p8-button, .p9-button, .p10-button{
  position: absolute;
  top:475px;
  left: 400px;
}

.yes-button {
  position: absolute;
  top: 500px;
  left: 500px;
}

.no-button {
  position: absolute;
  top: 500px;
  left: 350px;
}

.alien {
  position: absolute;
  right: 4em;
  bottom: -2em;
}

.yes-next-button {
  position: absolute;
  top: 500px;
  left: 400px;
}

.p1-speech, .yes-speech, .p2-speech, .p9-speech, .p11-speech {
  position: absolute;
  bottom: 18em;
  right: 16em;
  z-index: 2;
  display: flex;
}


/*PAGE 2 */

.page-yourPageID2 {
  height: 768px;
}

.p2-button {
  display: none;
}

.drag-me-p2, .drag-me-p3 {
  position: absolute;
  width: 90px;
  height: 25px;
  padding: 20px;
  background-color: white;
  color: black;
  z-index: 10;
  
}

#p2-container, #p3-container, #p5-container, #p6-container, #p7-container, #p8-container, #p10-container  {
  position: absolute;
  display: flex;
  font-family: "oso-sans";
  width: 90%; 
  height: 400px; 
  border: 2px; 
  padding: 5px;
  left: 3.75%;
  top: 5%;
  flex-direction: row;
  align-items: flex-end;
}

.target-p2, .target-p3, .target-p5, .target-p6, .target-p7, .target-p8 {
  width: 90px;
  height: 25px;
  padding: 20px;
  border: 4px solid white;
}

.target-nucleus-p2{
	position: absolute;
	left: 662px;
	top: 50px;
}

.target-cytoplasm-p2{
	position: absolute;
	left: 15px;
	top: 145px;
}

.target-cell-membrane-p2{
	position: absolute;
	right: 22px;
	top: 300px;
}

.target-mitochondria-p2{
	position: absolute;
	left: 150px;
	top: 300px;
}

/*PAGE 3*/

.page-yourPageID3 {
  height: 768px;
}

.target-nucleus-p3 {
  position: absolute;
  right: 662px;
  top: 85px;
}

.target-cytoplasm-p3 {
  position: absolute;
  top: 100px;
  right: 113px;
}

.target-cell-membrane-p3 {
  position: absolute;
  bottom: 50px;
  left: 108px; 
}

.target-mitochondria-p3 {
  position: absolute;
  top: 185px;
  left: 126px;
}

.target-cell-wall-p3 {
  position: absolute;
  top: 17px;
  right: 126px;
}

.target-vacuole-p3 {
  position: absolute;
  top: 210px;
  right: 72px;
}

.target-chloroplasts-p3 {
  position: absolute;
  bottom: 25px;
  right: 115px; 
}

.p3-button{
  display: none;
}

/*PAGE 5*/

.page-yourPageID5 {
  height: 768px;
}


.drag-me-p5, .drag-me-p6, .drag-me-p7, .drag-me-p8 {
  position: relative;
  width: 90px;
  height: 25px;
  padding: 20px;
  background-color: white;
  text-align: center;
  justify-content: center;
  color: black;
  margin: 1em;
}

.p5-button {
  display: none;
} 

.target-light-p5 {
  position: absolute;
  top: 15px;
  right: 380px;
}

.target-sun-p5 {
  position: absolute;
  top: 90px;
  right: 490px;
}

/*Page 6 */

.page-yourPageID6 {
  height: 768px;
}

.target-hydrogen-p6 {
  position: absolute;
  top: 70px;
  right: 325px;
}

.target-oxygen-p6 {
  position: absolute;
  top: 70px;
  right: 110px;
}

.p6-button {
  display: none;
}

/*Page 7 */

.page-yourpageID7 {
  height: 768px;
}

.p7-button {
  display: none;
}

.target-oxygen-p7 {
  position: absolute;
  top: 90px;
  right: 530px;
}

/*Page 8 */

.page-yourPageID8 {
  height: 768px;
}

.p8-button {
  display: none;
}

.target-hydrogen-p8 {
  position: absolute;
  top: 10px;
  right: 330px;
}

.target-carbon-dioxide-p8 {
  position: absolute;
  top: 80px;
  right: 475px;
}

/*Page 9 */

.page-yourPageID9 {
  height: 768px;
}

/* PAGE 10 */

.page-yourPageID10 {
  height: 768px;
}

.p10-button {
  display: none;
}

.tree-p10 {
  position: absolute;
  top: 30px;
  right: 10px;
  z-index: 4;
}

.seaweed-p10 {
  position: absolute;
  top: 250px;
  right: 30px;
  z-index: 1;
}

.flower-p10 {
  position: absolute;
  top: 50px;
  right: 180px;
  z-index: 3;
}

.cactus-p10 {
  position: absolute;
  top: 230px;
  right: 170px;
  z-index: 2;
}

.target-p10 {
  width: 235px;
  height: 80px;
  padding: 20px;
  border: 4px solid white;
  border-radius: 1em;
}

.target-tree-p10 {
  position: absolute;
  bottom: 48px;
  left: 25px;
}

.target-seaweed-p10 {
  position: absolute;
  top: 70px;
  left: 22px;
}

.target-flower-p10 {
  position: absolute;
  top: 71px;
  right: 295px;
}

.target-cactus-p10 {
  position: absolute;
  bottom: 48px;
  right: 295px;
}

.end-button {
  position: absolute;
  top: 475px;
  left: 400px;
  height: 120px;
  width: 220px;
}
/* =========================================================================== *\

	PERSISTENT CONTAINER - used for anything you want to stay visible on the 
	screen across all pages

\* =========================================================================== */

.persistent-stuff {
  position: absolute;
  top: 25px;
  left: 25px;
}


/* =========================================================================== *\

	TRANSITION CODE

	Leave this alone if you are happy with either fade or push transitions 
	between pages.  If you want faster transitions you could alter the 1s 
	timing in the .in, .out class rules below

\* =========================================================================== */

/**
 * The transition function in script.js adds the following classes dynamically 
 * to the incoming and outgoing pages.  Adding the in, .out classes to the pages 
 * is what sets up the animation. A further class is added (e.g. .push-left) 
 * depending on the type of animation chosen.  It is this class addition that 
 * starts the animation running
 */

.in,
.out {
  animation-timing-function: ease-in-out;
  animation-duration: 1s;
}

.push-left.out {
  animation-name: outToLeft;
}

.push-left.in {
  animation-name: inFromRight;
}

.push-right.out {
  animation-name: outToRight;
}

.push-right.in {
  animation-name: inFromLeft;
}

.fade.out {
  animation-name: fadeOut;
}

.fade.in {
  animation-name: fadeIn;
}

@keyframes outToLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes outToRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes inFromRight {
  from {
    transform: translateX(1024px);
  }
  to {
    transform: translateX(0px);
  }
}

@keyframes inFromLeft {
  from {
    transform: translateX(-1024px);
  }
  to {
    transform: translateX(0px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}