html {
    background-image: url('img/drgn_tile.png');
    /* Use a fixed pixel size so the tile does not scale with the viewport */
    background-repeat: repeat;
    background-position: center top;
    background-size: 200px 200px;
    font-family: 'Times New Roman', Times, serif;
}


.content {
    margin: 2rem auto;
    background-color: white;
    border-radius: 10px;
    max-width: 75%;
    padding: 1.5rem;
    box-sizing: border-box;
}

article {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}


/* Layout each content row: paragraph left, figure right */
section {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

/* Paragraph takes remaining space on the left */
section p {
    flex: 1 1 60%;
    margin: 0;
}

/* Figure stays to the right and keeps its intrinsic size (but constrained) */
section figure {
    flex: 0 0 35%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Figcaption below the image and slightly styled */
section figure figcaption {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    text-align: center;
}

/* Make images responsive inside their figure */
section img {
    max-width: 50%;
    max-height: 50%
    /* height: auto;
    display: block; */
}

/* Ensure any submission button style remains valid and outside nested rules */
#submission-button {
    align-items: center;
    margin: 1%;
}

/* Small screens: stack paragraph above figure to avoid overlap */
@media (max-width: 700px) {
    section {
        flex-direction: column;
        align-items: stretch;
    }
    section figure {
        flex: 0 0 auto;
        justify-content: center;
    }
}