@media (prefers-color-scheme: dark) {
    * {
        color-scheme: dark!important;
    }
}
:root[data-theme="dark"] {
    * {
        color-scheme: dark!important;
    }
}

@media (prefers-color-scheme: light) {
    * {
        color-scheme: light!important;
    }
}
:root[data-theme="light"] {
    * {
        color-scheme: light!important;
    }
}

* {
    transition: color linear 0.25s;
    transition: background-color linear 0.25s;
}

.giallo{
    background-color: var(--bg-1)!important;
    overflow: auto; 
    border-radius: 5px; 
}

.giallo-l {
    display: inline-block;
    min-height: 1lh;
    width: 100%;
}
.giallo-ln {
    display: inline-block;
    user-select: none;
    margin-right: 0.4em;
    min-width: 3ch;
    border-right: solid var(--grey-light) 1px;
    text-align: right;
    opacity: 0.8;
}

:root {
    --bg-0: light-dark(#fff, #1d1d1d);
    --bg-1: light-dark(#eee, #131313);

    --grey-light: light-dark(#a4a4a4, #777);
    --grey-dark: light-dark(#969696, #24292E);
    
    --fg-0: light-dark(#111, #eee);
    --fg-1: light-dark(#333, #ccc);
    --fg-2: light-dark(#555, #999);

    --primary: light-dark(#ffd979, #daa520);
    --text-highlight:  color-mix(in srgb-linear, var(--primary) 50%, transparent);
}