/* General page style */
body {
    background-color: #f5f7fa;
    font-family: Arial, Helvetica, sans-serif;
    color: #333333;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* Header section */
.page-header {
    background-color: #2f5d8c;
    color: white;
    text-align: center;
    padding: 40px 20px;
}

/* Main page container */
main {
    width: 80%;
    margin: 30px auto;
}

/* Content section box */
.content-box {
    background-color: white;
    border: 2px solid #d0d7de;
    padding: 20px;
    margin-bottom: 25px;
}

/* Heading styles */
h1 {
    font-size: 36px;
    margin-bottom: 10px;
}

h2 {
    color: #2f5d8c;
    font-size: 24px;
}

h3 {
    color: #333333;
}

/* Paragraph text */
p {
    font-size: 16px;
}

/* Flexbox layout */
.flex-container {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

/* Flexbox items */
.flex-item {
    background-color: #e8f0fe;
    border: 2px solid #2f5d8c;
    padding: 15px;
    flex: 1;
    text-align: center;
}

/* Float layout box */
.float-box {
    float: left;
    background-color: #2f5d8c;
    color: white;
    border: 3px solid #1d3f63;
    padding: 25px;
    margin: 0 20px 15px 0;
    font-weight: bold;
}

/* Clear float */
.clear {
    clear: both;
}

/* Padding, margin, and border example */
.spacing-box {
    background-color: #fff7e6;
    border: 4px dashed #d35400;
    padding: 25px;
    margin: 20px;
    text-align: center;
    font-weight: bold;
}

/* Text layout example */
.text-example {
    background-color: #eef6ff;
    border-left: 6px solid #2f5d8c;
    padding: 15px;
    margin: 15px 0;
    text-align: left;
}