:root{
 --accent:#c44b3f;
 --dark:#111;
 --light:#f5f5f5; 
 --max-width:1100px;
 
}

*{
 margin:0;
 padding:0;
 box-sizing:border-box;
  
}

body{
  font-family:  "Futura", "Helvetica Neue", Arial, sans-serif;
  background:var(--light);
 color:var(--dark);
 line-height:1.6;
}

h1,h2,h3{
 font-family:'Playfair Display',serif;
 text-align:center;
 margin-bottom:1px;
}

h4 {
   font-family:'Playfair Display',serif;
 text-align:center;
 margin-bottom:5px;
  font-weight: bold;
   font-size: 60px;
}


.hero{
  font-family:'Playfair Display',serif;
  background:#f5f5f5; 
  text-align:center;
  padding:5px 5px;
  
}

.hero .tagline {
   font-family: "Futura", "Helvetica Neue", Arial, sans-serif;
}

.hero h1{
  font-family:'Playfair Display',serif;
  font-size:3rem;
  margin-bottom:5x;
}

.tagline {
    font-family: "Futura", "Helvetica Neue", Arial, sans-serif;
    font-size:1.2rem;
    padding:5px 5px;
}

.container{
 max-width:900px;
 margin:auto;
 padding:0px 0px;
 
}

.container-sub{
  font-family: "Futura", "Helvetica Neue", Arial, sans-serif;
 max-width:500px;
 text-align: left;
 margin:auto;
 padding:50px 0px;
 
}

.container-contact{
 max: width 600px;
 padding:5px 20px;
 margin-bottom:5px;
 
}

img{
 display:block;
 height:auto;
}

/* HEADER */

.site-header{
 text-align:center;
 margin-bottom:10px;
 
}

.site-logo{
 max-width:520px;
 width:100%;
}



/* NEW NAVIGATION MENU*/

.topnav {
  overflow: hidden;
  background-color: #333333;
}

.topnav a {
  float: left;
  display: block;
  color: #0b0000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #cfcdcd;
  color: rgb(3, 0, 0);
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* SECTION DIVIDER */

.section-divider{
 border:none;
 border-top:1px solid #8e8d8d;
 margin:10x 0;
}

/* GRID */

.grid{
 display:grid;
 grid-template-columns:
 repeat(auto-fit,minmax(260px,1fr));
 gap:0px;
 
}

/* CARD */

.card{
 background-color: #fcfcfc; 

 
 border:1px solid #f9f8f8; 
 padding:15px;
 text-align:center;
 display:flex;
 flex-direction:column;
}

.book-card:hover{
 transform:translateY(-3px);
 transition:.2s ease;
}

/* IMAGES */

.book-card img,
.author-photo,
.book-cover{
 width:100%;
 max-width:170px;
 margin:auto;
}

/* BUY AREA */

.buy-area{
 margin-top:15px;
 display:flex;
 flex-direction:column;
 gap:6px;
 align-items:center;
}

.book-price{
 font-weight:600;
}

.retailer-note{
 font-size:.8rem;
 color:#666;
}

/* BUTTON */

.btn{
 background:var(--accent);
 color:white;
 padding:10px 20px;
 text-decoration:none;
 font-weight:600;
 border:none;
 display:inline-block;
}

.btn:hover{opacity:.9;}

.disabled{
 opacity:.6;
 pointer-events:none;
 cursor:default;
}

/* BACK LINK */

.back-link{
 display:block;
 margin-bottom:30px;
 text-decoration:none;
 font-weight:600;
 color:var(--dark);
}

/* FORM */

input,textarea{
 width:100%;
 padding:10px;
 margin:10px 0;
 border:1px solid #ccc;
}

textarea{min-height:140px;}

footer{
 text-align:center;
 margin-top:60px;
 padding-top:40px;
 border-top:1px solid #ddd;
}

/* =========================
   REVIEW TICKER STYLING
========================= */

.review-ticker {
  width: 100%;
  overflow: hidden;
  background: #111;
  color: #fff;
  padding: 5px; 
  font-family: "Futura", "Helvetica Neue", Arial, sans-serif;
}

.ticker-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.ticker-track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
}

.ticker-item {
  display: inline-block;
  margin-right: 50px; /* space between reviews */
  font-size: 1.2rem;
  letter-spacing: 0.3px;
}

.review-text {
  font-style: italic;
}

.review-source {
  margin-left: 8px;
  opacity: 0.75;
}

/*-! hamburger menu /

/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #fdfbfb;
  position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  color: rgb(5, 0, 0);
  padding: 8px 8px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: rgb(249, 246, 246);
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: rgb(245, 240, 240);
}

/* Style the active link (or home/logo) */
.active {
  background-color: #b7acb4;
  color: rgb(246, 242, 242);
}