@media print {

    :root {
        --pico-font-size: 12px;
    }

    [x-tag=x-accordion] {
        border: 1px solid var(--pico-accordion-open-summary-color);
        padding: var(--pico-spacing); 
    }

    [x-tag=x-accordion] summary {
        margin: calc(-1 * var(--pico-spacing)) calc(-1 * var(--pico-spacing)) var(--pico-spacing) calc(-1 * var(--pico-spacing));
        background-color: var(--pico-code-background-color);
        padding: 8px;
    }

    [x-tag=x-accordion] .accordion-details {
        display: block !important;
    }

    [x-tag=x-correction] table, [x-tag=x-correction] tr {
        border: var(--pico-border-width) solid black !important;
    }

    [x-tag=x-correction] td {
        border-top: var(--pico-border-width) solid black !important;
        border-bottom: var(--pico-border-width) solid black !important;
    }

    [x-tag=x-correction] .correction-section {
        background-color: darkgray !important;
        color: black !important;
        font-weight: bold;
    }

    [x-tag*="x-code"] {
        white-space: pre-wrap !important;
    }

}

[lang=bash], [lang=sh] { 
    --badge-background-color: #CCF4D1;
    --badge-color: #47B353;
}

[lang=css] { 
    --badge-background-color: #DFE5FB;
    --badge-color: #254BDC;
}

[lang=html] {
    --badge-background-color: #F7CEC3;
    --badge-color: #E14C26;
}

[lang=js] { 
    --badge-background-color: #FFFCE2;
    --badge-color: #CEB330;
}

[lang=ts] { 
    --badge-background-color: #D8EAFF;
    --badge-color: #3178c6;
}

[lang=jsx] { 
    --badge-background-color: #F3DAFF;
    --badge-color: #8A52A5;
}

[lang=md] { }

[lang=rb], [lang=angular] {
    --badge-background-color: #F4D4D2;
    --badge-color: #CC342D;
}

[lang=sql] {
    --badge-background-color: #D5E1F2;
    --badge-color: #0064FF;
}

[x-tag*=x-code] {
    white-space: pre;
    border-radius: var(--pico-border-radius);
    background: var(--pico-code-background-color) !important;
}

[x-tag*=x-code] span {
    margin: 0 !important;
}

[x-tag*=x-code-] .code-header {
	padding: .375rem;
	padding-bottom: 0;
    /* border-bottom: 1px solid var(--pico-primary); */
    display: flex;
    gap: 16px;
    font-size: smaller;
    justify-content: space-between;
    user-select: none;
}

[x-tag*=x-code-] .code-header .title {
    flex-shrink: 1;
    text-overflow: ellipsis;
    overflow: hidden;
}

[x-tag*=x-code-] .code-header .infos {
    display: flex;
    gap: 16px;
    overflow: hidden;
}

[x-tag*=x-code-] .code-header .badge {
    display: flex;
    gap: 16px;
    overflow: hidden;
    font-size: 80%;
}

[x-tag*=x-code-] .code-header .copy {
    display: flex;
    flex-grow: 1;
    justify-content: end;
}

[x-tag*=x-code-] .code-header .copy a {
    text-decoration: none;
    color: var(--pico-code-color);
    font-weight: bold;
}

[x-tag=x-code-block], [x-tag=x-code-output] {
    margin-top: var(--pico-typography-spacing-vertical);
    margin-bottom: var(--pico-typography-spacing-vertical);
}

[x-tag=x-code-block] code, [x-tag=x-code-output] code {
    display: block;
    overflow-x: auto;
    padding: 1rem 0.375rem;
}

[x-tag*="x-"] iframe {
    max-width: 100%;
}

[x-tag=x-img], 
[x-tag=x-video],
[x-tag=x-iframe] {
    max-width: 100%;
    width: max-content;
    text-align: center;
    margin: var(--pico-typography-spacing-vertical) auto;
}

[x-tag=x-note]>:first-child {
    margin-top: 0;
    margin-bottom: 0;
}

[x-tag=x-mermaid] {
    margin: var(--pico-typography-spacing-vertical) auto;
}

@media (prefers-color-scheme: dark) {
    [x-tag=x-mermaid] svg {
        background-color: var(--pico-contrast) !important;
    }
}

.slide-viewer [x-tag=x-mermaid] {
    scale: 1.5;
    transform-origin: top; 
}

.legendify {
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.legendify figcaption {
    padding: 4px;
    background-color: var(--pico-code-background-color);
    font-size: smaller;
}

[x-tag=x-note] {
    --pico-blockquote-border-color: var(--pico-primary-focus);
    background-color: var(--pico-code-background-color);
}

[x-tag=x-note] :last-child {
    margin-bottom: 0;
}

[x-tag=x-mermaid] {
    visibility: hidden;
    text-align: center;
}

[x-tag=x-mermaid] .diagram {
  font-family: 'trebuchet ms', verdana, arial !important;
  display: inline;
}

[x-tag=x-mermaid].legendify {
    width: auto;
}

[x-tag=x-accordion] [open] {
    border: 1px solid var(--pico-accordion-open-summary-color);
    padding: var(--pico-spacing); 
}

[x-tag=x-split] .legendify {
    width: auto;
}

[x-tag=x-split] [x-tag="x-iframe"] {
    margin-top: -1rem;
}

[x-tag=x-accordion] summary {
    background-color: var(--pico-code-background-color);
    padding: 8px;
}

[x-tag=x-accordion] [open] summary {
    margin: calc(-1 * var(--pico-spacing)) calc(-1 * var(--pico-spacing)) var(--pico-spacing) calc(-1 * var(--pico-spacing));
}

[x-tag=x-todos],  [x-tag=x-todos]>ul {
    padding-left: 2px;
}

[x-tag=x-todos] li {
    list-style: none;
    margin: calc(var(--pico-typography-spacing-vertical) * 0.5) 0;
}

[x-tag=x-todos] label:hover {
    cursor: pointer;
    color: var(--pico-primary-hover);
    display: inline;
}

[x-tag=x-correction] table {
    border: var(--pico-border-width) solid var(--pico-table-border-color);
}

[x-tag=x-correction] table td {
    padding: var(--pico-spacing);
}
[x-tag=x-correction] table hr {
    border-color: var(--pico-color);
    display: inline-block;
    width: 250px;
    vertical-align: text-top;
}

[x-tag=x-correction] h1 {
    margin-top: var(--pico-typography-spacing-top);
}

[x-tag=x-correction] .correction-header {
    display: flex;
}

[x-tag=x-correction] .correction-header [x-tag=x-h1] {
    flex-grow: 1;
}

[x-tag=x-correction] .correction-section {
    background-color: var(--pico-code-background-color);
}

[x-tag=x-correction] .correction-grading {
    vertical-align: top;
    text-align: center;
    width: 0;
    white-space: nowrap;
}

li {
    text-align: justify;
}

/*
*
* Rouge Github Theme
* Generated using rails c
* puts Rouge::Themes::Github.render(scope: ':root:not([data-theme="dark"]) [x-tag*=x-code], [data-theme="light"] [x-tag*=x-code]').gsub("\n","")
*/

@media (prefers-color-scheme: light) {
[x-tag*=x-code] table td { padding: 5px; }[x-tag*=x-code] table pre { margin: 0; }[x-tag*=x-code] .c, [x-tag*=x-code] .ch, [x-tag*=x-code] .cd, [x-tag*=x-code] .cm, [x-tag*=x-code] .cpf, [x-tag*=x-code] .c1 {  color: #888888;}[x-tag*=x-code] .cp {  color: #cc0000; }[x-tag*=x-code] .cs {  color: #cc0000;   }[x-tag*=x-code] .err {  color: #a61717;  }[x-tag*=x-code] .gr {  color: #aa0000;}[x-tag*=x-code] .gh {  color: #333333;}[x-tag*=x-code] .gu {  color: #666666;}[x-tag*=x-code] .gd {  color: #000000;  }[x-tag*=x-code] .gi {  color: #000000;  }[x-tag*=x-code] .ge {  font-style: italic;}[x-tag*=x-code] .ges {   font-style: italic;}[x-tag*=x-code] .gs { }[x-tag*=x-code] .gl {  color: #888888;}[x-tag*=x-code] .go {  color: #888888;}[x-tag*=x-code] .gp {  color: #555555;}[x-tag*=x-code] .gt {  color: #aa0000;}[x-tag*=x-code] .k, [x-tag*=x-code] .kc, [x-tag*=x-code] .kd, [x-tag*=x-code] .kn, [x-tag*=x-code] .kr, [x-tag*=x-code] .kv {  color: #008800; }[x-tag*=x-code] .kp {  color: #008800;}[x-tag*=x-code] .kt {  color: #888888; }[x-tag*=x-code] .m, [x-tag*=x-code] .mb, [x-tag*=x-code] .mf, [x-tag*=x-code] .mh, [x-tag*=x-code] .mi, [x-tag*=x-code] .il, [x-tag*=x-code] .mo, [x-tag*=x-code] .mx {  color: #0000dd; }[x-tag*=x-code] .s, [x-tag*=x-code] .sb, [x-tag*=x-code] .sc, [x-tag*=x-code] .dl, [x-tag*=x-code] .sd, [x-tag*=x-code] .s2, [x-tag*=x-code] .sh, [x-tag*=x-code] .s1 {  color: #dd2200;}[x-tag*=x-code] .sa {  color: #008800; }[x-tag*=x-code] .se {  color: #0044dd;  }[x-tag*=x-code] .si {  color: #3333bb;  }[x-tag*=x-code] .sx {  color: #22bb22;  }[x-tag*=x-code] .sr {  color: #008800;}[x-tag*=x-code] .ss {  color: #aa6600;  }[x-tag*=x-code] .na {  color: #336699;}[x-tag*=x-code] .nb, [x-tag*=x-code] .bp {  color: #003388;}[x-tag*=x-code] .nc {  color: #bb0066; }[x-tag*=x-code] .no {  color: #003366; }[x-tag*=x-code] .nd {  color: #555555;}[x-tag*=x-code] .ne {  color: #bb0066; }[x-tag*=x-code] .nf, [x-tag*=x-code] .fm {  color: #0066bb; }[x-tag*=x-code] .nl {  color: #336699;}[x-tag*=x-code] .nn {  color: #bb0066; }[x-tag*=x-code] .py {  color: #336699; }[x-tag*=x-code] .nt {  color: #bb0066; }[x-tag*=x-code] .nv, [x-tag*=x-code] .vc, [x-tag*=x-code] .vm {  color: #336699;}[x-tag*=x-code] .vg {  color: #dd7700;}[x-tag*=x-code] .vi {  color: #3333bb;}[x-tag*=x-code] .ow {  color: #008800;}[x-tag*=x-code] .w {  color: #bbbbbb;}
}

@media (prefers-color-scheme: dark) {
[x-tag*=x-code] table td { padding: 5px; }[x-tag*=x-code] table pre { margin: 0; }[x-tag*=x-code] .c, [x-tag*=x-code] .ch, [x-tag*=x-code] .cd, [x-tag*=x-code] .cpf {  color: #75715e;  font-style: italic;}[x-tag*=x-code] .cm {  color: #75715e;  font-style: italic;}[x-tag*=x-code] .c1 {  color: #75715e;  font-style: italic;}[x-tag*=x-code] .cp {  color: #75715e; }[x-tag*=x-code] .cs {  color: #75715e;   font-style: italic;}[x-tag*=x-code] .err {  color: #960050;  }[x-tag*=x-code] .gi {  color: #ffffff;  }[x-tag*=x-code] .gd {  color: #ffffff;  }[x-tag*=x-code] .ge {  font-style: italic;}[x-tag*=x-code] .ges {   font-style: italic;}[x-tag*=x-code] .gr {  color: #aa0000;}[x-tag*=x-code] .gt {  color: #aa0000;}[x-tag*=x-code] .gh {  color: #999999;}[x-tag*=x-code] .go {  color: #888888;}[x-tag*=x-code] .gp {  color: #555555;}[x-tag*=x-code] .gs { }[x-tag*=x-code] .gu {  color: #aaaaaa;}[x-tag*=x-code] .k, [x-tag*=x-code] .kv {  color: #66d9ef; }[x-tag*=x-code] .kc {  color: #66d9ef; }[x-tag*=x-code] .kd {  color: #66d9ef; }[x-tag*=x-code] .kp {  color: #66d9ef; }[x-tag*=x-code] .kr {  color: #66d9ef; }[x-tag*=x-code] .kt {  color: #66d9ef; }[x-tag*=x-code] .kn {  color: #f92672; }[x-tag*=x-code] .ow {  color: #f92672; }[x-tag*=x-code] .o {  color: #f92672; }[x-tag*=x-code] .mf {  color: #ae81ff;}[x-tag*=x-code] .mh {  color: #ae81ff;}[x-tag*=x-code] .il {  color: #ae81ff;}[x-tag*=x-code] .mi {  color: #ae81ff;}[x-tag*=x-code] .mo {  color: #ae81ff;}[x-tag*=x-code] .m, [x-tag*=x-code] .mb, [x-tag*=x-code] .mx {  color: #ae81ff;}[x-tag*=x-code] .se {  color: #ae81ff;}[x-tag*=x-code] .sa {  color: #66d9ef; }[x-tag*=x-code] .sb {  color: #e6db74;}[x-tag*=x-code] .sc {  color: #e6db74;}[x-tag*=x-code] .sd {  color: #e6db74;}[x-tag*=x-code] .s2 {  color: #e6db74;}[x-tag*=x-code] .sh {  color: #e6db74;}[x-tag*=x-code] .si {  color: #e6db74;}[x-tag*=x-code] .sx {  color: #e6db74;}[x-tag*=x-code] .sr {  color: #e6db74;}[x-tag*=x-code] .s1 {  color: #e6db74;}[x-tag*=x-code] .ss {  color: #e6db74;}[x-tag*=x-code] .s, [x-tag*=x-code] .dl {  color: #e6db74;}[x-tag*=x-code] .na {  color: #a6e22e;}[x-tag*=x-code] .nc {  color: #a6e22e; }[x-tag*=x-code] .nd {  color: #a6e22e; }[x-tag*=x-code] .ne {  color: #a6e22e; }[x-tag*=x-code] .nf, [x-tag*=x-code] .fm {  color: #a6e22e; }[x-tag*=x-code] .no {  color: #66d9ef;}[x-tag*=x-code] .bp {  color: #f8f8f2;}[x-tag*=x-code] .nb {  color: #f8f8f2;}[x-tag*=x-code] .ni {  color: #f8f8f2;}[x-tag*=x-code] .nn {  color: #f8f8f2;}[x-tag*=x-code] .vc {  color: #f8f8f2;}[x-tag*=x-code] .vg {  color: #f8f8f2;}[x-tag*=x-code] .vi {  color: #f8f8f2;}[x-tag*=x-code] .nv, [x-tag*=x-code] .vm {  color: #f8f8f2;}[x-tag*=x-code] .w {  color: #f8f8f2;}[x-tag*=x-code] .nl {  color: #f8f8f2; }[x-tag*=x-code] .nt {  color: #f92672;}[x-tag*=x-code] {  color: #f8f8f2;  }
}