* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: serif;
    background: #77b8c9;
    color: #000;
}

.site {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

.header {
    margin-bottom: 30px;
}

.top-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.top-nav a {
    text-decoration: none;
    color: #000;
}

.top-nav a:hover {
    text-decoration: underline;
}

.start-reading {
    font-weight: bold;
}

main {
    min-height: 300px;
}

.extras ul,
.chapter-list {
    list-style: none;
    padding: 0;
}

.extras li,
.chapter-list li {
    margin: 8px 0;
}

.comic-page img,
.cover img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.footer {
    margin-top: 40px;
    font-size: 0.9em;
}
.description-box {
    border: 3px solid #000;       /* Black border */
    padding: 20px;                /* Space inside the box */
    margin: 20px auto;            /* Centered horizontally with space above/below */
    max-width: 700px;             /* Limit width so it doesn’t stretch too far */
    background-color: rgba(255,255,255,0.2); /* Optional: slightly transparent background */
    border-radius: 10px;          /* Rounded corners for nicer look */
}
.logo img {
    max-width: 300px;     /* Adjust size as needed */
    height: auto;
    display: block;
    margin: 0 auto;       /* Centers the logo */
}

/* Links: always underlined, never purple */
/* Small image under home description */
.home-image {
    margin-top: 15px;
    text-align: center;
}

.home-image img {
    max-width: 80px;   /* small */
    height: auto;
}
/* Home image – mobile safe */
/* Home image – mobile safe */
.home-image img {
    width: 120px;
    max-width: 120px;
    height: auto;
    display: block;
    margin: 0 auto;
}

@media (max-width: 600px) {
    .home-image img {
        width: 70px;
        max-width: 70px;
    }
}