body {
  margin: 0%; /* This line makes the navbar fill the entire width of the screen. */
  font-size: 2.0vw;
  font-family: Verdana, Tahoma, sans-serif;
  color: #000000;
  background-color: #fffafa;
}

ul {
  list-style-type: none;
  padding: 0%;
  border-style: none;
  margin: 0%;
  overflow: hidden;

  /* The 3 lines below make the navbar sticky. */
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0%;
}

li {
  display: inline-block; /* Useful for aligning navbar items horizontally. Full browser support starting from 2003 to 2015. */
  vertical-align: middle; /* When used with display: inline-block, this can center images vertically. Full browser support starting from 2000 to 2015. */
  text-align: center;
  padding-top: 0.5%;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

#navbar {
  background-color: #A6FF4F; /* Good background color for the navbar. */
  padding: 0.5%;
}



#logo {
  max-width: 33%;
  height: auto;
}

#scroll {
  max-width: 33%;
  height: auto;
}

#gifts {
  max-width: 30%;
  height: auto;
}



#logo_pic {
  max-width: 100%;
  height: auto;
}

#scroll_pic {
  max-width: 90%;
  height: auto;
}

#gifts_pic {
  max-width: 47%;
  height: auto;
}



/* The code below is a test to see the centering of the navbar items. */
/*
#logo {
  background-color: yellow;
}

#scroll {
  background-color: pink;
}

#gifts {
  background-color: purple;
}
*/
/* The code above is a test to see the centering of the navbar items. */



/* The code below is for all hover events. */

#gifts_pic:hover {
  box-shadow: 0px 0px 4px 4px #80ffff;
  background-color: #80ffff;
}

#book_1_cover:hover {
  box-shadow: 0px 0px 8px 8px #80ffff;
}

.get_the_book_pic:hover {
  box-shadow: 0px 0px 4px 4px #80ffff;
  background-color: #80ffff;
}

#newsletter_pic:hover {
  box-shadow: 0px 0px 4px 4px #80ffff;
  background-color: #80ffff;
}

.link:hover {
  box-shadow: 0px 0px 4px 4px #80ffff;
  background-color: #80ffff;
}

#special_message:hover {
  background-color: #fffafa;
}

/* The code above is for all hover events. */



#greato_universe_pic {
  max-width: 100%;
  height: auto;
}

#predict_the_future {
  display: flex; /* Do not use this with navbar images because this causes distortion on older phone browsers. - Full support in most browsers starting from 2013 to 2015. */
  justify-content: center; /* The justify-content property works together with display: flex to center text horizontally inside a container. - Full support in most browsers starting from 2012 to 2015. */
}

.blurb {
  padding-left: 10%;
  padding-right: 10%;
}

#book_1_cover {
  max-width: 30%;
  height: auto;
  border-style: solid;
  border-color: #000000;
  border-width: 2px; /* The border-width should be in px so it stays the same width on every screen size. */

  /* The 3 lines below center the image. Note that it cannot be centered if the width is set to 100%. These 3 lines have good browser support start dates. */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.get_the_book_pic {
  max-width: 12%;
  height: auto;

  /* The 3 lines below center the image. Note that it cannot be centered if the width is set to 100%. These 3 lines have good browser support start dates. */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#shirts_mugs {
  text-align: center;
  font-weight: bold;
  color: #ff0000;
}

#instagram {
  text-align: center;
  font-weight: bold;
}

#about_the_book {
  text-align: center;
  font-weight: bold;
}

#book_1_description {
  display: flex; /* Do not use this with navbar images because this causes distortion on older phone browsers. - Full support in most browsers starting from 2013 to 2015. */
  justify-content: center; /* The justify-content property works together with display: flex to center text horizontally inside a container. - Full support in most browsers starting from 2012 to 2015. */
}

#author_bio_box {
  background-color: #F0E68C;
  padding: 3%;
}

#author_bio1 {
  text-align: center;
  font-weight: bold;
}

#author_bio2 {
  display: flex; /* Do not use this with navbar images because this causes distortion on older phone browsers. - Full support in most browsers starting from 2013 to 2015. */
  justify-content: center; /* The justify-content property works together with display: flex to center text horizontally inside a container. - Full support in most browsers starting from 2012 to 2015. */
}

#ai {
  text-align: center;
  font-weight: bold;
}

#newsletter_pic {
  max-width: 17%;
  height: auto;

  /* The 3 lines below center the image. Note that it cannot be centered if the width is set to 100%. These 3 lines have good browser support start dates. */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#special_message {
  background-color: #ffd700; /* This is the color gold. */
  padding: 5%;
  margin: 15%;
  text-align: center;
  font-weight: bold;
  color: #ff0000;
  /* I coded the text color for the changing special message in the html file. */
}

#copyright {
  background-color: #A6FF4F; /* This background color matches the navbar. */
  margin: 0%; /* This line makes the footer fill the entire width of the screen. */
  padding: 5%;
  text-align: center;
}



/* The code below makes this website responsive, and only applies to phones. THIS SECTION OF CODE MUST ALWAYS BE ON THE BOTTOM OF THIS FILE! */

@media screen and (max-width: 600px) {

  #logo {
    display: none; /* This line makes the logo disappear on phones. */
  }

  #scroll {
    max-width: 60%;
    height: auto;
    padding-left: 4%;
  }

  #gifts {
    max-width: 34%;
    height: auto;
  }

  #scroll_pic {
    max-width: 100%;
    height: auto;
  }

  #gifts_pic {
    max-width: 70%;
    height: auto;
  }

  body {
    font-size: 3vw;
  }

  #book_1_cover {
    max-width: 90%;
  }

  .get_the_book_pic {
    max-width: 22%;
  }

  #newsletter_pic {
    max-width: 32%;
  }

}

/* The code above makes this website responsive, and only applies to phones. THIS SECTION OF CODE MUST ALWAYS BE ON THE BOTTOM OF THIS FILE! */