@media only screen and (max-width: 1023px) {

    body {
        background-color: antiquewhite;
    }

    .onion-layer {
        background-image: radial-gradient(circle at center, rgba(153, 102, 51, 0.05) 0%, transparent 20%), radial-gradient(circle at center, rgba(153, 102, 51, 0.04) 20%, transparent 40%), radial-gradient(circle at center, rgba(153, 102, 51, 0.03) 40%, transparent 60%);
        background-repeat: no-repeat;
        background-size: 600px 600px;
        background-position: center;
        padding: 60px;
        border-radius: 12px;
        text-align: center;
    }

    /* Book Layout Section */


    .book-page {
        background-image: url('../PBO/Images/6x9_OpenBook.jpg');
        background-repeat: no-repeat;
        background-position: center;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        box-sizing: border-box;
        margin: 0 auto;
        padding: 2rem;
        width: 950px;
        height: 675px;
        margin-top: 20px;
    }

    .song-text {
        text-align: center;
        font-family: 'Dancing Script';
        font-size: 2rem;
        color: #442c1e;
        margin-top: 20px;
    }

    .chapter-title {
        font-family: 'Dancing Script', cursive;
        font-size: 3rem;
        color: #442c1e;
        text-align: center;
    }


    .centered-image {
        display: block;
        margin: 1rem auto;
        width: 300px;
        border-radius: 12px;
        opacity: 0.9;
        transition: opacity 0.3s ease;
        cursor: pointer;
    }

    .ivorytongue-image {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
        border-radius: 12px;
        box-shadow: 0 0 20px rgba(0,0,0,0.5);
    }

    .audio-player {
        display: block;
        margin: 2rem auto 0 auto;
        width: 90%;
        max-width: 400px;
    }


    .rounded-image {
        border-radius: 12px; /* Adjust the value for more or less rounding */
    }

    .landing-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 60px;
        height: 100vh;
        text-align: center;
        background-image: radial-gradient(circle at center, rgba(153,102,51,0.06) 0%, transparent 30%);
        background-color: #f8f4ec;
    }

    .book-cover {
        max-width: 300px;
        margin-bottom: 30px;
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    }

    .intro-text {
        font-family: 'Georgia', serif;
        font-size: 1.2rem;
        color: #442c1e;
        margin-bottom: 20px;
    }

    .peel-button {
        font-family: 'Dancing Script', cursive;
        font-size: 1.6rem;
        padding: 12px 24px;
        background-color: #997d66;
        color: #fff;
        border-radius: 8px;
        text-decoration: none;
        transition: background-color 0.3s ease;
    }

        .peel-button:hover {
            background-color: #776250;
        }

    .grid-container {
        padding: 60px 20px;
        background-color: #f8f4ec;
        text-align: center;
    }

    .grid-title {
        font-family: 'Dancing Script', cursive;
        font-size: 2.4rem;
        margin-bottom: 40px;
        color: #442c1e;
    }

    .tile-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 20px;
        justify-items: center;
    }

    .tile {
        text-decoration: none;
        color: inherit;
        transition: transform 0.2s ease;
    }

        .tile:hover {
            transform: scale(1.05);
        }

    .tile-image {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .tile-caption {
        display: block;
        margin-top: 8px;
        font-size: 0.9rem;
        font-family: 'Georgia', serif;
    }
}