body{ 
    background-color:black;
    color: orange;
}

.slider{
    position :relative;
    width:100%;
    margin: auto;
    overflow:hidden;
    height: 500px;
    margin-bottom: 5px;
}

.slides{
    width:10 0%;
    height:100%;
}
.slider img{ 
    width:100%;
    height:100%;
    object-fit: contain;
    display:none;
}

img.displaySlide{
    display: block;
}

 .slider button{ 
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size:2rem; 
background-color: orange;

 }
 .prev{
    left:0;
 }

 .next{
    right:0;
 }

 .start-btn{
    color:black;
    background-color: rgb(253, 140, 2);
    text-align: center;
    display:block;
    margin: 0 auto;
    width:300px;
    height:100px;
    border:none;
 }



 .title{ 
 
    font-size: 50px;
    margin:0 auto;
    text-align: center;
    letter-spacing: 0.06em;
 }

 .welcome-banner{
    display:block;
   
    color: rgb(31, 25, 25);
    text-align: center;
    margin:0 auto;
    margin-bottom: 20px;
 }
 .welcome-pg{
 background-color:gold;
 
 }
  #wel-banner{
         width:100%;
       height:80px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: #f0f0f0;   
       margin: 5px;
       background-color: #000;
    }
#wel-img{
   height:100% ;
   width: 100%;
   object-fit:contain;
}

 .story-card{
    background-color: black;
    color:red;
    width: 90vw;
    height:400px;
    margin:14px;
    border-radius:20px ;
    text-align: center;
    margin: 10px;
    border:red;
    border-width: 60px;
    display: inline-block;
    position: relative;
 }

 .coverart { 
   object-fit: contain;
   width:300px;
   height: 180px;
   margin-bottom: 0;;
   
 }

 .close{
   display:none;
 }




#end-story{
   position: fixed;
 top: 30px;
 right: 15px;
       background: red;
       color: black;
       border: none;
       padding: 8px 15px;
       border-radius: 3px;
       font-weight: bold;
      
}


 
    #cover{
         width:100%;
       height: 300px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: #f0f0f0;   
       margin: 5px;
       background-color: #000;
    }
#cover img{
   height:100% ;
   width: 100%;
   object-fit:contain;
}
    #reader  {
     text-align: center;
       line-height: 0,7;
       margin-top: 15px;
   position: relative;
       top: 0;
       left: 0;
       max-width: fit-content;
      height: 100%;
       margin: auto;
       justify-content: center;
       align-items: center;
       color: black;
       background-color: #f0f0f0;
       display: none;
       overflow:scroll;
       overflow-y: auto;
      padding-left:15px;
      padding-right:20px ;
}

#chapter-content{ 
   margin:15px ;
}

.nav-btn{
  
  bottom: 20px;
  width:100%;
  padding: 5px 15px;
  display:flex;
  justify-content: space-between;

}
.blank-space{
   height:50px;
}

#prev-btn{
  border:none;
  color:#000;
  background-color: gray;
  padding:10px 14px;
  border-radius:6px;
  font-weight:bold;
  align-self: flex-start;
  font-size:2rem; 
  width: 100px;
}


#next-btn{
  border:none;
  color:#000;
  padding:10px 14px;
  border-radius:6px;
  font-weight:bold;
 align-self: flex-end;
width: 100px;
font-size:2rem; 
background-color: orange;
}





.modal{
  background-color: #111;
  color: orange;
  padding: 24px;
  border: 1px solid orange;
  border-radius: 14px;
  max-width: 640px;
  width: 90%;
  box-shadow: 0 0 40px rgba(255, 165, 0, 0.2);
  position: relative;
}



.close-modal{
  position: absolute;
  top: 16px;
  right: 18px;
  color: orange;
  font-size: 1.75rem;
  text-decoration: none;
}

.soon-content{
   display: grid;
   grid-template-columns: 500px 1fr;
    background-color:white;
    color: black;
padding:5px 10px;
}
.sideimg{
   height:100%;
   width:500px;
}

.sideimg img{
    height:100% ;
   width: 100%;
   object-fit:contain;
}
#soon{background-color: black;
border:gold  10px;
text-align: center;
padding:15px 30px;
max-width: fit-content;
      height: 100vh;
display:none ;}

.text{
  justify-content: center; 
}
.s-story-card{
    background-color: black;
    color:grey;
    width: 90vw;
    height:400px;
    margin:14px;
    border-radius:20px ;
    text-align: center;
    margin: 10px;
    border:red;
    border-width: 60px;
    display: inline-block;
 }
 .subscribe-container{
   display:flex;
   align-items: center;
   align-self: center;
 }
 .email-wrapper{
   width:0;
   overflow: hidden;
   opacity:0;
   transition: width 0.3s ease, opacity 0.3s ease;
 }
 .email-wrapper.open{
   width:220px;
   opacity:1; 
 }
 .email-wrapper input{
   width:200px;
   margin-left:10px;
   padding:8px;
   
 }
 .status{
  position: absolute;
  top:10px; 
  right:10px;
  color:whitesmoke;
  background-color:#c20808 ;
  border-radius: 30px;
  padding: 8px 16px;
  font-size:0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  
 }

 .top-note{
  position: absolute;
  top:100px;
  right:220px; 
  
padding-top:20px;
  z-index: 100;
  width:220px;
  background:#f7e27b ;
  color:#333;
  font-family: 'caveat', 'cursive';
  font-size:1.2rem;
 }

 .top-note::before{
  content:""; 
  position: absolute;
  top:-10px;
  left:50%; 
  transform: translateX(-50%), rotate(-5deg);

  width:70px;
  height:20px;

  background: rgba(255,255,255,.4);
  backdrop-filter: blur(2px);
 }

 .note{
  position: absolute;
  bottom:30px;
  left:220px; 
padding-top:20px;
  z-index: 100;
  width:220px;
  background:#f7e27b ;
  color:#333;
  font-family: 'caveat', 'cursive';
  font-size:1.2rem;
 }

 .note::before{
  content:""; 
  position: absolute;
  top:-10px;

  transform: translateX(-50%), rotate(-5deg);

  width:70px;
  height:20px;

  background: rgba(255,255,255,.4);
  backdrop-filter: blur(2px);
 }
 .outline{
  background-color: white;

 }

 footer {
  display: block; /* ensure footer is visible and separated */
  color: white;
  background: #111; /* dark footer background for contrast */
  padding: 20px;
  text-align: center;
  margin-top: 30px;
 }
 footer p{
  margin: 0 0 10px; /* add spacing below footer text */
 }
 footer a{
  color: orange; /* make footer links stand out */
  text-decoration: none;
  margin: 0 10px; /* space links apart */
 }
 footer a:hover{
  text-decoration: underline; /* improve link visibility */
 }

/* Layout container for story cards */
.storylist{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  width:100%;
  box-sizing: border-box;
  padding: 0 12px;
}

/* Make status headings use normal text sizing */
.status h1, .story-card .status h1{
  margin:0;
  font-size:inherit;
  line-height:1;
  font-weight:700;
}

/* Responsive/mobile adjustments */
@media (max-width: 600px) {
  .storylist{
    flex-direction:column;
    padding: 0 8px;
  }
  .story-card{
    display:block;
    width:100%;
    box-sizing:border-box;
    margin:10px 0;
    padding:14px;
    height:auto;
    border-radius:12px;
  }
  .coverart{
    width:100%;
    max-width:100%;
    height:auto;
    margin:8px auto;
  }
  .storyname{font-size:1.2rem;margin:6px 0}
  .preview{font-size:0.95rem;margin:6px 0}

  /* Reduce and reposition status so it doesn't cover content */
  .status{
    top:10px;
    right:10px;
    padding:4px 8px;
    font-size:0.7rem;
    border-radius:16px;
  }

  /* Make reader and notes flow instead of overlapping */
  #reader{
    max-width:100%;
    padding-left:12px;
    padding-right:12px;
    overflow:auto;
  }
  .top-note, .note{
    position: static;
    width: auto;
    margin:10px auto;
    padding:10px 12px;
    font-size:1rem;
    right:auto;
    left:auto;
  }
  .top-note::before, .note::before{display:none}
  .nav-btn{flex-direction:row;gap:8px}
  #prev-btn, #next-btn{font-size:1rem;width:auto;padding:8px 12px}
}

/* Welcome Banner Email Subscription Styles */
.wel-banner {
  width: 100%;
  padding: 20px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border-radius: 10px;
  margin: 15px 0;
  color: white;
  text-align: center;
}

.wel-banner h3 {
  margin: 0;
  font-size: 18px;
  color: #ffd700;
}

.wel-banner p {
  margin: 10px 0;
  color: #e0e0e0;
  font-size: 14px;
}

.wel-subscribe-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}

.wel-toggle-btn {
  background-color: #c20808;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.wel-toggle-btn:hover {
  background-color: #a00606;
}

.wel-email-wrapper {
  width: 0;
  overflow: hidden;
  opacity: 0;
  transition: width 0.3s ease, opacity 0.3s ease;
  display: flex;
  gap: 5px;
}

.wel-email-wrapper.open {
  width: 300px;
  opacity: 1;
}

.wel-email-input {
  width: 200px;
  padding: 8px 12px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
}

.wel-submit-btn {
  background-color: #ffd700;
  color: #000;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.wel-submit-btn:hover {
  background-color: #ffed4e;
}

.slidebtn{
   background-color: #c20808;
   color: white;
   border: none;
   padding: 10px 20px;
   border-radius: 5px;
   cursor: pointer;
   font-weight: bold;
   transition: background-color 0.3s ease;
}