body, html { height: 100% }
* { padding: 0; margin: 0; box-sizing: border-box }
ul { list-style: none }
a { text-decoration: none }

.bgdrkgreen { background: #2C431D }
.bgltgreen { background: #B0B483 }
.bgcover { background-image: url(images/bg-bookcover-no-text.png); background-size: cover; background-position: center; background-repeat: no-repeat }
.bgpaper { background-image: url(images/background-paper.png) }

h1 { color: white; font-family: "Cormorant Garamond", serif }
.video h1, h2, p, footer { font-family: "Reddit Sans", sans-serif; font-weight: bold }
p { font-size: 1.5rem; padding: .5% 0 }
p.drkgreen { color: #2C431D }

div.center { text-align: center }

img.bio { float: left; margin: 0 2em .5em 0; width: 40%; height: auto }

header, section { text-align: center } 
header { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 2% 0; background: #2C431D }

section { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; background: #E5E3D3 }
section.pad1 { padding: .75% 0 }
section.pad5 { padding: 5% 5% 1% 5% }


.half { flex: 1 1 calc(50% - 12px); min-width: 320px }
.one3rd { flex: 1 1 calc(33.333% - 12px);  min-width: 320px; display: flex; justify-content: center; align-items: center }
.two3rd { flex: 2 1 calc(66.666% - 12px); min-width: 320px; display: flex; justify-content: center; align-items: center }

.halftext { text-align: left; text-shadow: 0 0 10px white }

.halftitle h1 { font-size: 5rem; line-height: 6rem; font-weight: 500; text-shadow: 0 0 10px black }
.halftitle h2 { text-shadow: 0 0 10px white; margin-top: 2rem }

nav { font-family: "Reddit Sans", sans-serif }
nav ul { display: flex; justify-content: center; align-items: center; gap: 2% }
nav li { flex: 0 0 10% }
nav li img { display: block; width: 100%; height: auto; margin: auto }

img.book { width: 60%; height: auto }

footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; padding: 1% 0; color: #E5E3D3; background: #2C431D }
footer li { display: inline-block }
footer li + li::before { content: "| " }
.disclaimer { padding: 0 2% }
.disclaimer p { font-size: .8rem }

.cart-btn {
  display: inline-block; background: gold;
  padding: .45em 1.5em;
  border-radius: 9999px;
  transition: background 0.2s;
}
.cart-btn a { color: #2C431D }
.top5p { margin-top: 5% }

/* youtube embed */
section.video { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; width: 100%; background: #B0B483 }
section.video h1 { color: black; padding-top: 2% }
    
.row { display: flex; flex-wrap: wrap; width: 100%; padding: 3% 0 }

.box { width: 50% }
.box iframe { width:70%; aspect-ratio:16/9; border:0 }

/* stack on mobile */
@media (max-width:768px){
  .box { width:100% }
  .row > .box:first-child { margin-bottom:20px; }
}
/* youtube embed end */

@media (max-width: 600px) {
  h2 { padding-bottom: 2% }
  p { font-size: 1.2rem }
  img.bio { 
    float: none;
    display: block;
    margin: 0 auto 1em;
    width: 80% }
  .cart-btn {
    display: block; 
    width: 60%; 
    margin: 2% 0 }
  nav { margin-bottom: 2% }
  footer { text-align: center }
  footer div { margin: 1% 2% }
}

/*
@media (max-width: 600px) {
    h2 { padding-bottom: 2% }
    p { font-size: 1.2rem }
    img.bio { float: none; }
    display: block;centering; margin: 0 auto 1em;
    max-width: 80% }
    .cart-btn {
      display: block; width: 60%; margin: 2% 0 }
    nav { margin-bottom: 2% }
    footer { text-align:  center }
    footer div { margin: 5% 0 }
} */