body {
    font-family: 'Roboto', sans-serif;
    margin: 40px;
    background-color: #FAF8F5;
    color: #333;
    line-height: 1.7;
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
}

h1, h2, h3, p {
    margin-bottom: 20px;
}

h1 {
    position: relative;
    font-size: 2.5em;
    margin-top: 0;
    border-bottom: 2px solid #E0E0E0;
    padding-bottom: 15px;
    color: #00457C;
    padding: 20px;
    height: 270px;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.2);

    /* Creates a pseudo-element to hold the background image */
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1; /* Places the pseudo-element behind the text content */

        background-image: url('background.jpg');
        background-repeat: no-repeat;
        background-size: cover;

        /* Linear gradient to add transparency */
        background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('background.jpg');
    }
}



h2 {
    font-size: 2em;
    border-bottom: 1px solid #D2D2D2;
    padding-bottom: 10px;
}

h3 {
    font-size: 1.5em;
}

ol {
    margin-left: 20px;
    list-style-type: decimal;
}

ol li {
    margin-bottom: 15px;
}

strong {
    font-weight: 600;
    color: #00457C; /* Adding a hint of blue to emphasized text */
}

p, ol li {
    font-size: 1em;
}

a {
    color: #167AB6; 
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #00457C; /* A slightly darker blue for hover */
}

/* Responsive design */
@media screen and (max-width: 768px) {
    body {
        margin: 20px;
        padding: 15px;
    }

    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.5em;
    }

    h3 {
        font-size: 1.3em;
    }

    p, ol li {
        font-size: 0.95em;
    }
}