:root {
    /* CSS Variables */
}

.navbar-dropdown {
    --bulma-navbar-dropdown-border-width:0;
}

.breadcrumb {
    --bulma-link-text: #000;
}

.breadcrumb li.is-active a{
    --bulma-breadcrumb-item-active-color: #CCC;
}

.markdown-body {
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size:1rem;
    color:#212529;
    line-height: 1.5 !important;
}

.markdown-body pre {
    --bulma-pre-padding:0;
}

.markdown-body pre code.hljs {
    padding: 0.8rem;
    font-family: Monaco, Menlo, Consolas, monospace !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: bolder;

}

.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6, .markdown-body .h1, .markdown-body .h2, .markdown-body .h3, .markdown-body .h4, .markdown-body .h5, .markdown-body .h6 {
    font-weight: 500;
    color: #555;
    position: relative;
    margin: 1.4em 0 13px 0px ;
}

.markdown-body ul {
    list-style-type: disc;
    margin:auto;
    padding-left: 40px;
}

.markdown-body ul li{ padding:2px; }

.markdown-body h2,.markdown-body h3 {
    display: block;
    margin-block-start: 0.83em;
    margin-block-end: 0.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}

.markdown-body h1 {
    font-size: calc(1.375rem + 1.5vw)
}

.markdown-body h2 {
    font-size: calc(1.325rem + .9vw)
}

.markdown-body h3 {
    font-size: calc(1.3rem + .6vw)
}

.markdown-body h4, .markdown-body .h4 {
    font-size: calc(1.275rem + .3vw)
}

.markdown-body h5 {
    font-size: 1.25rem
}

.markdown-body h6 {
    font-size: 1rem
}

@media (min-width: 1200px) {
    .markdown-body h1 {
        font-size:2.5rem
    }

    .markdown-body h2 {
        font-size:2rem
    }

    .markdown-body h3 {
        font-size:1.75rem
    }

    .markdown-body h4,.markdown-body .h4 {
        font-size:1.5rem
    }

    .markdown-body h5 {
        font-size: 1.25rem
    }

    .markdown-body h6 {
        font-size: 1rem
    }
}

.markdown-body p {
    margin: 0.8em 0;
}

.markdown-body #introduction {
    margin:1.4em 0 13px 0px;
}

.markdown-body .tag {
    height: auto;
    padding-left:0.5em;
    padding-right:0.5em;
    --bulma-size-small:auto;
}

#sidebar a { display: block; text-decoration: none; font-weight: 600; transition: all 200ms; }
#sidebar a:hover { background: #f5f5f5; }
#sidebar a.highlight { background: #c8f1e2; border-radius: .2em; color: #222; }
#sidebar .level-2 { padding-left: 1em; font-size: 90%;}
#sidebar .level-3 { padding-left: 2.5em; font-size: 80%; }
#sidebar .level-4 { padding-left: 3.5em; font-size: 75%; }
#sidebar.hide-h1 .level-1 { display: none; }

.haskids .expander { margin-right: 0.2em; transition: all 0.3s; }
.haskids.expanded .expander { transform: rotate(90deg);  }

.markdown-body h1:first-child {margin-top: 0;}
.markdown-body table { min-width: 100%; margin: 1.5em auto; }
.markdown-body table th, .markdown-body table td { border: 1px solid #ccc; padding: 0.5em 1em; }
.markdown-body table th { background: #eee; }
.markdown-body p { margin: 0.8em 0; }
.markdown-body a { text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; }
.markdown-body a.fragment { color: #ddd; margin-left: 8px; text-decoration: none;}
.markdown-body a.fragment i { opacity:0.3 }
.markdown-body a.fragment:hover { color: #bbb; }

.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    /* z-index:1020; */
}

.sticky-top .menu-list.is-overflow-y-scroll {
    max-height: 100vh;
    --bulma-menu-list-link-padding:0.3em 0.2em;
}

.markdown-body-list .menu-list a {
    font-weight:600;
}

.sticky-bottom {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 1020
}

.is-badge {
    background: white;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    box-shadow: 0 2px 3px rgba(10,10,10,0.1);
    transition: transform 0.2s;
}

.is-badge:hover, .box:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.footer {   
    margin-top: 20px;
    padding: 3rem 0.5rem;
}

.footer-links a {
    color: #4a4a4a;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: #3273dc;
}

@media screen and (max-width: 768px) {
    .container-padding { padding: 0 20px; }
    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.content {
    --bulma-text-opacity:1;
}

.content .block {
    --bulma-block-spacing: 3rem;
}

.box {
    --bulma-box-padding:0.6rem;
    margin-bottom: 6px;
    transition:transform 0.2s;
}

.box .media {
    align-items:stretch;
}

.box .media .image {
    font-size: 24px;
}

.text-center {
    text-align: center;
}
.text-black {
    color: rgb(0 0 0 / var(--bulma-text-opacity, 1))
}
.text-blue-400 {
    color: rgb(96 165 250 / var(--bulma-text-opacity, 1))
}
.text-blue-500 {
    color: rgb(59 130 246 / var(--bulma-text-opacity, 1))
}
.text-gray-800 {
    color: rgb(31 41 55 / var(--bulma-text-opacity, 1))
}
.text-green-500 {
    color: rgb(34 197 94 / var(--bulma-text-opacity, 1))
}
.text-green-600 {
    color: rgb(22 163 74 / var(--bulma-text-opacity, 1))
}
.text-orange-500 {
    color: rgb(249 115 22 / var(--bulma-text-opacity, 1))
}
.text-orange-600 {
    color: rgb(234 88 12 / var(--bulma-text-opacity, 1))
}
.text-red-500 {
    color: rgb(239 68 68 / var(--bulma-text-opacity, 1))
}
.text-red-600 {
    color: rgb(220 38 38 / var(--bulma-text-opacity, 1))
}
.text-yellow-500 {
    color: rgb(234 179 8 / var(--bulma-text-opacity, 1))
}
.text-blue-600 {
    color: rgb(37 99 235 / var(--bulma-text-opacity, 1))
}
.text-blue-700 {
    color: rgb(29 78 216 / var(--bulma-text-opacity, 1))
}
.text-gray-600 {
    color: rgb(75 85 99 / var(--bulma-text-opacity, 1))
}
.text-indigo-500 {
    color: rgb(99 102 241 / var(--bulma-text-opacity, 1))
}
.text-pink-500 {
    color: rgb(236 72 153 / var(--bulma-text-opacity, 1))
}
.text-purple-500 {
    color: rgb(168 85 247 / var(--bulma-text-opacity, 1))
}
.text-yellow-600 {
    color: rgb(202 138 4 / var(--bulma-text-opacity, 1))
}