/* @import url('https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&display=swap');*/


@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

:root {
    --primary-blue: #4db8ff;    /* Cheerful Sky Blue */
    --accent-yellow: #ffde59;  /* Soft Sunshine Yellow */
    --soft-green: #7bed9f;    /* Minty Green */
    --playful-pink: #ff7eb9;   /* Bubblegum Pink */
    --text-dark: #2f3542;
    --bg-light: #f0f9ff;       /* Very light blue tint */
    --card-radius: 25px;       /* Extra rounded corners */
}

.main-nav {
    /* Applying the colorful background */
    background: var(--nav-gradient);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 12px 0;
    width: 100%;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.logo {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-color);
}

.nav-links {
    display: flex;
    gap: 20px;
    align-items: baseline;
}

.nav-links a { 
            text-decoration: none; 
            color: var(--text-main); 
            margin-left: 20px; 
            font-weight: 600;
            font-family: 'Fredoka', sans-serif;
        }

.nav-item, .drop-trigger {
    text-decoration: none;
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
}

/* Dropdown Logic */
.nav-dropdown {
    position: relative;
}

.drop-menu {
    display: none;
    position: absolute;
    /* Adjust this value: 100% is the bottom of the container. 
       If it's too low, try 90% or a specific pixel value. */
    top: 95%; 
    left: 0;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-size:18px;
    min-width: 200px;
    z-index: 1000;
    border-radius: 0 0 8px 8px; /* Rounded only at the bottom */
    
    /* This removes any unintentional gap */
    margin-top: 0; 
    padding: 10px 0;
}
.drop-menu a {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: #333;
}

.drop-menu a:hover {
    background-color: #f5f5f5;
}

.nav-dropdown:hover .drop-menu {
    display: block;
}


 

.logo {
    display: flex;
    align-items: center;
    font-size: 1.5em;
    font-weight: 800; /* Extra Bold */
}

.logo img {
    height: 80px; /* Adjust size */
    margin-right: 10px;
}

 .nav-item, .drop-trigger {
    /* The "Sweet Spot" for readability */
    font-size: 18px; 
    
    /* Slightly heavier weight to pop against the colorful background */
    font-weight: 600; 
    
    /* Increases space between letters for a cleaner look */
    letter-spacing: 0.5px; 
    
    /* Ensures the font looks smooth on all screens */
    -webkit-font-smoothing: antialiased;
    
    text-decoration: none;
    color: var(--nav-text) !important;
    transition: all 0.3s ease;
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .nav-item, .drop-trigger {
        font-size: 20px; /* Larger on mobile for easier "tapping" with fingers */
        padding: 15px 0;
    }
}
.sidebar h2 {
    font-family: var(--font-heading);
    font-size: 1.5em;
    font-weight: 700;
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--color-secondary);
}

.recommendation-card {
    background: #fff;
    border: 2px solid #eef2f3;
    
    border-radius: var(--card-radius);
    margin-bottom: 30px;
}

.recommendation-card img {
    width: 300px;
    height: 300px;
    max-height: 100%;
 
    border-radius: 10px;
    margin-bottom: 10px;
}

 

 

/* --- Article Images (The "Sticker" Look) --- */
.story-illustration, .recommendation-card img {
    border: 8px solid white;
    border-radius: var(--card-radius);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.recommendation-card:hover img {
    transform: rotate(2deg) scale(1.02);
}

body {
    background-color: var(--bg-light);
    /* Fredoka or Quicksand are excellent rounded fonts for kids */
    font-family: 'Quicksand', 'Fredoka', sans-serif; 
    color: var(--text-dark);
}
  .grid {
    display: block;
  
    }
    
/* --- Playful Typography --- */
h1, h2, h3, h4 {
    font-family: 'Fredoka', sans-serif;
    color: var(--primary-blue);
    letter-spacing: 0.5px;
}

h1 {
    font-size: 3rem;
    text-shadow: 2px 2px 0px #ffffff, 4px 4px 0px rgba(0,0,0,0.05);
    text-align: center;
    margin-bottom: 30px;
}
/* --- Comments Section --- */
.comment-section {
    background: white;
    border-radius: var(--card-radius);
    padding: 30px;
    border: 4px solid var(--soft-green);
}

.comment {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 10px;
    border-left: 5px solid var(--playful-pink);
}
/* --- Buttons & Interactive Elements --- */
#sc_submit_comment, .more-stories-btn, .tags a {
    background-color: var(--accent-yellow);
    border: 3px solid var(--text-dark);
    border-radius: 50px;
    padding: 10px 25px;
    font-weight: 700;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    box-shadow: 0 4px 0 var(--text-dark);
}

#sc_submit_comment:hover, .tags a:hover {
    transform: scale(1.05) rotate(-2deg);
    background-color: var(--soft-green);
}

#sc_submit_comment:active {
    transform: translateY(4px);
    box-shadow: none;
}
        
 
.comment-form textarea {
  width: calc(100% - 22px);
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  resize: vertical;
}

.comment-list {
  margin-top: 10px;
}

/* --- Tag Cloud --- */
.tags a {
    background: white !important;
    border: 2px solid var(--primary-blue) !important;
    color: var(--primary-blue) !important;
    font-size: 0.9rem;
}
.tagspage{
 grid-column: col 10 /span 10;
	     display:grid;
	     grid-gap: 5px;
	     grid-template-columns: 1fr 1fr 1fr 1fr ;
}
.tagspage a {
   
    font-size: 0.9rem;
}
  .box {
     
    
    padding: 0;
    
    margin: 0 0;
     
    }
    
    figure {

    display: flex;
    flex-flow: column;
    
   
    margin: auto;
 
}
.storytime{

    display:flex;
    flex-flow:column;
    padding:12px;
}
 .g-recaptcha {
     margin-top:-25px;
 }
 #fungifts img{
     
     width:100%;
 }

  @media screen and (min-width: 0px) {
    .grid {
      display: grid;
      grid-template-rows: (8, 1fr);
      grid-template-columns: repeat(12, 1fr);
      grid-gap: 10px;
      }
    .box {
      margin: 0;
      }
    .header {
      grid-column: span 12;
	 
      }
    .recentstories{
      grid-column: span 12;
	 
	      
    margin:auto;
      } 
      .articleimageleft{
          
              width:400px;float:left;padding-left:15px;
              height:300px;
 

      }

    
     .bottomblock {
      grid-column: span 12;
      }
      .footer {
      grid-column: span 12;
      color:white;
      background-color:black;
      }
      .tags{
      		  grid-column: col 10 /span 10;
	     display:grid;
	     grid-gap: 5px;
	     grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
      }
     
	  .tagpics{
		  width:100px;
		  height:100px !important;
	  }
      .tagpic{
      grid-column: span 4;
      }
      .tagdesc{
      grid-column: span 8;
      
      }
      .pagination{
       grid-column: span 12;
      }
	   .d{
        grid-column: col 3 / span 2;
        grid-row: row 2;
        display: grid;
		grid-gap: 10px;
        grid-template-columns: 1fr 1fr;
		}
	
	
	  .articlesummary {
	    grid-column: 2;
        grid-row: 2;
	  }
	  
	  .g {
	     grid-column: col 3 /span 3;
	     display:grid;
	     grid-gap: 10px;
	     grid-template-columns: 1fr 1fr 1fr;
	  }
	  .g1 {
	     grid-column:1;
	  }
	  
	  .g2 {
	     
	  }
	  .bookreviews{
		  grid-column: col 5 /span 5;
	     display:grid;
	     grid-gap: 10px;
	     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	  }
	  .homestoryblocks{
		  grid-column: col 6 /span 6;
	     display:grid;
	     grid-gap: 10px;
	     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	  }
	  
	   @media screen and (min-width: 800px) {
	   .cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: auto;
        grid-gap: 1rem;
        }
 
 
 
        .card {
        
        padding: .5rem;
        }
	   }
  
    }
 @media screen and (min-width: 600px) { 
    .articlelayout {
  display: grid;
  grid-template-columns: 9fr 3fr;
  grid-template-rows: 1fr;
  gap: 0px 20px;
  grid-template-areas:
    "s t";
}
        .t { grid-area: t; }
.s { grid-area: s; }

 }
 
  @media screen and (min-width: 600px) { 
    .hmlayout {
  display: grid;
  grid-template-columns: 6fr 6fr;
  grid-template-rows: 1fr;
  gap: 0px 20px;
  grid-template-areas:
    "h r";
}
        .h { grid-area: h; }
.r { grid-area: r; }

 }
    
    
    
 .bookreviewstitle{
	 font-size:0.75em;
	 line-height:1em;
 }
 .substory{
     
     font-size: 0.8em;
    line-height: 1.25;
    overflow:hidden;
   
    
    
 }
 
 .substoryhmpage1{
      font-size: 0.8em;
    line-height: 1.25;
     
    height:98px;
     
 }
 
 .substoryhmpage{
      font-size: 0.8em;
    line-height: 1.25;
    overflow:hidden;
    height:98px;
     
 }
 .substoryhmpage img{
     
      float:left;padding-right:5px; 
     
 }
  .substoryhmpage1 img{
     
      width:25%;float:left;padding-right:5px; 
     
 }
 .substory img{
     
     
 }
 .grid-sizer,
 .grid-item {  }
 .gutter-sizer { width: 4%; }
.grid-item--width2 { width: 48%; }
.pagination {
  display: inline-block;
}

.imageHolder {
       
       
      float:left;
       display: inline-block;
      margin-right:5px;
    }
    .imageHolder img {
       width:100%;
       height:100%;
    }
    figcaption{
     
        font-size:small;
    }
    .imageHolder figcaption {
     
     
     
      left: 0px;
      text-align:center;
      font-weight:bold;
      font-style:italic;
      margin-top:-50px;
  
 	
 
    }
.nextstoryblock{
 
	 
	cursor:pointer;
	background-color:aquamarine;
 
    
}
.homeimg{
    
    float:left;
    padding-right:5px;
}
.storyblock{
	cursor:pointer;
	 
}
.commentblock{
    background-color:aliceblue;
}
.headlineimage{
    
    height:500px;
    float:left;
    padding-right:15px;
}
.storyblock img {
	cursor:pointer;
	width:100%;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  font-size:12px;
 
}

.storytitle{
    
    background-color: #000000;
    color:white;
    padding-bottom: 2px;
    padding-top: 2px;
    padding-left: 5px;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

/* Add a black background color to the top navigation */
.topnav {
  background-color:  var(--color-primary);;
  overflow: hidden;
  margin:auto;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
 font-size:100%;
 
}

/* Add an active class to highlight the current page */
.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
  
 
}
.contentblock{
	display:inline-block;
	background-color:white;margin-top:-30px;
	width:100%;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
  
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size:100%;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size:100%;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
  
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content,
.dropdown:focus .dropdown-content {
    display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
 .sidebar {
    background: white;
    padding: 20px;
    border-radius: var(--card-radius);
    border: 3px dashed var(--primary-blue); /* Playful dashed border */
}
.sidebar2 img
{
max-width:100%;
width:100%;

}
.sidebar1 img
{
max-width:100%;
width:100%;
}
.recentstories img
	{
	 
	
	}
/* Style the list */
ul.breadcrumb {
    padding: 10px 16px;
    list-style: none;
    background-color: #eee;
	margin-top:1px;
}

/* Display list items side by side */
ul.breadcrumb li {
    display: inline;
    font-size: 18px;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
    color: #0275d8;
    text-decoration: none;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
    color: #01447e;
    text-decoration: none;
}
.linknew{

	text-decoration:none;	
}

.linknewsidestory {
    text-decoration:none;
    border: 1px solid black;
    display: block;
	border-radius: 25px;
    padding-left: 12px;
    padding-right: 15px;
    padding-bottom: 19px;
	padding-top:10px;
	font-size:21px;
	
}
.linknewsidestory img { 

    height:262px;
    width:500px;
}


.shopfeeds img{

		width:100%;
}
blockquote{
	font-style:italic !important;
	background-color:whitesmoke !important;
}


/* for title to overlap images*/

.container {
            max-width: 1100px;
            margin: 2rem auto;
            display: grid;
            grid-template-columns: 1fr 300px;
            gap: 2rem;
            padding: 0 20px;
        }

@media (max-width: 850px) {
            .container { grid-template-columns: 1fr; }
        }

/* Centered text */
.centered {
  position: absolute;
  top: 80%;
  left: 50%;
  background-color:white;
  transform: translate(-50%, -50%);
}



.storyparagraph {
        margin-top:-61px;
}

#slideshow { 
  margin: 50px auto; 
  position: relative; 
  width: 240px; 
  height: 240px; 
  padding: 10px; 
  box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
  position: absolute; 
  top: 10px; 
  left: 10px; 
  right: 10px; 
  bottom: 10px; 
}
    
 

.storyimage{
    float:left;width:200px;padding-right:5px;
}
.hmstoryblock{
    
    display:table;
}
.inlineimageleft{
    
    float:left;padding-right:5px;
}
.inlineimageright{
    
    float:right;padding-left:5px;
}
 
.otherstories{
    
    vertical-align:top;
}
.homeblocks{
    
    display:inline-block;
}
 
.articleimage{
    
    text-align:center;
    background-color:beige;
    width:500px;
    height:500px;
 
}
.articleimagediv{
    float:left;
    height:300px;
    width:300px;
    padding-right:5px;
    padding-bottom:25px;
    
}
.subimages{
    height:220px;
    width:100%;
}

@media all and (max-width: 600px)  {  .slickclass  { height:275px;  } }
@media all and (max-width: 600px)  {  .giftslider img  { height:200px;  } }
@media all and (max-width: 600px)  {  .substory  { font-size:1em;  } }
/*@media all and (min-width: 300px)  {  .articleimage {height:200px;width:200px;padding-right: 10px;
    float: left;}}
    @media all and (min-width: 900px) {  .articleimage {height:400px;padding-right: 10px;float: left;}}*/
@media all and (min-width: 100px)  {.articleimagediv {height:370px;width:100%;} .story-illustration {height:360px;width:100%;}}
@media all and (min-width: 360px)  {.articleimagediv {height:390px;width:100%;} .story-illustration {height:380px;width:100%;}}
@media all and (min-width: 375px)  {.articleimagediv {height:400px;width:100%;} .story-illustration {height:390px;width:100%;} }
@media all and (min-width: 500px)  {.articleimagediv {height:405px;width:405px;padding-bottom:87px;} .story-illustration {height:395px;width:305px;}}
@media all and (min-width: 720px)  {.articleimagediv {height:500px;width:500px;padding-bottom:87px;} .story-illustration {height:500px;max-width:500px;}}
 
@media all and (min-width: 700px)  {.articleimagediv {height:500px;width:500px} .story-illustration {margin-top:25px;height:500px;width:500px} .linknewsidestory {width:300px;}}
@media all and (min-width: 1000px) {.articleimagediv {height:450px;width:500px;padding-bottom:80px;} .story-illustration {height:500px;width:500px;}}

 
@media all and (min-width: 50px) {
  body {
    font-size: 7vw;
  }

  .tagspage {
    grid-column: col 10 / span 10;
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 1fr 1fr;
  }
}
@media all and (min-width: 100px) {
  body {
    font-size: 7vw;
  }

  .tagspage {
    grid-column: col 10 / span 10;
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 1fr 1fr;
  }
}
@media all and (min-width: 200px) {
  body {
    font-size: 7vw;
  }

  .tagspage {
    grid-column: col 10 / span 10;
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
 
@media all and (min-width: 300px) {
  body {
    font-size: 7vw;
  }

  .tagspage {
    grid-column: col 10 / span 10;
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media all and (min-width: 400px) {
  body {
    font-size: 7vw;
  }

  .tagspage {
    grid-column: col 10 / span 10;
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media all and (min-width: 500px) {
  body {
    font-size: 7vw;
  }

  .tagspage {
    grid-column: col 10 / span 10;
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media all and (min-width: 600px) {
  body {
    font-size: 7vw;
  }

  .tagspage {
    grid-column: col 10 / span 10;
    display: grid;
    grid-gap: 5px;
    grid-template-columns: 1fr 1fr 1fr 1fr  1fr 1fr;
  }
}
@media all and (min-width: 700px)  {  body  { font-size:3.2vw;  } }
@media all and (min-width: 800px)  {  body  { font-size:3.2vw;  } }
@media all and (min-width: 900px)  {  body  { font-size:3.2vw;  } }
@media all and (min-width: 1000px) {  body  { font-size:3.2vw;  } }
@media all and (min-width: 1100px) {  body  { font-size:2.5vw;  } }
@media all and (min-width: 1200px) {  body  { font-size:2.5vw;  } }
@media all and (min-width: 1300px) {  body  { font-size:2.5vw;  } }
@media all and (min-width: 1400px) {  body  { font-size:2.5vw;  } }
@media all and (min-width: 1500px) {  body  { font-size:3.2vw;  } }
@media all and (min-width: 1600px) {  body  { font-size:3.2vw;  } }
@media all and (min-width: 1700px) {  body  { font-size:3.2vw;  } }  

.grid-container-gifts {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 4 equal columns */
  gap: 10px; /* Space between grid items */
}

.grid-item-gifts {
  aspect-ratio: 1 / 1; /* Ensures equal width and height */
  background-color: #ddd; /* Placeholder background color */
  display: flex;
  justify-content: center;
  align-items: center; /* Centers content */
  font-size: 20px; /* Example styling */
  border: 1px solid #ccc;
}

.custom-icon-list {
    list-style: none; /* Removes the default bullet */
    padding-left: 0;  /* Removes default left padding */
}

.custom-icon-list li {
    padding-left: 1.5em; /* Space for the custom icon */
    position: relative;
    line-height: 1.5;
    margin-bottom: 0.5em;
    font-family: Arial, sans-serif;
    color: #003366; /* Dark blue text */
}
.ad-box {
            background: var(--accent-warm);
            
            border-radius: 10px;
            text-align: center;
            font-weight: bold;
        }
.custom-icon-list li::before {
    content: "🐧"; /* The custom icon (an emoji) */
    position: absolute;
    left: 0;
    color: #4CAF50; /* A color could be applied if it wasn't an emoji */
    font-size: 1.2em;
}
 
/* rssfeed formatting starts */
.rss-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
        padding: 20px;
        background-color: #fdfbf7; /* Soft paper-like background */
    }
    .rss-card {
        background: #ffffff;
        border-radius: 20px;
        border: 2px solid #e0d7c6;
        box-shadow: 5px 5px 0px #e0d7c6; /* Playful flat shadow */
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: all 0.2s ease-in-out;
    }
    .rss-card:hover {
        transform: scale(1.02);
        box-shadow: 8px 8px 0px #cfc4b0;
    }
    .img-frame {
        width: 100%;
        height: 200px;
        overflow: hidden;
        border-bottom: 1px solid #eee;
    }
    .rss-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .rss-body {
        padding: 20px;
    }
    .rss-title {
        font-family: 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif; /* Friendly font */
        font-size: 1.2rem;
        color: #4a90e2;
        text-decoration: none;
        display: block;
        margin-bottom: 8px;
        line-height: 1.3;
    }
    .rss-date {
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #999;
        margin-bottom: 5px;
    }
    .rss-desc {
        font-size: 0.9rem;
        color: #555;
        line-height: 1.5;
    }

/* rssfeed formatting ends */
.promgreen {
    margin-top: 20px;
    padding: 15px;
    background-color: #dcfce7;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
}

.woosh {
    margin-bottom: 15px;
    font-weight: bold;
    text-align: center;
    color: #c2410c;
}

.promwhite {
    background-color: #ffffff;
    padding: 15px;
    border-left: 5px solid #16a34a; /* Moved to one line */
    margin-bottom: 15px;
    font-style: italic;
    border-radius: 4px;
}

.porange {
    color: #e67e22;
    font-weight: bold;
}

.pgreen {
    color: #27ae60;
    font-weight: bold;
}



.storybook-container {
        max-width: 800px;
        margin: 20px auto;
        background-color: #ffffff;
        padding: 40px;
        border-radius: 15px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        border: 5px solid #ffcc00;
        color: #333;
        line-height: 1.6;
        font-family: sans-serif;
    }
    
    .subtitle {
        text-align: center;
        font-style: italic;
        color: #666;
        margin-bottom: 30px;
    }

    .story-content p {
        margin-bottom: 20px;
        font-size: 1.1em;
    }

    .highlight {
        color: #2e7d32;
        font-weight: bold;
    }

    .dialogue {
        color: #0277bd;
        font-style: italic;
    }

    footer {
        margin-top: 40px;
        text-align: center;
        font-size: 0.9em;
        color: #888;
        border-top: 1px solid #eee;
        padding-top: 20px;
    }
    
    @media (max-width: 600px) {
        .storybook-container {
            padding: 20px;
        }
        h1 {
            font-size: 1.8em;
        }
    }
    


.watercolor-blob {
  background: radial-gradient(circle, #f8c8dc 0%, rgba(255,255,255,0) 70%);
  filter: blur(20px);
  opacity: 0.6;
  width: 200px;
  height: 200px;
  position: absolute;
  z-index: -1;
  /* Make it irregular */
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
}