/* =====================================================
   BLOG CONTENT TYPOGRAPHY
   Scope: .content
   Theme: Dark
   Accent: #dc2626
===================================================== */

.content{
    margin:30px auto 0 0;
    color:#d4d4d8;
    font-family:Inter,"Segoe UI",Roboto,sans-serif;
    font-size:18px;
    line-height:1.9;
    word-wrap:break-word;
}

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

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6{
    color:#fff;
    font-weight:700;
    line-height:1.35;
    letter-spacing:-.02em;
}

.content h1{
    font-size:clamp(34px,5vw,46px);
    margin:0 0 35px;
    padding-bottom:18px;
    border-bottom:2px solid rgba(220,38,38,.35);
}

.content h2{
    font-size:clamp(28px,4vw,36px);
    margin:60px 0 22px;
}

.content h3{
    font-size:clamp(24px,3vw,30px);
    margin:45px 0 18px;
}

.content h4{
    font-size:24px;
    margin:35px 0 15px;
}

.content h5{
    font-size:21px;
    margin:30px 0 12px;
}

.content h6{
    font-size:18px;
    margin:25px 0 10px;
    color:#a1a1aa;
}

/* =========================
   PARAGRAPH
========================= */

.content p{
    margin:20px 0;
    color:#d4d4d8;
}

/* =========================
   LINKS
========================= */

.content a{
    color:#ff6b6b;
    font-weight:600;
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition:.25s;
}

.content a:hover{
    color:#dc2626;
    border-bottom-color:#dc2626;
}

/* =========================
   LISTS
========================= */

.content ul,
.content ol{
    margin:25px 0;
    padding-left:32px;
}

.content ul{
    list-style:disc;
}

.content ul ul{
    list-style:circle;
}

.content ul ul ul{
    list-style:square;
}

.content ol{
    list-style:decimal;
}

.content ol ol{
    list-style:lower-alpha;
}

.content ol ol ol{
    list-style:lower-roman;
}

.content li{
    display:list-item;
    margin:12px 0;
    padding-left:6px;
    color:#d4d4d8;
}

.content li::marker{
    color:#dc2626;
    font-weight:700;
}

/* =========================
   BLOCKQUOTE
========================= */

.content blockquote{
    margin:35px 0;
    padding:22px 24px;
    border-left:4px solid #dc2626;
    background:#18181b;
    border-radius:12px;
    color:#e4e4e7;
    font-style:italic;
}

/* =========================
   IMAGES
========================= */

.content img{
    display:block;
    max-width:100%;
    height:auto;
    margin:35px auto;
    border-radius:14px;
    border:1px solid #27272a;
    box-shadow:0 12px 35px rgba(0,0,0,.45);
}

/* =========================
   FIGURE
========================= */

.content figure{
    margin:40px 0;
}

.content figcaption{
    margin-top:12px;
    text-align:center;
    color:#a1a1aa;
    font-size:15px;
}

/* =========================
   TABLE
========================= */

.content table{
    width:100%;
    margin:35px 0;
    border-collapse:collapse;
    overflow:hidden;
    border-radius:12px;
    border:1px solid #27272a;
}

.content th{
    background:#dc2626;
    color:#fff;
    padding:15px;
    text-align:left;
}

.content td{
    padding:15px;
    border-top:1px solid #27272a;
}

.content tr:nth-child(even){
    background:#18181b;
}

.content tr:hover{
    background:#222228;
}

/* =========================
   CODE
========================= */

.content pre{
    background:#18181b;
    border:1px solid #27272a;
    border-radius:12px;
    padding:20px;
    margin:30px 0;
    overflow:auto;
}

.content pre code{
    background:none;
    color:#f4f4f5;
    padding:0;
}

.content code{
    background:#27272a;
    color:#fca5a5;
    padding:3px 7px;
    border-radius:6px;
    font-size:.95em;
}

/* =========================
   INLINE
========================= */

.content strong,
.content b{
    color:#fff;
    font-weight:700;
}

.content em,
.content i{
    color:#fbbf24;
}

.content mark{
    background:#dc2626;
    color:#fff;
    padding:2px 6px;
    border-radius:4px;
}

/* =========================
   HR
========================= */

.content hr{
    margin:50px 0;
    border:none;
    height:2px;
    background:linear-gradient(
        to right,
        transparent,
        #dc2626,
        transparent
    );
}

/* =========================
   DETAILS
========================= */

.content details{
    margin:25px 0;
    background:#18181b;
    border:1px solid #27272a;
    border-radius:12px;
    overflow:hidden;
}

.content summary{
    padding:15px 18px;
    cursor:pointer;
    color:#fff;
    font-weight:600;
}

.content details>*:not(summary){
    padding:0 18px 18px;
}

/* =========================
   KEYBOARD
========================= */

.content kbd{
    background:#27272a;
    color:#fff;
    padding:4px 8px;
    border-radius:6px;
    border:1px solid #3f3f46;
}

/* =========================
   SELECTION
========================= */

.content ::selection{
    background:#dc2626;
    color:#fff;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

    .content{
        font-size:17px;
        line-height:1.8;
    }

    .content h1{
        margin-bottom:25px;
    }

    .content h2{
        margin-top:45px;
    }

    .content table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

    .content img{
        margin:25px auto;
    }

}