Apographe/= filter.clone();

.logo.vanilla:hover {
filter: drop-shadow(0 0 2em #ffe21c);
}
 
:root {
--main-bg-color: #2f2f2f;
--highlight-color: #3f3f3f;
--bright-highlight-color: #4f4f4f;
--text-color: #f6f6f6;
--accent-color: #5f5f5f;
--sidebar-width: 3em;
--filetree-width: 10em;
font-family: Avenir, Helvetica, Arial, sans-serif;
font-size: 30px;
line-height: 24px;
 
color: #f6f6f6;
background-color: var(--main-bg-color);
 
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
 
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
 
.container {
height: 100%;
max-width: 100%;
margin: 0;
padding-top: 1vh;
display: flex;
flex-direction: row;
text-align: left;
align-items: stretch;
}
 
#main_editor {
width: 100%;
font-size: 16px;
line-height: 18px;
display: flex;
height: 100%;
width: 100%;
color: var(--text-color);
background-color: var(--main-bg-color);
float: right;
overflow: hidden;
}
 
.col {
flex: 0 0 49%;
width: 50%;
padding: 0.5em;
/* margin: .1em; */
margin-left: 0.1em;
border: solid;
border-color: var(--highlight-color);
/* border-radius: .5em; */
}
 
#markdown_input {
grid-column: 1;
grid-row: 1;
text-align: left;
color: var(--text-color);
background: var(--main-bg-color);
overflow-x: wrap;
overflow-y: scroll;
}
 
#rendered_markdown {
grid-column: 2;
grid-row: 1;
text-align: left;
color: var(--text-color);
background-color: var(--main-bg-color);
 
img {
width: 100%;
}
 
overflow-x: wrap;
overflow-y: scroll;
}
 
h1 {
text-align: left;
line-height: 18px;
margin-top: 0.067em;
margin-bottom: 0.067em;
color: red;
}
li {
/* line-height: 0.1em; */
margin: 0;
margin-left: 1em;
padding: 0;
}
 
.sidebar_button {
width: 100%;
background-color: var(--main-bg-color);
border: none;
}
 
.sidebar_icon {
width: 100%;
}
 
.top-bar {
display: flex;
flex-direction: row;
}
 
.topbar_button {
height: 2em;
background-color: transparent;
border: none;
}
 
.topbar_icon {
height: 100%;
background-color: transparent;
}
 
@media (prefers-color-scheme: dark) {
:root {
color: #f6f6f6;
background-color: var(--main-bg-color);
}
}
 
.main {
display: flex;
height: 95vh;
flex-direction: column;
}
 
#sidebar {
visibility: visible;
width: var(--sidebar-width);
transition: all 0.1s ease-out;
float: left;
}
 
.filetree {
float: left;
border: solid;
border-color: var(--highlight-color);
width: var(--filetree-width);
overflow-x: scroll;
/* overflow-y: scroll; */
overflow-y: hidden;
text-overflow: ellipsis;
resize: horizontal;
}
 
.filetree-directory-button,
.filetree-file-button,
.file-search-button {
background-color: transparent;
border: none;
width: 100%;
height: inherit;
text-align: left;
transition: all 0.01s ease-out;
white-space: nowrap;
/* overflow-y: visible; */
overflow-y: hidden;
overflow: hidden;
color: var(--text-color);
text-overflow: ellipsis;
}
 
.filetree-node {
margin-left: 1em;
overflow-y: hidden;
}
 
.filetree-icon {
height: 1em;
background-color: transparent;
margin-right: 5px;
}
 
.filetree_expand {
background-color: transparent;
border: none;
}
 
.filetree-file-button:hover,
.filetree-directory-button:hover {
background-color: var(--highlight-color);
/* Green */
}
 
dialog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
background-color: var(--highlight-color);
border: none;
border-radius: 10px;
box-shadow:
0 0 #0000,
0 0 #0000,
0 25px 50px -12px rgba(0, 0, 0, 0.25);
width: 50%;
height: 20%;
margin: auto;
/* display: flex; */
/* flex-direction: column; */
overflow: hidden;
color: var(--text-color);
font-size: 0.5cm;
}
 
.row {
display: flex;
justify-content: space-between;
}
 
.button {
background-color: var(--accent-color);
/* Green */
color: white;
border: solid;
border-color: transparent;
padding: 5px 3px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
 
.button:hover {
border: solid;
border-color: var(--bright-highlight-color);
}
 
.button:active {
border: solid;
border-color: white;
}
 
.input-field {
border: solid;
border-color: var(--accent-color);
color: var(--text-color);
}
 
#knowledgebase-button {
width: 19%;
}
 
#knowledgebase-path {
width: 80%;
}
 
#file-search-dialog-input {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
 
#file-search-results {
overflow: scroll;
grid-column: 1;
grid-row: 1;
}