html.dark-mode {
    filter: invert(1) !important;
    background-color: rgb(255, 255, 255) !important;  
}


html.dark-mode h5 .treerow {
    filter: invert(1) !important;
}

html.dark-mode .narrate, 
html.dark-mode .narratechristmas, 
html.dark-mode .investigate {
    filter: invert(1) !important;
}


html {
    background-color: rgb(255, 255, 255);
    min-height: 100%;
}


.narrate {
     border: 1px solid #392104;
     padding: 10px;
     margin: 10px;
     background: linear-gradient(to bottom, rgb(181, 200, 237) 0%, rgba(181, 229, 237, 0.2) 100%);
     box-shadow: 1px 3px 4px #807e76;
     color: #392104;
}

.narratechristmas {
     border: 1px solid #000000;
     padding: 10px;
     margin: 0px 10px;

     background: linear-gradient(to bottom, rgb(114, 31, 31) 0%, rgba(224, 0, 0, 0.699) 100%);
     box-shadow: 1px 3px 4px #807e76;
     color: #ffffff;
}


 .investigate {
     border-left: 3px solid #303823;
     padding: 10px;
     margin: 10px 10px 0px 10px;
     background: linear-gradient(to right, rgba(195, 202, 182, 1) 0%, rgba(195, 202, 182, 0.2) 100%);
     color: #303823;
}
 .narrate h5, .investigate h5 {
     padding: 0px;
     margin: 0px;
     font-size: var(--font-size-14);
}
 .narrate h5 {
     border-bottom: 2px solid #392104;
}
 .investigate h5 {
     border-bottom: 2px solid #303823;
}

html{
    scrollbar-width: thin;
    font-family: "kode Mono", monospace !important;
    padding-top: 0;
    padding-left: 20px;
    padding-right: 20px;
    overscroll-behavior: none;
}

html, body {
    background-color: white !important;
    margin: 0;
    padding: 0;
    min-height: 100vh;  
}