body {
    font-family: '新細明體', 'PMingLiU', 'MingLiU', serif;
    margin: 0;
    background: #f9f9f9;
    font-size: 16px; /* Increased base font size */
}



main {
    max-width: 700px;
    margin: 5% auto; /* Percentage-based margin from screen edges */
    background: #fff;
    padding: 0; /* Remove padding so images can touch main area edges */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

/* Main image container */
.main-image {
    text-align: center;
    margin: 0; /* Removed all margins */
    margin-left: -4em; /* Negative margin to counteract section padding */
    margin-right: -4em; /* Negative margin to counteract section padding */
}

.content-image {
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    /* box-shadow removed */
}

/* Make image2 larger and right-aligned */
.image2-small-right {
    width: 320px;
    max-width: 70%;
    float: right;
    margin: 0; /* Removed all margins */
    display: block;
    object-fit: cover;
    /* box-shadow removed */
}
/* Responsive design for content image */
@media (max-width: 768px) {
    .content-image {
        height: auto;
    }
    
    main {
        margin: 2% auto; /* Reduced margin for mobile */
    }
    
    section {
        padding: 0 1.5em 1.5em 1.5em; /* Reduced padding for mobile */
    }
    
    h1 {
        font-size: 1.8em; /* Smaller heading size for mobile */
    }
    
    h2 {
        font-size: 1.3em; /* Smaller h2 size for mobile */
    }
    
    p {
        font-size: 1em; /* Smaller paragraph text for mobile */
    }
    
    ol {
        font-size: 1em; /* Smaller list text for mobile */
        padding-left: 3em; /* Reduced list indentation for mobile */
    }

}

@media (max-width: 480px) {
    .content-image {
        height: auto;
    }
    
    main {
        margin: 1% auto; /* Very reduced margin for small mobile */
    }
    
    section {
        padding: 0 1em 1em 1em; /* Very reduced padding for small mobile */
    }
    
    h1 {
        font-size: 1.6em; /* Even smaller heading for very small screens */
    }
    
    h2 {
        font-size: 1.2em; /* Even smaller h2 for very small screens */
    }
    
    p {
        font-size: 0.95em; /* Even smaller paragraph text for very small screens */
    }
    
    ol {
        font-size: 0.95em; /* Even smaller list text for very small screens */
        padding-left: 2.5em; /* Further reduced list indentation */
    }
}

h1, h2 {
    color: #2d3e50;
}

h2 {
    font-size: 1.5em; /* Increased h2 size */
    margin: 1em 0; /* Only top and bottom margin */
}

h1 {
    text-align: left;
    margin: 1.2em 0; /* Only top and bottom margin */
    color: #2d3e50;
    font-weight: bold;
    font-size: 2.2em; /* Increased heading size */
}

section {
    margin-bottom: 2em;
    padding: 0 4em 4em 4em; /* Add padding for text content only */
}

p {
    line-height: 1.8;
    text-align: left;
    font-size: 1.1em; /* Increased paragraph text size */
    margin: 1em 0; /* Only top and bottom margin */
}

ol {
    line-height: 1.8;
    margin: 1em 0; /* Only top and bottom margin */
    color: #000; /* Black bullet points/numbers */
    font-size: 1.1em; /* Increased list text size */
    padding-left: 5em; /* Increased indentation for bullet points */
}
ol li {
    margin-bottom: 0.5em;
}
ol li a {
    color: #1155cc; /* Blue color for hyperlinks like in Word documents */
    text-decoration: underline;
    transition: color 0.2s;
}
ol li a:hover {
    color: #0d47a1; /* Darker blue on hover */
    text-decoration: underline;
}


/* Ensure all text elements are left-aligned with same starting point */
h1, h2, h3, h4, h5, h6, p {
    text-align: left !important;
}


/* Keep bullet points with their indentation but align text left */
ol li {
    text-align: left;
}