:root {
    --body-background: #0C131D;
    --body-background: #1f2225;
    --highlighter-color: #df9a57;
    --emphesis: #E1C999;
    --primary: #d3d5d6;
    --main-width: 900px !important;
    --h3-font-size: 1.8em;
    --h4-font-size: 1.6em;
    --h5-font-size: 1.4em;
    --h6-font-size: 1.2em;
}
.dark {
    background-color: var(--body-background);
    --content-primary: #BFBFBF !important;
    --font-body: 'Poppins', sans-serif;
    --content-secondary: #CFCFCF !important;
    --main-width: 900px !important;
}

.span_highlight{
    color: var(--highlighter-color);
}
p code{
    background: #3e3624;
}
.line-summary{
    color: var(--content-secondary);
}

.social-icons {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1000;
}

.social-icons a {
    display: block;
    width: 24px;
    height: 24px;
    color: #BFBFBF;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #DFDFDF;
}

.social-icons svg {
    width: 100%;
    height: 100%;
}

.line-title a,
.single-tags span a,
.header a,
.breadcrumbs a,
#TableOfContents a{
    text-decoration: none;
}
h3{
    font-size: var(--h3-font-size);
}
h4{
    font-size: var(--h4-font-size);
}
h5{
    font-size: var(--h5-font-size);
}
h6{
    font-size: var(--h6-font-size);
}
.single-content h1.heading,
.single-content h2.heading,
.single-content h3.heading,
.single-content h4.heading,
.single-content h5.heading,
.single-content h6.heading{
    color: var(--highlighter-color);
}
#TableOfContents li a:hover{
    color: var(--highlighter-color);
}
@media only screen and (min-width: 2560px) {
    :root {
        --main-width: 1200px;
        --main-padding: 1.4em;
        --main-padding-bottom: 3rem;
        --caption-padding: calc(.25* var(--main-padding));
        --header-top-gap: 2rem;
        --header-bottom-gap: 2rem;
        --header-menu-side-gap: .5rem;
        --header-menu-top-gap: 1rem;
        --h1-margin-top: 2rem;
        --h1-margin-bottom: 1.5rem;
        --h2-margin-top: 2rem;
        --h2-margin-bottom: 1.5rem;
        --hx-margin-top: 1.5rem;
        --hx-margin-bottom: 1rem;
        --p-margin-top: 1rem;
        --p-margin-bottom: 1rem;
        --code-margin-top: 2rem;
        --code-margin-bottom: 2rem;
        --h1-font-size: 2.2em;
        --h2-font-size: 2em;
        --hx-font-size: 2em;
        --p-font-size: 1.1em;
        --p-line-height: 1.5em;
        --caption-font-size: .8em;
        --li-indent: 1.5rem;
        --ul-margin-top: 1rem;
        --ul-margin-bottom: 1rem;
        --toc-margin-top: 2rem;
        --toc-margin-bottom: 3rem;
        --code-padding: 1.5rem;
        --code-border-radius: 10px;
        --social-icons-bottom-margin: 3rem;
        --footer-height: 3rem;
        --content-height: calc(100vh - var(--footer-height));
        --table-cell-padding: .5rem;
        --table-margin-top: 1.5rem;
        --table-margin-bottom: 1.5rem;
        --li-padding: 0.3rem 0;
    }
    .dark {
        --main-width: 1200px !important;
    }
    strong{
        color: var(--highlighter-color);
    }
    li{
        padding: var(--li-padding);
    }
    .line-date{
        font-size: 1rem;

    }
    .line-summary{
        font-size: .95rem;
    }
    body{
        font-size: 17px;
    }
}


.header{
    margin-bottom: 1rem;
}

.breadcrumbs{
    color: var(--highlighter-color);
}

strong {
        color: var(--highlighter-color);
}
.line-title a{
    color: var(--highlighter-color);
}
.single-content h2.heading,
.single-content h3.heading{
    color: var(--highlighter-color);
}

.line-date{
    text-align: left;
}
.post-category{
    font-size: .8rem;
    font-family: monaspace;
    min-width: 150px;
    max-width: 150px;
    padding-right: 1rem;
    margin-top: 0;
    margin-bottom: 0;
}
.category_date_wrapper{
    min-width: 150px;
    max-width: 150px;
}

.font-awesome-icon-font-size{
    font-size: 1rem;
}

.red-link {
  color: var(--highlighter-color);
  text-decoration: none;
}
.post-line{
    margin-bottom: .9rem;
}

.list-container .post-line .metadata-wrap{
    width:15%;
    max-width: 15%;
    min-width: 15%;
}
.list-container .line-date{
    width: 100%;
    max-width: 100%;
    min-width: 100%;

}
.highlighter{
    color: var(--highlighter-color);
}
.blog-detail-wrap{
    width: 85%;
}

.text-left{
   text-align: left;
}

.single-tags span a{
    color: var(--highlighter-color);
}

@media screen and (max-width: 1440px) {

.single-content h4.heading{
    font-size: 18px;
}
h2.heading{
    margin-top: 1.4rem;
    margin-bottom: 1.4rem;
}

}

@media screen and (max-width: 1024px) {
    h1{
        font-size: 1.8rem;
    }
    h2{
        font-size: 1.6rem;
    }
    p{
        font-size: 1rem;
    }
    ul li{
        font-size: 1rem;
    }
}

@media screen and (max-width: 440px) {
    .header-title{
        font-size: 1.9rem
    }
    .single-tags {
        font-size: 0.9rem;
    }
    p{
        font-size: 0.9rem;
    }
    h4.heading{
        margin-top: 0.8rem;
        margin-bottom: 0.8rem;
        font-size: 0.8rem;
    }
    ul li{
        font-size: 0.9rem;
    }
    .post-line{
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }
    .list-container .post-line .metadata-wrap, .blog-detail-wrap{
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }
    .social-icons{
        right: 0px;
    }


}

@media screen and (max-width: 330px) {
:root {
        --main-width: 1200px;
        --main-padding: 1.4em;
        --main-padding-bottom: 3rem;
        --caption-padding: calc(.25* var(--main-padding));
        --header-top-gap: 2rem;
        --header-bottom-gap: 2rem;
        --header-menu-side-gap: .5rem;
        --header-menu-top-gap: 1rem;
        --h1-margin-top: 1rem;
        --h1-margin-bottom: 0.8rem;
        --h2-margin-top: 1rem;
        --h2-margin-bottom: 0.8rem;
        --hx-margin-top: 1.5rem;
        --hx-margin-bottom: 1rem;
        --p-margin-top: 1rem;
        --p-margin-bottom: 1rem;
        --code-margin-top: 2rem;
        --code-margin-bottom: 2rem;
        --h1-font-size: 1em;
        --h2-font-size: 2em;
        --hx-font-size: 2em;
        --p-font-size: 0.9em;
        --p-line-height: 1.5em;
        --caption-font-size: .8em;
        --li-indent: 1.5rem;
        --ul-margin-top: 1rem;
        --ul-margin-bottom: 1rem;
        --toc-margin-top: 2rem;
        --toc-margin-bottom: 3rem;
        --code-padding: 1.5rem;
        --code-border-radius: 10px;
        --social-icons-bottom-margin: 3rem;
        --footer-height: 3rem;
        --content-height: calc(100vh - var(--footer-height));
        --table-cell-padding: .5rem;
        --table-margin-top: 1.5rem;
        --table-margin-bottom: 1.5rem;
        --li-padding: 0.3rem 0;
        --highlighter-color: #795548;
        --body-background: #0C131D;
        --body-background: #1f2225;
        --highlighter-color: #df9a57;
        --emphesis: #E1C999;
        --primary: #d3d5d6;
        --main-width: 900px !important;
    }
    .list-container h1{

    }
    .header{
        margin-bottom: 0;
    }
    .header-title a{
        font-size: 1.8rem;
    }
    .header p{
        font-size: 0.7rem;
    }
    .line-date{
        font-size: 0.7rem;
    }
    p{
        font-size: var(--p-font-size);
    }
    .line-summary{
        font-size: 0.7rem;
    }
    .breadcrumbs{
        font-size: 0.7rem;
    }
    .single-tags span a{
        font-size: 0.7rem;
    }
    .single-summary{
        font-size: 0.8rem;
    }
    .single-readtime{
        margin-top: 0.9rem;
        margin-bottom: 0.4rem;
    }
    .single-readtime, .single-readtime time{
        font-size: 0.6rem;
    }

}