:root {
    --color-background: #282A36;
    --color-foreground: #F8F8F2;
    --color-selection: #44475A;
    --color-comment: #6272A4;
    --color-red: #FF5555;
    --color-orange: #FFB86C;
    --color-yellow: #F1FA8C;
    --color-green: #50FA7B;
    --color-purple: #BD93F9;
    --color-cyan: #8BE9FD;
    --color-pink: #FF79C6;
    --color-black: #21222C;
}

body {
    background-color: var(--color-background);
    color: var(--color-foreground);
}

a {
    color: var(--color-purple);
    text-decoration: none;
}

.list.row:hover {
    background-color: var(--color-selection);
}

.list-category a {
    font-family: "Inconsolata", monospace;
    color: var(--color-yellow);
}

.list-title a.title {
    color: var(--color-foreground);
}

.list-title a.tag {
    color: var(--color-selection);
    font-size: 80%;
}

a:hover,
.list-category a:hover,
.list-title a.title:hover,
.list-title a.tag:hover {
    color: var(--color-pink);
}

.button {
    color: var(--color-purple);
    border-color: var(--color-selection);
}
.button:hover, .button:focus, .button.active {
    color: var(--color-pink);
    background-color: var(--color-selection);
    border-color: var(--color-comment);
}

.list-date-time {
    font-family: "Inconsolata", monospace;
    color: var(--color-green);
}

.translations.row {
    color: var(--color-comment);
}

.entry-content p {
    font-size: 1.1em;
}

.modified-date-time.row,
.entry-title footer,
.footer.row footer {
    color: var(--color-comment);
    font-style: italic;
}

code {
    padding: 0.2rem 0.5rem;
    margin: 0 0.2rem;
    font-size: 90%;
    white-space: nowrap;
    background-color: var(--color-black);
    border: none;
    border-radius: 5px;
    font-family: "Inconsolata", monospace;
}

.figure p.caption,
.figure div.legend {
    color: var(--color-comment);
    font-size: 0.9em;
    border-left: 1px solid var(--color-selection);
}

#toc-toggle{
    background-color: var(--color-background);
}
.toc {
    background-color: var(--color-black);
}
.toc span.selected {
    background-color: var(--color-selection);
}
.toc span:hover {
    background-color: var(--color-selection);
}
.toc ul li.caret > span::before {
    border-color: var(--color-comment);
}

hr {
    border-color: var(--color-comment);
}

.mdzsyn-comment {color: var(--color-comment);}
.mdzsyn-operator {color: var(--color-pink);}
.mdzsyn-number {color: var(--color-foreground);}
.mdzsyn-keyword {color: var(--color-cyan);}
.mdzsyn-string {color: var(--color-yellow);}
.mdzsyn-identifier {color: var(--color-green);}
.mdzsyn-symbol {color: var(--color-foreground);}
.mdzsyn-coresym {color: var(--color-pink);}
.mdzsyn-constant { color: var(--color-purple); }
.mdzsyn-character { color: var(--color-red); }
.mdzsyn-type { color: var(--color-green); }
.mdzsyn-line { color: var(--color-selection); }
