* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    opacity: 0.25px;
    scroll-behavior: smooth;
}

.site-content {
    padding: 50px 0;
}

/* ! ================= POST IMAGE ================= */

.site-main {
    padding-right: 10px;

}

.post-img img {
    height: 100%;
    min-width: 50vw;

}

@media (min-width: 320px),(min-width: 768px) {
    img {
        height:auto;
        width: 100%;
    }

}


/* TODO ================= HEADINGS ================= */

h3 {
    font-size: 2rem;
    margin-bottom: 15px;
}

@media (min-width: 768px) {
    h3 {
        font-size: 2.5rem;
    }
}

/* TODO ================= META ================= */

.entry-meta {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 20px;
}

.entry-meta span {
    margin-right: 15px;
}

/* ? ================= SIDEBAR ================= */

.left-sidebar {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    top: 20px;
    height: fit-content;
    border-radius: 10px;
}

.left-sidebar ul {
    padding-left: 18px;
}

.left-sidebar li {
    margin-bottom: 10px;
}

.space-line {
    width: 20px;
}

/* ! ================= COMMENTS ================= */

.comments-area {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.comments-area h4 {
    font-weight: 2.5rem;
    font-style: initial;
}

.comment-form .form-control {
    border-radius: 6px;
}

.comment-form button {
    vertical-align: baseline;
    padding: 10px 30px;
    font-weight: 600;
}