.background-sky {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: top center;
  background-image: url(images/blue-tile_bcg.png);
  background-repeat: repeat-x;
  z-index: 0; }

.background-grass {
  background-position: bottom center;
  background-image: url(images/grass-tile_bcg.png);
  background-repeat: repeat-x; }

#title-bottom div {
  background-image: url(images/shine.png);
  background-position: center center;
  background-repeat: no-repeat; }

/* Make other titles appear over the coming soon shine but still appear in their
 * normal positions without covering other content */
#title-top, #title-middle {
  position: relative;
  z-index: 5; }

#title-bottom img {
  position: relative;
  z-index: 4; }

#title-bottom div {
  height: 383px;
  padding-top: 157px;
  margin-top: -122px; }

#first-content-section {
  position: relative;
  z-index: 1;
  top: -185px; }

.background-sky {
  z-index: -4; }

.background-grass {
  z-index: -3; }

.vertical-section-splitter {
  margin-top: 3em; }

/** First and second images must appear tighter together.. */
#title-top {
  top: 17px; }

/** ...but must not stretch small screens, and neither must their contents! */
#title-top img, #title-middle img {
  max-width: 90%; }

#game-description {
  max-width: 95%; }

/** Game description paragraphs have vertical indent, first line indent, are justified, and are just a bit wider than the title images */
#game-description {
  padding-top: 1.5em;
  width: 450px;
  margin: auto; }
  #game-description p {
    text-align: justify;
    text-indent: 1em; }

#main-text {
  margin-top: 3.6em; }

/** Blue font */
#first-content-section {
  color: #2A648F; }

/** iPhone 6 image */
#iphone-image {
  width: 230px;
  height: 478px; }

/** News column's width depends on the image inside, its inputs span the entire widths */
#news {
  width: 200px;
  margin: auto; }
  #news p {
    margin-top: 1em; }
  #news input, #news button {
    width: 100%; }

/** News column is styled a bit differently (input field, text inside button) */
#news input, #news button {
  border-radius: 10px;
  font-size: 1.5em;
  line-height: 1.8; }
#news input {
  border: 0;
  /* Let the content breathe a little.. */
  padding-left: 0.5em;
  padding-right: 0.5em; }
#news button {
  text-shadow: 1px 1px 1px black;
  padding: 0; }

/** Dawn of play link is a background image so it can have an alternate pressed state */
#dawn-of-play {
  position: relative;
  z-index: 20;
  display: inline-block;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(images/dawn_of_play.png);
  width: 110px;
  height: 112px; }
  #dawn-of-play:active {
    background-image: url(images/dawn_of_play_t.png); }

/** The bird image has some offset from its ordinary position */
#birdie {
  margin-right: -15px;
  margin-top: 68px; }

/** Share buttons are spaced and indented, also vertically moved */
#share {
  word-spacing: 1em;
  text-indent: 1em;
  margin-top: 2em; }