body {
background: #faf9f6;
font-family: "微軟正黑體", "Comic Sans MS", cursive, Arial, sans-serif;
color: #333;
padding: 0;
margin: 0;
}
.container {
max-width: 850px;
margin: 40px auto;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
padding: 35px 28px 40px 28px;
}
.header-info {
background: linear-gradient(90deg,#f9dadf 0,#fdf6e3 100%);
border-radius: 6px;
padding: 18px 20px;
margin-bottom: 30px;
}
.header-info h2 {
margin: 0 0 8px 0;
font-family: "Comic Sans MS", cursive;
color: #544e4e;
font-size: 2.1em;
font-weight: bold;
letter-spacing: 1.5px;
}
.header-info ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.header-info li {
font-size: 1.15em;
margin-bottom: 6px;
color: #3f3242;
}
a {
color: #ff5e5e;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h3.section-title {
font-family: "Comic Sans MS", cursive;
font-size: 1.7em;
color: #444;
margin-top: 34px;
margin-bottom: 18px;
letter-spacing: 2px;
border-left: 6px solid #ffd9d9;
padding-left: 18px;
}
p {
font-family: "Comic Sans MS", cursive;
font-size: 1.25em;
line-height: 2em;
color: #555;
margin-bottom: 12px;
letter-spacing: .5px;
}
.highlight {
color: #ff5e5e;
font-weight: bold;
background: #fff8f8;
border-radius: 4px;
padding: 2px 7px;
}
.note {
color: #009487;
background: #effdfa;
border-radius: 4px;
padding: 2px 7px;
}
@media (max-width:650px) {
.container { padding: 18px 7px; }
.header-info { padding: 12px 9px; }
h3.section-title { font-size:1.2em; border-left-width:4px; padding-left:10px;}
p { font-size: 1em; }
}
