/* *********** This pages is stying for just gift.html ********************/

/* Please refer to navigation.css for the header area, navigation menu, page layout
   and footer styling  ************/

 /* *** This styles the sections for gift.html *** */



/* ***************** Define the page layout and containers ***************** */

section#pagecontainer {height: 747px;
  width: 99.97%;
  margin: 0 auto;
  border: 2px solid grey;
}

section#pagecontainer aside {position: relative;
  height: 747px;
}

section#pagecontainer aside#writing {float: left;
  width: 39.3%;
}

section#pagecontainer aside#love {float: right;
  width: 60%;
}

/* ***************** Define the left aside with the poem + text ***************** */

section#pagecontainer aside#writing div.poemhearts {width: 90%;
  padding: .5em 0 1.5em 0;
  margin: 0 auto;
}

section#pagecontainer aside#writing div.poemhearts p {text-transform: uppercase;
  color: #030C8C;
  font-weight: 800;
  text-align: center;
  font-size: 1.1em;
  line-height: 1.2;
}

section#pagecontainer aside#writing div.poemhearts div.threehearts img {
  display: block;
  width: 25%;
  margin-left: 0;
  margin-right: 0;
  margin: auto;}

 section#pagecontainer aside#writing p {color: grey;
  font-weight: bold;
  padding: 0.5em 1.7em;
  text-align: center;
  line-height: 1.2;}


/* ***************** Define the button inside the left aside  ***************** */
section#pagecontainer aside#writing a div.giftregistry {
  min-height: 100px;
  height: auto;
  width: 80%;
  padding: 10px;
  margin: 0 auto;
  color: grey;
  border: 5px solid #0D1D85;
  text-align: center;
} 

section#pagecontainer aside#writing a div.giftregistry div.titlelarge {font-size: 2em;
  color: #0D1D85;
  text-shadow: 2px 2px 1px #9B9DA8;}

section#pagecontainer aside#writing a {text-decoration: none;}

section#pagecontainer aside#writing a div.giftregistry div.italic {font-style: italic;
  color: grey;
  font-weight: bold;
  font-size: .85em}
  
 section#pagecontainer aside#writing a div.giftregistry:hover {background-color: rgba(227,5,52,.3);
  font-stretch: expanded;}


/* ***************** Define the right aside with the heart image ***************** */

section#pagecontainer aside#love {display: block;
  background-image: url("../images/love.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}

/* ***************** Define the footer - further - rest on navigationmenu.css ********** */

footer {width: 100.3%;}


/* **************************** Media Queries **********************************  
Device sizes - max-width
Mobile - 320px
468px
IPAD / Tablet - 768px 
Desktop - 1024px 
*/


@media screen and (max-width: 1400px) {
   
   /* Reduce screen width */
   div#page {max-width: 1000px;}
  
   /* Decrease page container height due to smaller width */
   section#pagecontainer {height: 720px;}

   /* Update aside widths */
   section#pagecontainer aside#writing {width: 45.3%;}

   section#pagecontainer aside#love {width: 53%;}

   /* Update the text under the Donate Now button */
   section#pagecontainer aside#writing p {padding: 1.5em 1.7em;
     line-height: 1.3;}

   /* Reduce text size for the poem */
   section#pagecontainer aside#writing div.poemhearts p {font-size: 1.1em;
     line-height: 1.1;
     margin: 0;
     padding: 15px 0px 0px 0px;
   }

   /* Move the poem and lovehearts down from the top border */
   section#pagecontainer aside#writing div.poemhearts div.AA {margin-top: 10px;}

}

@media screen and (max-width: 900px) {
   
   /* Reduce screen width */
   div#page {max-width: 800px;}

   section#pagecontainer {width: 99.50%;}
  
   /* Decrease page container height due to smaller width */
   section#pagecontainer {height: 620px;}
 
    /* Reduce text size for the poem */
   section#pagecontainer aside#writing div.poemhearts p {font-size: 1em;
     line-height: 1;}

  /* Update the text under the Donate Now button */
   section#pagecontainer aside#writing p {padding: 1em 1.7em;
     line-height: 1;
     font-size: .95em;}

  /* Update the styling of the button labelled "Donate Now" */
    section#pagecontainer aside#writing a div.giftregistry {
    min-height: 80px;
    padding: 5px;
    border: 4px solid #0D1D85;} 

     section#pagecontainer aside#writing a div.giftregistry div.titlelarge {font-size: 1.6em;}

}

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

  /* Update the image to now cover the whole background */
  section#pagecontainer {background-image: url("../images/love.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;}

  /* Increase page container height due to smaller width */
  section#pagecontainer,
  section#pagecontainer aside#writing 
   {min-height: 650px;
    height: auto;}

  section#pagecontainer aside {float: none;}

   section#pagecontainer aside#writing {width: 48%;}

  /* Hide the aside that originally showed the right half the page as the loveheart */
  section#pagecontainer aside#love {display: none;}

  /* Add white background to the poem's text */
  section#pagecontainer aside#writing div.poemhearts p {background-color: white;}
}

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

  /* Increase page container height due to smaller width */
  section#pagecontainer,
  section#pagecontainer aside#writing 
   {min-height: 680px;
    height: auto;}

}


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

  /* Remove the background image */
  section#pagecontainer {background: none;
    margin: 0 auto;}

  /* Increase page container height due to smaller width */
  section#pagecontainer,
  section#pagecontainer aside#writing 
   {min-height: 595px;
    height: auto;}

  /* Change aside container to 100% for centering */
  section#pagecontainer aside#writing {width: 100%;
    position: relative;}

   /* Change width of the poem inside the aside container  */
  section#pagecontainer aside#writing div.poemhearts {width: 80%;}

}

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

   /* Reduce screen width */
   div#page {max-width: 300px;}

  /* Increase page container height due to smaller width */
  section#pagecontainer,
  section#pagecontainer aside#writing 
   {min-height: 715px;
    height: auto;}

}