body {
     /* background-color: #202124; */
     background: linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)), url(bg.png) repeat;
     color: white;
     font-family: open sans;
     text-align: center;
 }

 #userInput {
     width: 300px;
     height: 30px;
     color: black;
     border: none;
     border-radius: 3px;
     padding: 3px;
 }

 #responseAudio {
     position: fixed;
     bottom: 0;
     width: 100%;
     display: none;
 }

 body .plyr--audio {
     position: fixed;
     bottom: 0;
     width: 100%;
     height: 100px;
     /* Adjust this value as needed */
 }

 .plyr__control {
     height: 80px;
     /* Adjust this value to match the height of .plyr--audio */
 }


 #responseImage {
     width: 50%;
     display: block;
     margin: 0 auto;
     margin-bottom: 20px;
     padding-top: 20px;
     border-radius: 20px;
     height: auto;
 }

 .loadinggif {
     display: none;
     width: 60px;
     height: 60px;
     /* Center the image */
     margin: 0 auto;
     padding-top: 40px;
     display: block;
 }

 .story {
     display: none;
     max-width: 400px;
     background-color: rgba(0, 0, 0, .7);
     margin: 0 auto;
     padding-top: 20px;
     margin-top: 20px;
     border-radius: 20px;
     padding: 5px;
     text-align: left;
 }

 #storiesGrid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 20px;
     padding: 0px;
     margin: 0 auto;
     max-width: 90%;
     scroll-snap-type: y mandatory;
     /* overflow-y: scroll; */
 }

 #storiesGrid div {
     border: 0px solid #ccc;
     border-radius: 20px;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     /* Changed from space-between to flex-start */
     align-items: center;
     height: 100%;
     background-color: rgba(0, 0, 0, .8);
     cursor: pointer;
     scroll-snap-align: start;
 }

 #storiesGrid div:hover {
     background-color: rgba(255, 255, 255, 0.3);
     /* Changes background color */
     transform: scale(1.04);
     /* Slightly increases the size */
     transition: transform 0.3s;
     /* Animates the transform property */
 }

 #storiesGrid div p {
     padding: 0 5px 5px;
     font-size: 24px;
     /* You may adjust these values as needed */
 }

 .section {}


 .story_image {
     width: 100%;
     object-fit: cover;
 }


 #controls {
     display: flex;
     justify-content: center;
     margin-top: 10px;
 }

 #apiButton,
 #getStoryList {
     margin: 0 10px;
 }

 #getStoryList {
     color: #4a90e2;
     background-color: white;
     border: 1px solid #4a90e2;
     border-radius: 5px;
 }

 #starIcon {
     width: 40px;
 }

 .material-symbols-outlined {
     font-variation-settings: 'FILL'0, 'wght'400, 'GRAD'0, 'opsz'48;
     color: yellow;
     font-size: 48px;
 }

 .material-symbols-outlined-clicked {
     font-variation-settings: 'FILL'1, 'wght'400, 'GRAD'0, 'opsz'48;
 }

 #upButton {
     position: fixed;
     bottom: 10px;
     right: 10px;
     z-index: 99;
     font-size: 18px;
     border: none;
     outline: none;
     background-color: #000;
     color: white;
     cursor: pointer;
     padding: 15px;
     border-radius: 4px;
     opacity: 0.7;
 }

 #upButton:hover {
     background-color: #777;
     /* Add a darker background on hover */
 }

.hero-section {
    position: relative;
    /* background-image: url('https://media.discordapp.net/attachments/1098978809732141066/1113521142653784194/BenZ_a_magical_childrens_book_letter_Z_9baea6c1-a2db-4eec-a671-1a10d3fa5f28.png?width=1363&height=764'); */
    /*background-image: url('https://cdn.discordapp.com/attachments/1098978809732141066/1124039661682184292/eggzbennyz_an_imaginative_magical_world_from_a_childrens_book_u_da1ee0f4-d614-4de0-96f2-5fc250a39c7a.png');*/
    background-image: url('https://cdn.discordapp.com/attachments/1098978809732141066/1124040240328351865/eggzbennyz_an_imaginative_magical_world_from_a_childrens_book_b_0c948bd6-a2b8-48b5-9234-f038c87f16f4.png');
    
    background-size: cover;
    background-position: center;
    min-height: 80vh;
    /* minimum height to 100% of the viewport height */
    padding-top: 64px; /* increase the padding-top value */
    /* For mobile devices */
}


 /* For screens larger than 600px */
 @media (min-width: 600px) {
     .hero-content {
         padding-top: 64px;
     }
 }

 .hero-content {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

.mdc-top-app-bar {
    background-color: #333;
    /* Replace with any dark grey color you want */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    /* Ensures the app bar stays on top */
    height: 64px; /* add a height that matches the padding-top of .hero-section */
}


 #userInput {
     background-color: rgba(255, 255, 255, 0.8);
     /* semi-transparent white */

 }

 .input-group {
     display: flex;
     justify-content: space-between;
     align-items: center;
     border: 1px solid #ccc;
     border-radius: 4px;
     padding: 4px;
     background-color: rgba(255, 255, 255, 0.5);
     /* white with 50% transparency */
 }

 .input-group input {
     border: none;
     flex-grow: 1;
     padding: 1px;
 }

 .input-group button {
     /* background-color: black; */
     border: none;
     cursor: pointer;
     border-radius: 15px;
 }

 .input-group button:focus {
     outline: none;
 }

 .input-group i {
     color: #666;
 }

 #center-section {
     display: flex;
     justify-content: center;
     /* align horizontal */
     align-items: center;
     /* align vertical */
     height: 100%;
     /* ensure full height */
 }

 #backButton {
     border: none;
     background: transparent;
     color: white;
     /* You can adjust this as needed */
     cursor: pointer;
 }

 #grid_header {
    font-size: 32px;
 }
 #centerText {
    
 }

.story_container {
    /* Other CSS properties */
    margin-bottom: 120px;
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
    text-align: center;
}
.removeIcon {
    cursor: pointer;
    color: red;
    margin-left: auto;
    /* Other CSS properties as needed */
}

.generate-audio-button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    transition-duration: 0.4s;
}

.generate-audio-button:hover {
    background-color: #45a049;
}