.container {
		max-width: 800px;
		margin: 50px auto;
		background-color: #ffffff;
		padding: 50px;
        overflow: auto;
	}
	body {
	font-family: 'Atkinson Hyperlegible', sans-serif;
	line-height: 1.5;
	background-color: #ba15ff;
	}
    .right {
        float: right;
        width: 300px;
    }
    .right figcaption { font-style: italic}
    .right img {
        width: 100%;
        height: auto;
        display: block;
    }
    .main-nav {
        max-width: 900px;
        width: 100%;
        margin: 50px auto;
        background-color: white;
        padding: 15px 0;

            }
	.nav-list {
        display: flex;
        list-style: none;
        justify-content: space-evenly;

    }
    .nav-list a {
        text-decoration: none;
        font-size: larger;
        font-weight: bold;
    }
    .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
        padding: 20px;
    }
    .gallery img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        transition: transform 0.5s ease;
        cursor: pointer;
    }
    .gallery img:hover {
        transform: scale(1.15);
    }

    .main-review {
        margin-bottom: 50px;
    }
    .layout-review {
        display: flex;
        gap: 30px;
        align-items: flex-start;
    }
    .text-review {
        flex: 2;
        padding: 0px;
    }
    .api-review {
        flex:1;
        text-align: center;
        padding-top: 20px;
    }
    .api-review p {
    margin: 4px 0;          /* Shrinks the massive default gap to just 4px */
    font-size: 0.9rem;      /* Makes the text slightly smaller than the main review */
    line-height: 1.3;       /* Tightens the space between lines */
    }
    .api-review img {
        max-width: 100%;
        margin-bottom: 10px;
    }

    .text-box {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 8;
        overflow: hidden;
    }

    .text-box-open {
        display: block;
    }

    .read-more-btn {
        font-weight: bold;
    }

    /* This rule only triggers when the screen is 600px wide or less */
    @media (max-width: 600px) {
        .layout-review {
            flex-direction: column; /* Stacks the text and the API box vertically */
            align-items: center; /* Centers the book cover on the phone screen */
        }

        .text-review {
            width: 100%; /* Makes the text take up the full width of the phone */
            margin-bottom: 20px; /* Adds a gap between the text and the book cover below it */
        }

        .api-review {
            width: 100%;
            text-align: center; /* Centers the "Title/Author" text under the cover */
            border-left: none; /* Removes the side-border if you had one */
            border-top: 1px solid #ddd; /* Optional: adds a separator line instead */
            padding-top: 20px;
        }

    }
    .strophe p {
        line-height: 1.25;
        text-decoration: wavy;
        text-align: center;
    }
    .strophe h3 {
        text-align: center;
    }