/*--------------------------------------------------
GENERAL
--------------------------------------------------*/

body {
  font-family: 'PT Sans', sans-serif;
  line-height: 1.9rem;
  font-size: 1.3rem;

  /* Background pattern from Toptal Subtle Patterns
   * https://www.toptal.com/designers/subtlepatterns/cubes/ */
  background-image: url('images/cubes.png');

  margin: 0;
  padding: 0;
  color: #000;
}

small { font-size: 1rem; }

img { border: 0; }

a { color: #009900; text-decoration: none; }

h1 {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 3.25rem;
  color: black;
}

h2 {
  text-align: center;
}

.container {
  width: 960px;
  margin: 40px auto;
  overflow: hidden;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 0 0.25rem #888888;
}

/*--------------------------------------------------
NAV
--------------------------------------------------*/

.nav { padding: 2rem 2rem 0; text-align: right; font-size: 1.25rem; overflow: hidden; }
.nav ul { margin: 0; padding: 0; }
.nav ul li { display: inline; list-style-type: none; margin-left: 2rem; }
.nav ul li.first { margin-left: 5px; }
.nav ul li a { font-weight: bold; border-bottom: 2px solid #99ccff; }
.nav ul li a:hover { color: #000; border-bottom: 2px solid #0099ff; }

/*--------------------------------------------------
LAYOUT
--------------------------------------------------*/

section {
  margin: 0 auto;
  padding: 1rem 2rem;
  overflow: hidden;
  width: auto;
}

section.youtube {
  text-align: center;
}

section.youtube .content {
  display: inline-block;
  padding: 1em;
  padding-bottom: 0.25em;
  border: 1px solid #f0f0f0;
  border-radius: 1em;
  background-color: #f7f7f7;
}

section.youtube .content .caption {
  font-size: 80%;
  font-style: italic;
}

section.youtube iframe, section.youtube object, section.youtube embed {
  width: 800px;
  height: 450px;
}

/*--------------------------------------------------
HEADER
--------------------------------------------------*/

section.quote, section.highlight, section#praise {
  text-align: center;
  padding-bottom: 0;
}

section.quote p, section#praise p {
  font-family: Georgia, serif;
  font-size: 1.25rem;
  color: #666666;
}

figure.book {
  float:left;
  margin-left: 0.5rem;
}

figure.book img {
  transform: rotate(-2deg);
  box-shadow: 0 0 10px #666666;
  width: 400px;
}

/*--------------------------------------------------
PURCHASE
--------------------------------------------------*/

section.purchase {
  display: block;
  border-radius: 1rem;
  margin: 1.5rem;
  background-color: #e0f6c0;
}

div.stores {
  text-align: center;
  padding-bottom: 1.5rem;
}

div.stores a {
  display: inline-block;
  background-color: white;
  background-repeat: no-repeat;
  background-size: contain;
  width: 200px;
  height: 100px;
  border-radius: 0.5rem;
  border:2px solid #339933;
  border-bottom: 4px solid #006600;
  text-indent: -10000px;
  margin: 0 1rem;
}

a.prag {
  background-image: url('images/logo-prag-prog.png');
}

a.amzn {
  background-image: url('images/logo-amazon.png');
}

a.bn {
  background-image: url('images/logo-bn.png');
}

/*--------------------------------------------------
PREVIEW
--------------------------------------------------*/

div.preview figure {
  display: inline-block;
}

div.preview figure img {
  border: 1px solid #ccc;
  box-shadow: 0 0 10px #ccc;
  width: 360px;
}

div.preview figure figcaption, section.highlight figure figcaption {
  font-size: 1rem;
  text-align: center;
}

section.highlight figure {
  display: inline-block;
}

section.highlight figure img {
  border: 3px solid #555;
  box-shadow: 0 0 10px #ccc;
  width: 600px;
}

/*--------------------------------------------------
PRAISE
--------------------------------------------------*/

section#praise p {
  margin: 2rem;
}

section#praise p span {
  font-size: 1rem;
  line-height: 3.5rem;
}

/*--------------------------------------------------
BONUS
--------------------------------------------------*/

section#bonus {
  background-color: #e0f6c0;
  border-radius: 1rem;
  padding: 1rem 2rem;
  margin: 1rem 2rem;
}

section#bonus h2 {
  margin: -1rem -2rem;
  margin-bottom: 1rem;
  background-color: #A4C575;
  padding: 1rem;
  padding-bottom: 0.5rem;
}

section#bonus li {
  margin-bottom: 1rem;
}

section #bonus li a {
  font-weight: bold;
}

/*----------------------------------------------------
RESPONSIVE CSS
----------------------------------------------------*/

/* iPhone */
@media only screen and (max-device-width: 480px) {
  body {
    font-size: 1.3rem;
  }
  .container { width: auto; margin: 1rem; }
  section { width: auto; padding: 1.5rem; }
  .nav { margin: 20px 0 0; overflow: hidden; text-align: center; padding: 0; }
  .nav ul li, .nav ul li.first { margin: 19px; line-height: 1.5rem; display: inherit; }
  h1 { font-size: 2.5rem; text-align: center; line-height: 2.5rem; }
  h2 { font-size: 1.75rem; }
  section.quote p, section#praise p { font-size: 1rem; line-height: 1.3rem;}
  figure.book { margin: auto; float: none; text-align: center; }
  figure.book img { width: 95%; }
  div.preview figure { margin-left: 0; margin-right: 0; }
  div.preview figure img { width: 100%; }
  div.preview figure figcaption, section.highlight figure figcaption { line-height: 1.5rem; }
  section#praise p span { line-height: 1.25rem; }
  div.stores a { width: 200px; margin: 1rem 0; }
}

/* iPad */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
}