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

    body {
        background-color: antiquewhite;
    }

    .book-page {
        flex-direction: column;
        align-items: center;
        padding: 1rem;
        background-image: none;
        width: 100vw;
        height: 100vh;
    }

    .book-left,
    .book-right {
        width: 100%;
        margin-bottom: 2rem;
    }
}


    .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: 100vw 100vh;
        background-position: center;
        padding: 10px;
        border-radius: 12px;
        text-align: center;
    }

    .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-top: 20px;
        margin-left: auto;
        margin-right: auto;
        width: 300px; /* or whatever size you want */
        border-radius: 12px;
    }


.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: flex;
        justify-content: center;
        align-items: center;
        margin: 40px 0;
    }

    .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;
    }
}