html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0; }

body, html { height: 100%;}

*, *::before, *::after {
  box-sizing: border-box; }

html { font-family: "Andalus",Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.5; 
font-weight: normal;}

h1.center {  text-align: center;  color: #FFF; }   /*By adding this CENTER to h1 the color also follows */
h1.large {  font-size: 350%;  font-family:"Andalus",Trebuchet MS, Arial, Helvetica, sans-serif; }

h1.a { font-family: "Audiowide", sans-serif; } /*Set up in body like this <h1 class="a">Audiowide Font</h1> */
h2.b { font-family: "Sofia", sans-serif; }
h1.c { font-family: "Trirong", serif; }

h4 {
  font-size: 20px;
  color: white;
  line-height: 1.8;   /* space between lines */
  margin: 18px 0;     /* space between paragraphs */ }

h4 { margin: 0.75em 0; }

.w3-container h4 {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0; }


.w3-theme-d3 {color:#fff !important;background-color:# !important; border-radius: 0px 0px 80px 0px;
opacity:.7;}

/* THEMES  half sides only*/ 

.w3-half .w3-theme-d2 {box-sizing:border-box; color:#fff!important;background-color:#0066CC !important; 
border-radius: 80px 0px 0px 0px; padding:20px;margin:0 auto; opacity:.9; display:flex;align-items:center;
justify-content:center;text-align:center;}
@media(max-width:600px){.w3-half .w3-theme-d2{width:100%!important;}}

.w3-half .w3-theme-d5{box-sizing:border-box; color:#fff; background-color:#000099;opacity:.8; margin:0 auto;
border-radius:80px 0 0 0;padding:20px;}
@media(max-width:600px){.w3-half .w3-theme-d5{width:100%!important;}}

.w3-half .w3-theme-d3{ box-sizing:border-box; color:#fff; background-color:#0066CC;opacity:.8; margin:0 auto;
border-radius:80px 0 0 0;padding:20px;}
@media(max-width:600px){.w3-half .w3-theme-d3{width:100%!important;}}



/* THEMES  full width only*/ 
.w3-container .w3-theme-d4{ width:100%;
  color:#fff!important;background-color:#0066CC!important;border-radius:80px 0 0 0;padding:5px;
  margin:0 auto;opacity:.9;display:flex;align-items:center;justify-content:center;text-align:center;}
@media (max-width:600px){
  .w3-container .w3-theme-d4{
    margin-left:-16px;
    margin-right:-16px;
    width:calc(100% + 32px);}}



.w3-theme-d6 {color:#00ccff !important;background-color:#000 !important; border-radius: 20px;  padding:20px; opacity:.5;}



.dropbtn { background-color:#f44336;color: black;padding: 16px;font-size: 20px;border: none;cursor: pointer; width: 100%}
.dropdown { position: relative; display: inline-block; width: 100%}
.dropdown-content { display: none;position: absolute;background-color: #000;min-width: 100%; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; overflow:auto}
.dropdown-content a { color: white; padding: 16px 16px; text-decoration: none; display: block;}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {display: block;}

.card {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); max-width:99%;margin:auto;text-align:center;font-family: "Century Gothic", Arial, sans-serif; border-radius: 0px 0px 28px 28px;
padding:10px;} .title { color: #0066CC; font-size: 18px; text-align:center; }
button { border: none; outline: 0; display: inline-block; padding: 8px; color: white; background-color: blue;
text-align: center; cursor: pointer; width: 80%; font-size: 18px; border-radius: 8px; margin: 8px 4px;}
.card a { text-decoration: none; font-size: 22px; color: white; text-align:center; }
button:hover, .card a:hover { color: lime;}

.box  {  background-color: blue; /* For browsers that do not support gradients */
  background-image: linear-gradient(#B22222,#8B0000,#b30000, #e60000,#ff3333 );
  margin-bottom: 5px; margin-left:0px; margin-right: 15px; overflow: hidden;
  color: white; text-align:center;  width:80%; padding:0px;  } 

.box3 {background-image:linear-gradient(black,navy,blue,#00477e,blue,navy,black); 
background-color: indigo; /* For browsers that do not support gradients */
color: white;
background-color: indigo; /* For browsers that do not support gradients */
color: black; cursor: pointer; padding: 10px; width: 100%;  text-align: center;
border: none; border-radius:25px; outline : none;  transition: 0.4s;}
.banner a:hover {  background-color: #1f3057 ;  color: #fff; border-radius: 20px}
.banner a.active {  background-color: #fff; color: #000;}
.banner-centered a { float: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.banner-right {  float: right;}


 .container {
  background-color: none; /* fallback */
 /* background: linear-gradient(
    to bottom,
    #1a75ff 40%,
    rgba(128, 128, 128, 0.6) 100%   /* grey with 60% opacity */  );
  margin-bottom: 5px;
  margin-left: 0;
  margin-right: 15px;
  overflow: hidden;
  color: white;
  text-align: center;
  width: 100%;
  padding: 0; }

 

/* Accordion wrapper */
.accordion-wrap {
  width: 100%;
  max-width: 900px;
  margin: 0 auto; }

.accordion {
  width: 80%;
  margin: 12px auto;          /* centers button */
  display: block;
  padding: 16px;
  border-radius: 25px;
  cursor: pointer;
  border: none;
  text-align: center;
  background-image: linear-gradient(black,#0f4267,#09568d,#2c5da3,#0065b1,#47add5,black );
  color: #fff;
  outline: none;
  transition: 0.4s; }

.accordion:hover,
.accordion.active { 
  background: linear-gradient(#003366, #001a4d); }

/* Accordion panel */
.panel { background-color: white; color: black; overflow: hidden;
  width: 95%;
  max-width: 900px;
  margin: 10px auto 0;
  padding:0 18px;
  display: none; }

.review-text {
  line-height: 1.6;
  margin: 10px 0 18px 0; }

.review-title { margin-bottom: 4px; }
.review-meta  { margin-top: 0; margin-bottom: 6px; font-weight: normal; }
.review-body  { margin-top: 0; line-height: 1.45; }

.panel .w3-container {
  padding-left: 20px;
  padding-right: 20px;
  max-width: 100%; }





/* ===== TOP NAV BANNER ===== */
.topbanner {
  width: 100%;
  text-align: center;
  padding: 20px 10px;
  background: #8B0000;
  color: white;}


/* ===== TOP NAV BANNER ===== */
.topnav {
  background-image: linear-gradient(
    #B22222,#8B0000,#b30000,#e60000,#ff3333,
    #e60000,#b30000,#8B0000,#B22222 );

  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px;
  gap: 12px; }

.topnav a {
  color: white;
  text-decoration: none;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 20px;
  text-align: center;
  white-space: normal;   /* IMPORTANT for mobile */ }

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

@media (max-width: 600px) {
  .topnav {
    flex-direction: column;   /* stack links */
    align-items: center; }

  .topnav a {
    width: 90%;               /* full-width tap targets */
    font-size: 16px; } }

a.w3-button:hover {
  text-decoration: none; }

.topnav,
.topnav a {
  border: none !important;
  box-shadow: none !important; }
.topnav a:focus {
  outline: 2px solid rgba(255,255,255,0.6); }
  white-space: normal;



.button { background-color: blue; border: none; border-radius:25px; color: white;
text-decoration: none;  display: inline-block;  font-size: 16px;  margin: 4px 2px;  -webkit-transition-duration: 0.4s; /* Safari */  transition-duration: 0.4s;
cursor: pointer;}

.button1 {  background-color: white;color: black;border: 2px solid #4CAF50;transition: 0.4s; /* Safari */  
cursor: pointer;} 
.button1:hover {  background-color: #4CAF50;  color: white; }


.banner {background-image:linear-gradient(black,navy,blue,blue,navy,black); color: #fff; position: relative;
overflow: hidden; cursor: pointer; padding: 0px; width: 100%; border: 1px solid transparent;
border-radius:10px;  outline: 0px; transition: 0.4s; background-color: #2c3e75; text-align: center; } 
.banner a {float: none; color: #fff;padding: 6px 8px;}
.banner a:hover {  background-color: #1f3057 ;  color: #fff; border-radius: 20px}
.banner a.active {  background-color: #fff; color: #000;}
.banner-centered a { float: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.banner-right {  float: right;}
/* Responsive  Navigation  Menu     ( for mobile devices ) */
@media screen and (max-width: 600px) {  .banner a, .banner-right { float: none; display: block;  }
.banner-centered a { position: relative; top: 0; left: 0; transform: none; } } 


/* Prevent headings from exceeding viewport */
h4 { margin-left: 10px;
     margin-right: 10px;
     padding-left: 10px;
     padding-right: 10px;
     box-sizing: border-box; }

/* Constrain absolutely positioned banner links */
.banner,
.topnav {
  max-width: 100%;
  overflow-x: hidden; }

/* Catch-all protection */
* { box-sizing: border-box; }

a.payhip-buy-button {
  display: inline-block;
  font-size: 16px;
  padding: 10px 16px;
  text-align: center; }

a.payhip-buy-button {
  display: block;
  margin: 0 auto;
  text-align: center; }
.center-wrap {
  text-align: center; }

.w3-btn {width:120px;}
a.w3-button:hover {
  text-decoration: none; }


---------------------- 
/* FORCE audio player button to display */
#playPauseBtn {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: #001a4d;
  color: yellow;
  border: 2px solid yellow;
  border-radius: 10px;
  font-size: 1.2em;
  padding: 12px 25px;
  cursor: pointer; }
.player button {
  background-color: yellow;
  color: #001a4d;
  border: 2px solid #001a4d;
  display: inline-block; }
/* FORCE audio player button to be visible */
.player button,
#playPauseBtn {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: #001a4d;
  color: yellow;
  border: 2px solid yellow;
  border-radius: 10px;
  padding: 12px 25px;
  font-size: 1.2em;
  cursor: pointer; }

.preview-title {
  color: yellow;
  text-align: center; }

.content-box {
  max-width: 90%;
  margin: auto; }

  .footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%; }

.footer-col {
  flex: 1 1 250px;
  text-align: center; }

html, body {max-width: 100%;overflow-x: hidden;}
* {box-sizing: border-box;}
html, body {overflow-x: hidden;max-width: 100%; }

img, video, iframe {
  max-width: 100%;
  height: auto; }

/* FINAL h4 control — do not duplicate */
.w3-flat-midnight-blue h4 { line-height: 1.8;        /* space BETWEEN lines */
  margin: 0 0 1.2em 0;     /* space BETWEEN paragraphs */
  text-align: left; }

.auto-style49 { text-align: center; color: #fff; font-weight: bold; }
.auto-style50 {color: #fff; text-align: center;    }
.auto-style51 {text-align: center; color: white; font-size: 60px; }
.auto-style60 {color: white; letter-spacing: 0.5pt; text-align: left; margin-left: 20px; margin-right: 20px; }
.auto-style61 {color: black; letter-spacing: 0.5pt; text-align: center; margin-left: 25px; margin-right: 25px; }
.auto-style62 { text-align: center; font-weight: bold;    }
.auto-style63 { text-align: left; color: #000; margin-left: 20px; letter-spacing: 0.5pt; }
.auto-style65 {text-align: center; color: navy;   }
.text-center { text-align: center; }
.text-bold { font-weight: bold; }
.text-white { color: #fff; }

/* High-visibility Payhip Buy Button */
a.payhip-buy-button {
    font-size: 2em !important;          /* ~2× larger text */
    padding: 24px 52px !important;      /* big clickable area */
    border: 5px solid #FFD700 !important; /* bright yellow border */
    border-radius: 14px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;

    /* Attention-grabbing glow */
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.85);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover emphasis */
a.payhip-buy-button:hover {
    transform: scale(1.08);
    box-shadow: 0 0 24px rgba(255, 215, 0, 1);
}

-------------------------------------------

<title>FREE Preview Player</title>
body{font-family:Arial,sans-serif;text-align:center;padding:40px 20px;background-color:#f2f2f2}.player{background-color:#001a4d;color:yellow;padding:20px;border-radius:14px;width:90%;max-width:500px;margin:0 auto;box-shadow:0 4px 10px rgba(0,0,0,.3)}button{background-color:#001a4d;color:yellow;border:2px solid yellow;border-radius:10px;font-size:1.2em;padding:12px 25px;cursor:pointer;margin-bottom:15px}button:hover{background-color:black;color:#001a4d}input[type=range]{width:100%;accent-color:yellow}.time{margin-top:8px;font-size:1em}.header-center{text-align:center}.header-center a{display:inline-block;margin:5px 10px}




  /* ===== PHONE + iPad STACKING ===== */
@media (max-width: 768px) {

  .accordion {
    width: 95%;
  }

  .topnav {
    flex-direction: column;
    align-items: center;
  }

  .topnav a {
    width: 90%;
    text-align: center;
  }

  .panel {
    width: 95%;
  }
}

/* FORCE STACKING on iPad and smaller */
@media (max-width: 768px) {

  .w3-half {
    width: 100% !important;
    display: block;
  }

  .w3-row {
    display: block;
  }

}