/*==============================
=>  Main
================================*/
*,:before,:after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: var(--un-default-border-color, #e5e7eb)
}

body {
    margin: 0;
    line-height: inherit;
}

main {
    display: block;
}

.px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}

.py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.of-x-hidden {
    overflow-x: hidden;
}


.m-auto, [ma=""] {
    margin: auto;
}

.mb-8 {
    margin-bottom: 2rem;
}


.prose {
    --fg: #555;
    --fg-deep: #222;
    --fg-deeper: #000;
    color: var(--fg);
}

.prose {
    color: var(--fg);
    max-width: 65ch;
    /* font-size: 1rem; */
    line-height: 1.75;
}

blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
    margin: 0;
}

h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

p {
    display: block;
    font-size: 1.78rem;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}


.prose>:first-child {
    margin-top: 0;
}

.prose h1 {
    color: var(--fg-deeper);
    font-weight: 800;
    font-size: 2.0em;
    margin-top: 0;
    margin-bottom: 0.8888889em;
    line-height: 1.1111111;
}

.slide-enter-50 {
    --enter-stage: 50;
}

.prose blockquote {
    font-weight: 400;
    font-style: normal;
    line-height: 1.6em;
    padding: 0.5em 1em;
    /* margin-left: -1.1em; */
}

.prose blockquote {
    font-weight: 500;
    font-style: italic;
    color: inherit;
    border-left-width: 0.25rem;
    border-color: #7d7d7d4d;
    quotes: "“" "”" "‘" "’";
    /* margin-top: 1.6em;
    margin-bottom: 1.6em; */
    /* padding-left: 1em; */
}

/*==============================
=>  Background Canvas
================================*/
*, :before, :after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    /* border-color: var(--un-default-border-color, #e5e7eb); */
}

.table-of-contents {
    position: fixed;
    top: 90px;
    bottom: 0;
    font-size: .8em;
    left: 20px;
    z-index: 200;
    overflow: hidden;
    display: none;
    width: 100px;
    flex-direction: column;
}

@media (min-width: 1024px){
    .table-of-contents {
        width: 200px;
        display: flex;
    }
}

@media (min-width: 1280px) {
    .table-of-contents {
        width:300px
    }

    .table-of-contents>ul {
        margin-right: 16px;
    }
}

.table-of-contents-anchor {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-width: 1px;
    --un-border-opacity: .27;
    border-color: rgb(136 136 136 / var(--un-border-opacity));
    border-color: transparent;
    border-radius: 0.25rem;
    --un-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--un-bg-opacity));
    font-size: 1.125rem;
    line-height: 1.75rem;
    --un-text-opacity: .47;
    color: rgb(136 136 136 / var(--un-text-opacity));
    /* --un-shadow: var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / .1))),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / .1)));
    --un-shadow: 0 0 var(--un-shadow-color, rgb(0 0 0 / 0)));
    box-shadow: var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow);
    transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
    transition-timing-function: cubic-bezier(.4,0,.2,1); */
    transition-duration: .15s;
    transition-duration: .4s;
}

.i-ri-menu-2-fill {
margin-left: 0.5rem;
margin-right: 0.5rem;
width: 1.75rem;
height: 1.75rem;
display: flex;
align-items: center;
justify-content: center;
border-width: 1px;
border-color: transparent;
border-radius: .25rem;
--un-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--un-bg-opacity));
font-size: 1.125rem;
line-height: 1.75rem;
--un-text-opacity: .47;
--un-shadow: 0 0 var(--un-shadow-color, rgb(0 0 0 / 0));
box-shadow: var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow);
transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .4s;
color: inherit;
}

.i-ri-menu-2-fill {
    --un-icon: url(data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' height='1.2em' width='1.2em' vertical-align='text-bottom' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M3 4h18v2H3zm0 7h12v2H3zm0 7h18v2H3z'/%3E%3C/svg%3E);
    -webkit-mask: var(--un-icon) no-repeat;
    mask: var(--un-icon) no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    background-color: currentColor;
    color: inherit;
    display: inline-block;
    height: 1.2em;
    /* width: 1.2em; */
    vertical-align: text-bottom;
}

.toc-always-on .table-of-contents>ul {
    opacity: .6;
}

.table-of-contents>ul {
    text-overflow: ellipsis;
    height: 100%;
    overflow-y: auto;
    margin-top: 0.25rem;
    margin-right: 16px;
    border-radius: 0.25rem;
    padding-bottom: 1.25rem;
    opacity: 0;
    transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
    transition-duration: .7s;
}

ul {
    display: block;
    /* list-style-type: disc; */
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

ol, ul, menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    display: list-item;
}
.prose ol, .prose ul {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    list-style-type: none;
}

ol, ul, menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.table-of-contents ul>li {
    padding-left: 0.8rem;
    line-height: 1.5em;
    margin-top: 0.5em;
}

.table-of-contents ul>li>a {
    opacity: .75;
    transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
    font-size: 12.8px;
}

.prose ol, .prose ul {
    margin-top: 0em;
    margin-bottom: 1.25em;
    list-style-type: none;
}

.prose a {
    font-weight: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(125,125,125,.3);
    transition: border .3s ease-in-out;
}

.prose ul>li {
    position: relative;
    padding-left: 1.75em;
}

.prose li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.blog_container, .blog_date, .blog_menu, .slide-enter-cont{
    border: 2px solid #fc0b1f;
}