{% include 'header.twig' %}
<style>
.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
    background: blue;
    color: white;
    padding: 5px;
}

    /* Adjustments for the card */
.card {
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Styling for the card title */
.card-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
}

/* Styling for the card image */
.card-img-top {
    border-radius: 5px;
}

/* Styling for the card text */
.card-text {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

/* Styling for the "Go Back" button */
.btn-primary {
    background-color: #007bff;
    border-color: #fff;
    font-weight: bold;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 18px;
    border-radius: 5px;
}

/* Centering the "Go Back" button */
.text-center {
    text-align: center;
}

    
</style>
<section>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">{{ blogtitle }}</h4>
                        {% if blogimage %}
<img src="{{blogimage}}" alt="{{ blogtitle }}" class="card-img-top img-fluid mb-3" style="max-width: 250px;">
                        {% endif %}
                        <div class="card-text">{{ blogcontent }}</div>
                        <div class="text-center mt-4">
                            <a href="blog" class="btn btn-primary btn-lg">Go Back</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% include 'footer.twig' %}
