/* User Provided Stylesheet */

/* Define CSS custom properties for light mode */
html.light {
    --plain-set-color: rgba(200, 100, 0, 0.6);
    --named-set-color: rgba(0, 100, 0, 0.6);
    --sequential-set-color: rgba(0, 0, 150, 0.6);
    --mixed-set-color: rgba(150, 0, 150, 0.6);
}

/* Dark mode overrides */
html.dark {
    --plain-set-color: rgba(255, 180, 100, 0.8);
    --named-set-color: rgba(100, 255, 100, 0.8);
    --sequential-set-color: rgba(100, 150, 255, 0.8);
    --mixed-set-color: rgba(255, 100, 255, 0.8);
}

/* Fallback for default/system preference */
:root {
    --plain-set-color: rgba(200, 100, 0, 0.6);
    --named-set-color: rgba(0, 100, 0, 0.6);
    --sequential-set-color: rgba(0, 0, 150, 0.6);
    --mixed-set-color: rgba(150, 0, 150, 0.6);
}

.green-bg {
    background-color: green;
}

h4 {
    margin-top:0.1em!important;
}

h3{
    margin-top:0.1em!important;
}

.custom-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.1em;
}

.custom-heading::after {
    content: "named set";
    color: var(--named-set-color);
    margin-right: 8px;
    font-weight: 600;
}

.custom-heading-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.1em;
}

.custom-heading-2::after {
    content: "sequential set";
    color: var(--sequential-set-color);
    margin-right: 8px;
    font-weight: 600;
}

.custom-heading-3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.1em;
}

.custom-heading-3::after {
    content: "mixed set";
    color: var(--mixed-set-color);
    margin-right: 8px;
    font-weight: 600;
}

.custom-heading-plain {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.1em;
}

.custom-heading-plain::after {
    content: "plain set";
    color: var(--plain-set-color);
    margin-right: 8px;
    font-weight: 600;
}

/* Beautiful inline code highlighting - only for inline code, not code blocks */
code:not(pre code):not(.highlight code):not(.code-block code) {
    background: linear-gradient(135deg, rgba(129, 235, 84, 0.3), rgba(251, 254, 51, 0.3));
    color: black;
    padding: 0.1em 0.1em;
    border-radius: 4px;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', 'Courier New', monospace;
    font-size: 0.9em;
    font-weight: 500;
    border: 1px solid rgba(139, 69, 19, 0.15);
    box-shadow: 0 1px 2px rgba(139, 69, 19, 0.1);
    transition: all 0.2s ease;
}


code:not(pre code):not(.highlight code):not(.code-block code):hover {
    background: linear-gradient(135deg, rgba(251, 254, 51, 0.8),rgba(129, 235, 84, 0.8));
    color: black;
    border-color: rgba(139, 69, 19, 0.25);
    box-shadow: 0 2px 4px rgba(139, 69, 19, 0.15);
    transform: translateY(-1px);
}

/* Dark mode support for inline code */
html.dark code:not(pre code):not(.highlight code):not(.code-block code) {
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.12), rgba(255, 140, 0, 0.08));
    color: #ffa500;
    border-color: rgba(255, 165, 0, 0.2);
    box-shadow: 0 1px 2px rgba(255, 165, 0, 0.1);
}

html.dark code:not(pre code):not(.highlight code):not(.code-block code):hover {
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.18), rgba(255, 140, 0, 0.14));
    border-color: rgba(255, 165, 0, 0.3);
    box-shadow: 0 2px 4px rgba(255, 165, 0, 0.2);
}