@media screen and (max-width: 480px) {
/*triggers when the screen is 480px or smaller*/
  .image-container {
    display: flex;             /* Aligns images in a horizontal row */
    flex-direction: row;       /* Forces horizontal alignment */
    flex-wrap: nowrap;         /* Prevents images from wrapping to a new line */
    justify-content: space-between; /* Spaces them evenly across the screen */
    gap: 30px;                 /* Adds a small gap between the pictures */
    width: auto;               /* Ensures the container uses full width */
  }
}

* {
    box-sizing: border-box;
}

footer h5 {
    width: auto;
    max-width: 100%;
    margin: 20px 10px; /* Added horizontal margin to prevent touching screen edges */
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: center;
}

body {
    overflow-x: hidden;
    width: 100%;
}

h5 {
    text-align: center;
    padding: 0px 10px;
    word-wrap: break-word;
    width: auto;
    max-width: 100%;
    margin: 22px 10px;
    overflow-wrap: break-word;
}

footer {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    font-size: 6px;
    margin-bottom: 4%;
}

/* Title */
h2 {
    position: relative;
    text-align: center;
    margin: 5% auto;
    margin-left: auto;
    margin-right: auto;
    font-size: 40px;
    color:rgb(64, 4, 94);
    text-shadow: 3px 1px 1px rgb(245, 214, 252);
    font-family: 'Vivaldi';
}

/* Box for next chapter */
.item {
    width: auto;
    height: auto;
    margin-top: auto;
    margin-left: auto;
    padding-top: auto;
    padding-bottom: auto;
    background-color:plum;
    background-color: rgba(221, 160, 221, 0.6);
    box-shadow: 8px 4px 8px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*CHapter section */
h1 {
    font-size: 1em;
    color:indigo;
    text-shadow: 2px 4px 5px rgb(228, 184, 249);
    text-align: center;
    font-family: 'Dumbledor 2 regular';
    
}