.container { 
    position: absolute;
    height:100%;
    width: 100%;
    top: 0px;
    left: 0px;
}
.bl-main {
	position: fixed;
	width: 100%;
	height:100%;
    left: 0px;
    margin-left: 0px;	
    overflow-x: hidden;
	overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}
a {
	text-decoration: none;
	font-weight: 100;
	letter-spacing: 0.06em;
	padding: 0 5px;
	text-transform: uppercase;
	font-size: 80%;
    cursor: pointer;
}
a:hover {
	/*color: #fff;*/
}
.visit {
	margin-left: 0px;
	color: #b1ebf1;
	}
.buy {
    margin-right: 6px;
    left: 0;
    margin-left: -5px;
    color: #ffe79e;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    position: relative;
	}

.buy i {
    font-size: 0.9em; /* Slightly reduces icon size to match text height */
  /*  line-height: 1; /* Ensures proper alignment */
    position: relative;
    top: -2.25px; /* Move up as needed */
}

.infoarea h2 {
	font-family: 'DarwinBold', Verdana, Geneva, sans-serif;
	font-weight: normal;
	color: #EBEDDE;
	font-size: 2.2em;
	line-height: 110%;
	text-align: left;
	letter-spacing: 0.03em;
	text-decoration: none;
	margin: 0;
    padding-left: 10%;
    padding-right: 10%;
	margin-top: 20px;/* JIm changed to move title selections up*/
	text-transform: uppercase;
}

.infoarea p {
	margin: 0 auto;
	padding-bottom: 15px;
	font-size: 1.3em;
	line-height: 150%;
    padding-left: 10%;
	padding-right: 10%; 
	padding-top: 20px;
}

.credit {
    font-size: 80%;
}
.stylelisten {
 display: inline-block;
    color:#dacfa7;
    font-size: 25px;
     line-height: 130%;
     text-transform: none;
}
.stylelistenbold {
    color:#EAEAEA;
   font-weight: bold;
	font-size: 120%;
   /*  font-style: italic;*/
}
.styleread {
    font-family: 'PT Sans', Verdana, Geneva, sans-serif;
    font-size: 1.2em;
    text-align: left;
    color:#dacfa7;
    line-height: 140%;
    padding: 0px 3% 20px 0%;
    margin: 0;
    display: inline-block; /* to allow padding/margin to behave like a block */
    text-transform: none;
}
#toggle-sound{
    position: relative;
    z-index: 10;
    height: 100px;
    width: 80%;
    min-width: 110px;
    cursor: pointer;
    margin-bottom: 28px;
    padding-right: 10%;
}



/* one place to control icon size & spacing */
:root { --icon-size: 36px; --icon-gap: 12px; }

/* wrapper paragraph: gives the same left/right padding as your other .infoarea p */
.btnRow {
  margin: 0 0 20px 0;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 20px;
  padding-bottom: 15px;
}

/* works for BOTH <a class="btnsNew">…</a> and <p class="btnsNew">…</p> */
/* the flex row for icon + text */
.btnsNew {
  display: flex;
  align-items: flex-start;
  gap: var(--icon-gap, 12px);
  text-decoration: none;
  text-transform: none;
  color: #d7f9e3;
  line-height: 1.3;
  width: 100%;
  cursor: pointer;
}
.btnsSound {
  display: flex;
  align-items: flex-start;
  gap: var(--icon-gap, 12px);
  text-decoration: none;
  text-transform: none;
  color: #d7f9e3;
  line-height: 1.3;
  width: 100%;
  cursor: pointer;
}
.btnsNew * {
  text-transform: none;
}
/* make entire row clickable when it's an <a> */
/* reset global <a> styles for button rows so they align with <p> rows */
/* anchors shouldn’t add extra padding/size */
a.btnsNew {
  padding: 0;
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* left column: fixed width equal to icon size */
/* fixed icon column */
.btnsNew .icon {
  flex: 0 0 var(--icon-size, 36px);
  width: var(--icon-size, 36px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  line-height: 1;
}
.btnsSound .icon {
  flex: 0 0 var(--icon-size, 36px);
  width: var(--icon-size, 36px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  line-height: 1;
}


/* the actual font-awesome icon */
.btnsNew .icon i { font-size: var(--icon-size, 36px); color: #d7f9e3; }
.btnsSound .icon i { font-size: var(--icon-size, 36px); color: #d7f9e3; }


/* right column: text block */
/* text column */
.btnsNew .text {
  flex: 1 1 auto;
  color: #dacfa7;
  font-size: 25px;
  line-height: 1.3;
  text-transform: none;
}

/* bold variant used in the “Ashes to Algorithms” line */
.stylelistenbold {
  color: #EAEAEA;
  font-weight: bold;
  font-size: 120%;
}

/* optional: remove stray &nbsp; spacers and use margins instead */
.btnsNew + .btnsNew { margin-top: 8px; }
.btnsSound + .btnsSound { margin-top: 8px; }

/* keep any special sizing you want on specific rows */
#toggle-sound.btnsSound { height: auto; }
#readBtn.btnsNew { height: auto; }


/*
.infoarea .btnsNew { width: 100%; }


.infoarea a.btnsNew {
  display: block;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 20px;
  padding-bottom: 15px;
}
*/
/*#readBtn{
    position: relative;
    z-index: 10;
    height: 80px;
    width: 90%;
    min-width: 100px;
    cursor: pointer;
    margin-bottom: -20px;
}
*/
#cellobook3 {
	position: absolute;
	width: 326px;
	height: 350px;
	left: 50%;
	top: 0px;
	margin-left: -110px;
	margin-top: 30px;  
    pointer-events: none;
	}

.infoarea {
    position: relative;
    top: 0;
    left:0;
    height: 100%;
    width: 100%;
    padding-top: 380px;    
}


@media screen and (min-width: 640px) {
.infoarea {
    position: relative;
    top: 0;
    left: calc(40% - 40px);
    height: 100%;
    width: 55%;
    padding-top: 30px;   
}
	
#cellobook3 {
	position: fixed;
	width: 326px;
	height: 350px;
	left: 40%;
	top: 20%;
	margin-left: -240px;
	margin-top: -5%;
	}
.btnsNew .text {
  font-size: 20px;
}
}







@media screen and (min-width: 768px) {



@media  (min-height: 560px) {
.infoarea {
    position: relative;
    top: 0;
    left: calc(40% + 25px);
    height: 100%;
    width: 50%;
    padding-top: 10%;  
}	
#cellobook3 {
	position: fixed;
	width: 407px;
	height: 437px;
	left: 40%;
	top: 10%;
	margin-top: -5%;
	margin-left: -230px;
	}

	
}/*min height 560*/
}/*min widht 768*/





@media screen and (min-width: 1024px) {
    
@media  (min-height: 560px) {

#cellobook3 {
	position: fixed;
	width: 508px;
	height: 546px;
	left: 40%;
	top: 80px;
	margin-top: 3%;
	margin-left: -350px;
	}
	
}/*min height 560*/
}/*min widht 1024*/



/*..........................................................................*/
/*..........................................................................*/
/*..........................................................................*/