<style>

	 body { 
	     font-family: 'Roboto', sans-serif; 
	     display: flex;
	     align-items: flex-start; /* aligns top of cover and text */
	     gap: 20px; /* space between cover and text */
	     padding: 5px; /* optional spacing from edges */
	     flex-wrap: wrap; /* allows stacking on small screens */
	     padding-bottom: 3vh; /* or 3% of viewport height */
	     background-color:red;
	 } 

.top-title {
    font-family: 'Roboto', sans-serif;
    width: 100%;          /* full width of the viewport */
    text-align: center;   /* center the content horizontally */
    box-sizing: border-box; /* ensure padding doesn't overflow */
    font-weight:bold;
    margin-bottom:5px;
}

.top-title a {
  color: #333;           /* normal link color */
  text-decoration: none; /* optional */
}

.top-title a:hover {
  color: #aaa;           /* hover color */
  text-decoration:underline; 
}


.top-bar {
  width: 100%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto', sans-serif; 
  font-size: 1.3em;

  height: auto;          /* IMPORTANT */
  padding: 10px 0;       /* gives breathing room */
  box-sizing: border-box;
}

.top-bar a {
  color: white;              /* default link color */
  text-decoration: none;     /* optional: removes underline */
}

.top-bar a:hover {
  color: #fff;            /* green on hover */
  text-decoration:underline;
}


.cover-marquee {
  width: 100%;
  overflow: hidden;
}

.cover-track {
  display: flex;
  flex-wrap: nowrap;
  animation: scroll 2s linear infinite;
}

.cover-track img {
  flex-shrink: 0; /* prevent shrinking */
  height: 55px;
  margin-right: 15px;
}

/* @keyframes scroll { */ 
/*  0% { transform: translateX(0); } (/ 
/*  100% { transform: translateX(-2%); } /* move exactly one set width */
/* } */   


.book-wrapper {
    display: flex;              /* place left and right columns side by side */
    align-items: flex-start;    /* align tops */
    gap: 3px;                  /* spacing between columns */
    padding: 5px;
    flex-wrap: wrap;            /* stack on very narrow screens */
}

.left-column {
    flex: 0 0 48%;              /* take up ~45% of width */
    display: flex;
    flex-direction: column;     /* stack items vertically */
    gap: 15px;                  /* space between stacked items */
}

.left-column .cover-container {
    padding-top: 1px;
    margin:0;
}


.left-column .coverimage {
    display: block;
    margin: 0 auto;       /* centers image horizontally */
    max-width: 30%;        /* makes it bigger than before, but stays within the column */
    width:27%;
    height: auto;          /* maintain aspect ratio */
    object-fit: contain;   /* keeps proportions */

}

.right-column {
    flex: 0 0 45%; /* smaller width than left column */
    margin-left: -7%; /* move it left about 7% */
    display: flex;
    flex-direction: column;
    gap: 20px;

}

.right-column .video-trailer {
    max-width: 100%;       /* match synopsis and cover-container */
    margin: 20px auto;    /* center horizontally with vertical spacing */
    display: block;       /* ensure margin:auto centers it */
    width: 95%;          /* allows it to scale within max-width */
    height: auto;         /* maintain aspect ratio */
}

.video-trailer video {
    max-width:100%;
    height: auto;   /* maintain aspect ratio */
    display: block; /* remove inline spacing */
    border: none;   /* optional, just to be safe */
    margin: 0;
}


.synopsis {
/*  max-width: 40%; */      /* match cover-container width */
  margin: 5px auto;   /* center horizontally with some vertical spacing */
  font-family: 'Roboto', sans-serif;
  color: #000;         /* dark text for readability */
  line-height: 1.5;
  font-size: 18px;
  text-align: justify; /* optional: makes paragraphs look nice */
  padding: 0 10px;     /* optional: small side padding */
}

.synopsis img { 
    display:block;
    max-width:90%;
    margin: 0 auto;
}

.synopsis img.inline-left {
    float: left;          /* float image to the left */
    width: 100px;         /* adjust size as needed */
    height: auto;
    margin: 0 15px 10px 0; /* space: right + bottom */
}

.synopsis img.inline-right {
    float: right;         /* float image to the right */
    width: 100px;         
    height: auto;
    margin: 0 0 10px 15px; /* space: left + bottom */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

    .sample-button-block { margin:0; } 
    .tagline-block { 
	font-family: 'Roboto', sans-serif;
	margin:0; font-weight:bold; text-align:center; font-size:1.2em;
	border: 1px solid #ddd; padding: 0.5em 0.7em;
	width:90%;
	margin-left:5%;
	box-sizing: border-box; /* ensure padding doesn't overflow */	

} 

.editorial {
  display:none;
  max-width: 95%;      /* match cover-container width */
  margin: 5px auto;   /* center horizontally with some vertical spacing */
  font-family: 'Roboto', sans-serif;
  color: #333;         /* dark text for readability */
  line-height: 1.5;
  text-align: justify; /* optional: makes paragraphs look nice */
  padding: 0 10px;     /* optional: small side padding */
}

.pc-editorial {
  max-width: 70%;      /* match cover-container width */
  margin: 5px auto;   /* center horizontally with some vertical spacing */
  font-family: 'Roboto', sans-serif;
  color: #333;         /* dark text for readability */
  line-height: 1.5;
  text-align: justify; /* optional: makes paragraphs look nice */
  padding: 0 10px;     /* optional: small side padding */
}

.pagecountblock {
  max-width: 95%;      /* match cover-container width */
  margin: 0;   /* center horizontally with some vertical spacing */
  font-family: 'Roboto', sans-serif;
  color: #333;         /* dark text for readability */
  line-height: 1.5;
  text-align: justify; /* optional: makes paragraphs look nice */
  padding: 0;     /* optional: small side padding */
  text-align:center;
  margin-top:-20px;
  margin-bottom:-20px;
}

.titleblock { 

    font-family: 'Roboto'; 
/*    margin:auto; */
    text-align:center;
    font-size:1.2em;
    margin-top:15px;


} 


.toplabel {
    display:block;
  position: absolute;
  top: 0;
  left: 47.5%;          /* Move the anchor to the horizontal center */
  transform: translateX(-50%); /* Pull it back by half its width */
  z-index: 10;
  padding-top: 1%;
  line-height: 1.0 !important;
  padding-left: 5%;
  text-align: center;
  font-family: 'Roboto', sans-serif;
}

.toplabel a {
    color: #333;           /* normal link color */
    text-decoration: none; /* optional */
}

.toplabel a:hover {
  color: #aaa;           /* hover color */
  text-decoration:underline; 
}



footer {
    font-family: 'Roboto', sans-serif;
    width: 100%;          /* full width of the viewport */
    text-align: center;   /* center the content horizontally */

    padding: 20px 0 3vh 0; /* top 20px, right 0, bottom 3% of viewport, left 0 */
    
    box-sizing: border-box; /* ensure padding doesn't overflow */
    clear: both;          /* make sure it’s below floats if any */
    margin-bottom:30vh;
}

.footer a {
  color: #333;           /* normal link color */
  text-decoration: none; /* optional */
}

.footer a:hover {
  color: #aaa;           /* hover color */
  text-decoration:underline; 
}

.footer .footer-text { 
    font-family:'Roboto', sans-serif; 
    text-align:center; margin:0 auto; max-width:70%;} 

a.footer:hover {
  color: #228B22; /* forest green hover, ties back to buttons without competing */
  text-decoration: underline;
}


.getabook-logo { 
	 font-size:24px; 
	 text-transform:uppercase;
	 font-weight:bold;
     } 


.text-container {
    flex: 1 1 60%;            /* fill remaining space */
    min-width: 300px;         /* prevents text from shrinking too much */
}

.cover-icon {
  position: absolute;
  top: 12%;
  left: 12%;
  width: 100px; /* adjust as needed */
  height: auto; /* adjust as needed */
  z-index: 10; /* ensure it's above the cover image */
}


.titleprice { 
    font-family: 'Roboto'; 
    margin:0 auto;
    margin-bottom:-10px;x
    text-align:center;
    font-size:1.2em;
}

.buybutton {
  background-color: #28a745;       /* green background */
  border: 1.5px solid #218838;     /* slightly darker green border */
  color: white;    
  display: block;                  /* block-level element */
  width: max-content;              /* shrink to content width */
  margin: 20px auto 0 auto;       /* center horizontally with auto margins */
  padding: 14px 30px;
  font-size: 1.2em;
  
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 3px 7px rgba(0,0,0,0.1);
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
  user-select: none;
}

.buybutton:hover,
.buybutton:focus {
  background-color: #218838;       /* darker green on hover/focus */
  color: white;                    /* ensure text stays white */
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  transform: scale(1.05);
  outline: none;
}

.buybutton:active {
  background-color: white;         /* white background on tap */
  color: #28a745;                  /* original green text */
  border-color: #28a745;           /* green border */
  box-shadow: none;
  transform: scale(0.98);
}

.buybutton,
.buybutton:link,
.buybutton:visited,
.buybutton:hover,
.buybutton:focus,
.buybutton:active {
  text-decoration: none;
}


.logo-block {
    display:block;
  text-align: center;
  margin:0 auto;
  margin-top:-10px;
  font-family: 'IM Fell English', serif;
  color: #2a3a62;
  box-sizing:border-box;
  max-width:90%;
}

.guarantee-text {
  font-size: 0.9em;
  color: #222;
  text-align:center;
}

.featuresblock {
  max-width: 40%;      /* match cover-container width */
  margin: 20px auto;   /* center horizontally with some vertical spacing */
  font-family: 'Roboto', sans-serif;
  color: #333;         /* dark text for readability */
  line-height: 1.5;
  text-align: justify; /* optional: makes paragraphs look nice */
  padding: 0 10px;     /* optional: small side padding */
}

.logo-row {
  display: flex;
  justify-content: center;
  gap: 10px;        /* space between logos */
  align-items: center;
  flex-wrap: nowrap;

}

.logo-row img {
  height: 24px;     /* uniform height */
  width: auto;
  object-fit: contain;
}


.ebook-sample-button {
  background-color: #28a745;       /* green background */
  border: 1.5px solid #218838;     /* slightly darker green border */
  color: white;    
  display: block;                  /* block-level element */
  width: max-content;              /* shrink to content width */
  margin: 5px auto 0 auto;       /* center horizontally with auto margins */
  padding: 5px 10px;
  font-size: 1.2em;
  font-family: 'IM Fell English', serif;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 3px 7px rgba(0,0,0,0.1);
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
  user-select: none;
} 

.ebook-sample-button:hover,
.ebook-sample-button:focus {
  background-color: #218838;       /* darker green on hover/focus */
  color: white;                    /* ensure text stays white */
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  transform: scale(1.05);
  outline: none;
}

.ebook-sample-button:active {
  background-color: white;         /* white background on tap */
  color: #28a745;                  /* original green text */
  border-color: #28a745;           /* green border */
  box-shadow: none;
  transform: scale(0.98);
}

.ebook-sample-button,
.ebook-sample-button:link,
.ebook-sample-button:visited,
.ebook-sample-button:hover,
.ebook-sample-button:focus,
.ebook-sample-button:active {
  color:white;
  text-decoration: none;
}


    .logo-grid {
	 display: flex;
	 flex-direction: row;
	 align-items: center;
	 gap: 1.5rem;
	 margin: 0 auto;           
	 margin-top: 1rem;
	 margin-bottom: 1rem;
	 width:90%;
	 max-width: 1200px; 

     }

.logo-grid img {
  width: 180px;
  height: auto;
     margin: 0; 
}

.series-name { font-style:italic; } 
.genre-type { color: red; } 

.jewel { width:40px; height:auto; margin:0; padding:0;}


/* MOBILE STYLING */
@media screen and (max-width: 768px) {

* { box-sizing: border-box; } 

  html, body {
    width: 100%;
    overflow-x: hidden; /* safety net against accidental overflow */
  }

  body {
    flex-direction: column;       /* stack everything vertically */
    align-items: center;
    padding: 0px;                 /* small side padding */
    margin: 0;
  }

  /* TOP BAR */
  .top-bar {
    width: 100%;
    display: block;       
    font-size: 1em;
    text-align: center;
    padding: 5px 0; 
    box-sizing: border-box;
    margin:0;
  }

  .top-bar a {
    color: white;
    text-decoration: none;
  }

  .top-bar a:hover {
    text-decoration: underline;
  }

  /* MARQUEE */
  .cover-marquee {
    width: 100%;
    overflow: hidden; 
    padding: 2px 0;
    background: none;
  }

  .cover-track {
    display: flex;
    width: 200%;             /* enough width for scroll animation */
    flex-wrap: nowrap;
    animation: scroll 20s linear infinite;
  }

  .cover-track img {
    height: 55px;
    margin-right: 15px;
    max-width: 100%;
    background: transparent;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  @keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }


.cover-icon {
  position: absolute;
  top: 17%;
  left: 5%;
  width: 70px; /* adjust as needed */
  height: auto; /* adjust as needed */
  z-index: 10; /* ensure it's above the cover image */
}

  /* BOOK WRAPPER AND COLUMNS */
  .book-wrapper {
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin: 0 auto;
  }

  .left-column,
  .right-column {
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0;
    text-align: center;
  }

  .left-column .cover-container .coverimage {
    width: 30%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    margin-bottom:-5px;
    margin-top:-5px;

  }

  /* TEXT BLOCKS */
  .titleblock {
    text-align: center;
    font-size: 0.9em;
    margin:0 auto;
  }

  .titleprice {
    font-size: 1em;
    margin: 0 0;
    text-align: center;
    width: 95%;
    margin-bottom:-10px;
    margin-top:-10px;
    
  }



  .buybutton,
  .ebook-sample-button {
    width: auto;
    max-width: 95%;
    margin: 1px auto;
    font-size:1.0em;
  }

  .pagecountblock,
  .samplebuttonblock {
    max-width: 100%;
    margin:0;
    padding:0;
    text-align: center;   /* prevents huge gaps */
    hyphens: none;
    word-break: break-word; /* optional: extra safety */
    }

  .editorial {
    display:block;
    max-width: 95%;
    margin: 5px 0;
    padding: 0 5px;
    text-align: left;   /* prevents huge gaps */
    hyphens: auto;      /* optional: breaks long words nicely */
    word-break: break-word; /* optional: extra safety */
    margin-top:-50px;
}

  .synopsis,
  .featuresblock
   {
    max-width: 95%;
    margin: 5px 0;
    padding: 0 5px;
    text-align: left;   /* prevents huge gaps */
    hyphens: auto;      /* optional: breaks long words nicely */
    word-break: break-word; /* optional: extra safety */
  }

.pc-editorial { display:none; } 

    .tagline-block { 
	font-family: 'Roboto', sans-serif;
	margin:0; 
	font-weight:bold; 
	text-align:center; 
	font-size:1.2em;
	border: 1px solid #ddd; padding: 0.5em 0.7em;
	width:90%;
	margin-left:5%;
	box-sizing: border-box; /* ensure padding doesn't overflow */	
	margin-top:-5px;

} 

.pagecountblock {
  max-width: 95%;      /* match cover-container width */
  margin: 0;   /* center horizontally with some vertical spacing */
  font-family: 'Roboto', sans-serif;
  color: #333;         /* dark text for readability */
  line-height: 1.5;
  text-align: justify; /* optional: makes paragraphs look nice */
  padding: 0;     /* optional: small side padding */
  text-align:center;
  margin-top:-10px;
  margin-bottom:-10px;
}

  /* Remove floats on inline images */
  .synopsis img.inline-left,
  .synopsis img.inline-right {
    float: none;
    display: block;
    margin: 0 auto 10px auto;
    width: 50%;
    max-width: 100%;
    height: auto;
  }

  /* VIDEO */
  .video-trailer {
    width: 95%;
    max-width: 100%;
    margin: 10px auto;
  }

  .video-trailer video {
    width: 100%;
    height: auto;
    display: block;
    border: none;
  }

.logo-row {
  display: flex;
  justify-content: center;
  gap: 10px;        /* space between logos */
  align-items: center;
  flex-wrap: nowrap;
  max-width:100%;
  width:100%;

}

.logo-row img {
  height: 18px;     /* uniform height */
  width: auto;
  object-fit: contain;
  margin-top:5px;
}


  /* LOGOS */
  .logo-grid {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 80%;
    max-width: 80%;
    margin: 10px auto;
  }

  .logo-grid img {
    width: 25%;
    max-width: 100%;
    height: auto;
  }

  /* JEWEL ICON */
  .jewel {
    width: 20px;
    height: auto;
    margin: 0 0;
  }

.logo-block {
  display:block;
  text-align: center;
  margin:0 auto;
  margin-top:-10px;
  font-family: 'IM Fell English', serif;
  color: #2a3a62;
  box-sizing:border-box;
  max-width:90%;
}

.guarantee-text {
  font-size: 0.9em;
  margin:0; 
  margin-top:10px;
  color: #222;
  text-align:center;
}

.top-title {
    font-size:0.8em;
}



}


}




</style> 
