html, body {
    background-color: #121212 !important; 
}
.article-container, .article-content {
    background-color: transparent !important; 
}

.article-content b, .article-content strong { color: #FCE22A; }
header {
    background: #121212 !important; 
}
.navbar-nav .nav-item:hover .nav-link {
    color: rgb(45,237,11) !important;
}
.navbar-nav .nav-link {
    font-family: 'Red Hat Mono', monospace;
    font-size: large;
    color: #fff;
}
.navbar-nav .nav-link.active {
    color: #E040FB !important;
}


:root {
    --primary-bg: #121212;
    --text-color: #EAEAEA;
    --title-color: #E040FB;     
    --highlight-color: #4635B1; 
    --subtle-text-color: #aaa;
    --code-bg: #282c34;
}


body {
    background-color: var(--primary-bg);
    font-family: 'Inter', sans-serif;
    color: var(--text-color);
    margin: 0;
    padding: 6rem 0 4rem 0; 
    overflow-x: hidden;
}


.article-header {
    width: 100%;
    box-sizing: border-box;
    padding: 0 5rem;
    margin-bottom: 4rem;
}


.main-article-title {
    font-family: "Estonia", cursive;
    font-size: 4rem;
    font-weight: 400;
    color: var(--title-color);
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0 auto 2rem auto;
    width: 100%;
    text-align: center;
}
.author-info { text-align: center; }
.author-name {
    font-family: 'Inter', sans-serif; font-size: 1.1rem; color: var(--subtle-text-color);
    text-transform: uppercase; letter-spacing: 0.15em; margin: 0 auto 0.5rem auto;
    padding-bottom: 1rem; position: relative; display: inline-block;
}
.author-name::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; background-color: var(--subtle-text-color);
}
.publish-date { font-size: 0.9rem; color: var(--subtle-text-color); margin: 0; }
.article-container {
    width: 100%; max-width: 925px; padding: 0 2rem;
    box-sizing: border-box; margin: 0 auto;
}
.article-content p, .article-content li {
    font-family: "Averia Sans Libre", sans-serif;
    font-size: 1.2rem; line-height: 1.8; margin-bottom: 1.5rem;
}
.article-content ul { padding-left: 1.5rem; }
.section-heading::before { content: ''; display: block; height: 5rem; }
.section-heading + p { margin-top: 1.7rem; }
.section-heading {
    font-family: "Merienda", cursive; font-weight: 400; font-size: 1.8rem;
    color: var(--text-color); margin: 4rem 0 2rem 0; line-height: 1.4;
    display: inline; padding: 0.1em 0;
    background: linear-gradient(to right, transparent 1%, var(--highlight-color) 40%, var(--highlight-color) 50%, transparent 100%);
    background-size: 100% 100%; background-repeat: no-repeat; background-position: center;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
pre[class*="language-"] {
    padding: 1.5rem; border-radius: 10px; margin: 2.5rem auto;
    max-width: 90%; position: relative; box-shadow: 0 0px 20px #694F8E;
    border: 1px solid #444; white-space: pre-wrap; word-break: break-all;
}
pre[class*="language-"] > code[class*="language-"] {
    font-family: 'Source Code Pro', monospace;
    font-size: 0.9rem; line-height: 1.5;
}
.token.comment { color: #CB9DF0 !important; }
.visualizer-iframe {
    width: 100%; height: 500px; border: none; border-radius: 12px;
    margin: 4rem 0 2rem 0; display: block; box-shadow: 0 0px 20px #694F8E;
}
.post-divider { border: none; border-top: 1px solid #333; margin: 5rem 0 0 0; }
.site-footer {
    padding: 1rem 2rem; text-align: center; position: relative;
    overflow: hidden; background-color: #121212;
}
.site-footer::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; opacity: 0.8;
    background-image: url("data:image/svg+xml,%3Csvg width='800' height='400' viewBox='0 0 800 400' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.7'%3E%3Cpath d='M0 150 L100 120 L200 180 L300 140 L400 200 L500 160 L600 220 L700 180 L800 240' stroke='%23333333' stroke-width='2'/%3E%3Cpath d='M0 250 L100 280 L200 220 L300 260 L400 200 L500 240 L600 180 L700 220 L800 160' stroke='%23E040FB' stroke-width='2'/%3E%3Cpath d='M150 0 V400' stroke='%2300FFFF' stroke-opacity='0.5' stroke-width='1.5'/%3E%3Cpath d='M450 0 V400' stroke='%23E040FB' stroke-opacity='0.5' stroke-width='1.5'/%3E%3Cpath d='M650 0 V400' stroke='%2300FFFF' stroke-opacity='0.5' stroke-width='1.5'/%3E%3Crect x='300' y='100' width='100' height='200' stroke='%23333333' stroke-width='1' fill='none'/%3E%3C/g%3E%3C/svg%3E");
    background-position: center;
}
.footer-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.footer-links a { font-weight: 600; font-size: 1.1rem; color: var(--text-color); text-decoration: none; margin: 0 1.5rem; transition: color 0.2s; }
.footer-links a:hover { color: var(--title-color); }
.copyright { margin-top: 4rem; font-size: 0.9rem !important; color: #666 !important; }


@media (min-width: 768px) { .main-article-title { font-size: 5rem; } .section-heading { font-size: 1.8rem; } }
@media (min-width: 992px) { .main-article-title { font-size: 6rem; } }
@media (min-width: 1601px) { .main-article-title { text-align: justify; text-align-last: justify; } }


@media (max-width: 768px) {
    
    body {
        padding-top: 5rem;
    }
    .article-header { padding: 2rem 1rem; }
    .main-article-title { font-family: 'Inter', sans-serif; font-size: 2.8rem !important; }
    .article-container { padding: 0 1rem; }
    .article-content p, .article-content li { font-size: 1.1rem; }
    .section-heading { font-size: 1.8rem !important; }
    .visualizer-iframe { height: 550px; }
    .site-footer { padding: 2.5rem 1rem; }
}