/* ===== 1. General Style ===== */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f4f8fc;
    color: #10233f;
}

/* ===== 2. Header ===== */
header {
    background-color: #0b1f3a;
    color: white;
    text-align: center;
    padding: 1rem;
}

/* ===== 3. Navigation ===== */
nav {
    background-color: #12315c;
    padding: 0.5rem;
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 0.5rem;
}

/* descendant selector */
nav a:hover {
    color: #8fd3ff;
}

/* ===== 4. Main Layout ===== */
main {
    padding: 1rem;
}

section,
article {
    background-color: white;
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid #ccc;
}

/* ===== 5. ID Selector ===== */
#intro {
    background-color: #eaf4ff;
}

/* ===== 6. Class Selector ===== */
.highlight {
    color: #0b3d6e;
    font-weight: bold;
}

/* ===== 7. Text Styling ===== */
h1, h2, h3 {
    text-shadow: 1px 1px 2px #ccc;
}

p {
    font-size: 1rem;
}

/* ===== 8. Lists ===== */
ul {
    list-style-type: square;
}

ol {
    list-style-type: decimal;
}

dl {
    margin: 1rem 0;
}

/* ===== 9. Form ===== */
input,
textarea {
    width: 100%;
    padding: 0.5rem;
    margin: 0.5rem 0;
}

input[type="submit"] {
    background-color: #0b1f3a;
    color: white;
    border: none;
    padding: 0.5rem;
}

/* ===== 10. Footer ===== */
footer {
    background-color: #0b1f3a;
    color: white;
    text-align: center;
    padding: 1rem;
}