/* กำหนดฟอนต์หลัก */
body, html {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f4f4f4;
color: #333;
}
/* ส่วนเฮดเดอร์ */
header {
background-color: #6a0dad;
color: white;
text-align: center;
padding: 20px 0;
}
header h1 {
font-size: 2rem;
margin: 10px 0;
}
header p {
font-size: 1.2rem;
}
/* กล่องเนื้อหา */
main {
max-width: 700px;
margin: 20px auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
/* สไตล์ปุ่ม */
button {
background-color: #6a0dad;
color: white;
border: none;
padding: 10px 20px;
font-size: 1.2rem;
cursor: pointer;
border-radius: 5px;
transition: background 0.3s ease-in-out;
}
button:hover {
background-color: #5e0b98;
}
.hidden {
display: none;
}
/* กล่องแบบทดสอบ */
#quiz-form, #result {
margin: 20px auto;
padding: 20px;
border-radius: 10px;
background: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
/* ตัวเลือกคำตอบ */
#choices label {
display: block;
padding: 10px;
background: #f1f1f1;
border-radius: 5px;
margin: 10px 0;
cursor: pointer;
font-size: 1.1rem;
transition: background 0.3s ease-in-out;
}
#choices label:hover {
background: #e1d5f6; /* สีม่วงอ่อน */
}
/* ผลลัพธ์ */
#result h2 {
color: #6a0dad;
}
#restart-btn {
margin-top: 20px;
}
/* ส่วนอ้างอิง W3Schools */
#reference {
margin-top: 20px;
padding: 20px;
background: #f9f9f9;
border-radius: 5px;
text-align: left;
}
#reference h2 {
color: #6a0dad;
}
#reference ul {
list-style: none;
padding: 0;
}
#reference li {
margin: 5px 0;
}
#reference a {
color: #6a0dad;
text-decoration: none;
font-weight: bold;
}
#reference a:hover {
text-decoration: underline;
}
/* เอฟเฟกต์เฟดอิน */
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#quiz-form, #result {
animation: fadeIn 0.5s ease-in-out;
}