body {
  /* basic styling */
  font-family: Arial,sans-serif;
  color: black;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  background-color: white;
}


/* -----  INTRO  -----  */
/* intro page banner image*/
.home{
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 10px;
  width: 1275px;
  height: auto;
}

/* button on intro page */
.start{
  position: absolute;
  top: 570px;
  left: 590px;
  background-color: white;
  color: black;
  border: 3px solid black;
}

/* -----  PAGE 1  -----  */
/* button on first question page */
.button1{
  position: absolute;
  width: 100px;
  height: 40px;
  top: 570px;
  left: 590px;
  background-color: white;
  color: black;
  border: 3px solid black;
}
/* buttons on the question 1 page, multiple choice answers*/
.button2{
  position: absolute;
  width: 200px;
  height: 100px;
  top: 160px;
  left: 535px;
  background-color: white;
  color: black;
  border: 3px solid black;
}
.button3{
  position: absolute;
  width: 200px;
  height: 100px;
  top: 270px;
  left: 535px;
  background-color: white;
  color: black;
  border: 3px solid black;
}
.button4{
  position: absolute;
  width: 200px;
  height: 100px;
  top: 380px;
  left: 535px;
  background-color: white;
  color: black;
  border: 3px solid black;
}
.button5{
  position: absolute;
  width: 200px;
  height: 100px;
  top: 490px;
  left: 535px;
  background-color: white;
  color: black;
  border: 3px solid black;
}

/* -----  PAGE 2  ----- */
/* images on the question 2 page */
.snapchat_img {
  width: 275px;
  height: auto;
}
.instagram_img {
  width: 275px;
  height: auto;
}
.facebook_img {
  width: 275px;
  height: auto;
}
.twitter_img {
  width: 275px;
  height: auto;
}
/* buttons on the question 2 page, multiple choice answers*/
.snapchat{
  position: absolute;
  width: 100px;
  height: 50px;
  top: 450px;
  left: 170px;
  background-color: white;
  color: black;
  border: 3px solid black;
}
.instagram{
  position: absolute;
  width: 100px;
  height: 50px;
  top: 450px;
  left: 450px;
  background-color: white;
  color: black;
  border: 3px solid black;
}
.facebook{
  position: absolute;
  width: 100px;
  height: 50px;
  top: 450px;
  left: 730px;
  background-color: white;
  color: black;
  border: 3px solid black;
}
.twitter{
  position: absolute;
  width: 100px;
  height: 50px;
  top: 450px;
  left: 1010px;
  background-color: white;
  color: black;
  border: 3px solid black;
}

/* -----  PAGE 3  ----- */
/* images on the question 3 page */
.eyes {
  width: 275px;
  height: auto;
}
.selfie {
  width: 275px;
  height: auto;
}
.smart {
  width: 275px;
  height: auto;
}
.waste {
  width: 275px;
  height: auto;
}
/* buttons on the question 3 page, multiple choice answers*/
.option1{
  position: absolute;
  width: 160px;
  height: 80px;
  top: 430px;
  left: 140px;
  background-color: white;
  color: black;
  border: 3px solid black;
}
.option2{
  position: absolute;
  width: 160px;
  height: 80px;
  top: 430px;
  left: 420px;
  background-color: white;
  color: black;
  border: 3px solid black;
}
.option3{
  position: absolute;
  width: 160px;
  height: 80px;
  top: 430px;
  left: 698px;
  background-color: white;
  color: black;
  border: 3px solid black;
}
.option4{
  position: absolute;
  width: 160px;
  height: 80px;
  top: 430px;
  left: 977px;
  background-color: white;
  color: black;
  border: 3px solid black;
}


/* -----  RESULTS PAGES  ----- */
/* styles for the type revealing texts, texts that are on every result pages */
#type {
  position: absolute;
  top: 150px;
  left: 150px;
}
#explanation {
  position: absolute;
  top: 230px;
  left: 155px;
}
#explanationGame {
  position: absolute;
  top: 260px;
  left: 155px;
}
#textMiddle {
  position: absolute;
  top: 10000px;;
  left: 70px;
  font-size: 38px;

}
/* exception that only appear on the page showing the date/time */
#approximately {
  position: absolute;
  top: 415px;
  left: 155px;
}

/* the hastags that are appreasing when you hover your mouse on the page : "I want to show the world who I am " type*/
#text1 {
  position: absolute;
  top: 350px;
  left: 850px;
}
#text2 {
  position: absolute;
  top: 450px;
  left: 170px;
}
#text3 {
  position: absolute;
  top: 500px;
  left: 400px;
}
#text4 {
  position: absolute;
  top: 350px;
  left: 600px;
}
#text5 {
  position: absolute;
  top: 450px;
  left: 700px;
}
#text6 {
  position: absolute;
  top: 450px;
  left: 570px;
}
#text7 {
  position: absolute;
  top: 650px;
  left: 70px;
}
#text8 {
  position: absolute;
  top: 620px;
  left: 500px;
}
#text9 {
  position: absolute;
  top: 350px;
  left: 100px;
}
#text10 {
  position: absolute;
  top: 550px;
  left: 770px;
}

/* style for the date/time appearing on the page :  "I believe everything I see on social medias" type */
#today {
  padding: 0.075em;
  font-size: 50px;
  font-weight: bold;
  line-height: 0.9;
  position: absolute;
  top: 320px;
  left: 145px;

}

/* the bottom text when you scroll down on the page : "I don't want to feel alone" type */
#puppies {
  position: absolute;
  top: 33333px;
  left: 0px;
  width: 1300px;
  height: auto;
}