:root, .light:root {
    --main-background: #fff;
    --code-background: transparent;
    --line-numbers-background: rgba(0, 0, 0, 0.025);
    --navbar-background: #eee;

    --meter-unvisited-color: #f9c3c3;
    --meter-visited-color: #9ed09f;
    --meter-separator-color: white;

    --color: #000;
    --dirname-color: #bbb;
    --underline-color: #ddd;
    --visited-color: #eaffea;
    --visited-number-color: rgba(64, 192, 64, 0.2);
    --unvisited-color: #ffecec;
    --unvisited-number-color: rgba(255, 128, 128, 0.5);
    --somevisited-color: #ffd;
    --highlight-color: #a0fbff;
    --line-number-color: rgba(0, 0, 0, 0.4);
    --unvisited-margin-color: #d69e9e;
    --border: #eee;
    --navbar-border: #ddd;
    --code-color: #000;
    --hljs-link: #6a737d;
    --hljs-keyword: #d73a49;
    --hljs-regexp: #032f62;
    --hljs-title: #900;
    --hljs-type: #6f42c1;
    --hljs-meta: #22863a;
    --hljs-variable: #005cc5;
}

.dark:root {
    --main-background: #202020;
    --code-background: #222;
    --line-numbers-background: rgba(0, 0, 0, 0.125);
    --navbar-background: #202020;

    --meter-unvisited-color: #622;
    --meter-visited-color: #252;
    --meter-separator-color: black;

    --color: #bebebe;
    --dirname-color: #666;
    --underline-color: #444;
    --visited-color: #002800;
    --visited-number-color: #252;
    --unvisited-color: #380000;
    --unvisited-number-color: #822;
    --somevisited-color: #303000;
    --highlight-color: #303e3f;
    --line-number-color: rgba(230, 230, 230, 0.3);
    --unvisited-margin-color: #622;
    --border: #333;
    --navbar-border: #333;
    --code-color: #ccc;
    --hljs-link: #999;
    --hljs-keyword: #cda869;
    --hljs-regexp: #f9ee98;
    --hljs-title: #dcdcaa;
    --hljs-type: #ac885b;
    --hljs-meta: #82aaff;
    --hljs-variable: #cf6a4c;
}

@media (prefers-color-scheme: dark) {
    :root {
        --main-background: #202020;
        --code-background: #222;
        --line-numbers-background: rgba(0, 0, 0, 0.125);
        --navbar-background: #202020;

        --meter-unvisited-color: #622;
        --meter-visited-color: #252;
        --meter-separator-color: black;

        --color: #bebebe;
        --dirname-color: #666;
        --underline-color: #444;
        --visited-color: #002800;
        --visited-number-color: #252;
        --unvisited-color: #380000;
        --unvisited-number-color: #822;
        --somevisited-color: #303000;
        --highlight-color: #303e3f;
        --line-number-color: rgba(230, 230, 230, 0.3);
        --unvisited-margin-color: #622;
        --border: #333;
        --navbar-border: #333;
        --code-color: #ccc;
        --hljs-link: #999;
        --hljs-keyword: #cda869;
        --hljs-regexp: #f9ee98;
        --hljs-title: #dcdcaa;
        --hljs-type: #ac885b;
        --hljs-meta: #82aaff;
        --hljs-variable: #cf6a4c;
    }
}

body {
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    background-color: var(--main-background);
}

pre {
    margin: 0;
    font-family: "Fira Code", "Cascadia Code", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 13px;
    color: var(--code-color);
    cursor: text;
}

code {
    font-family: inherit;
}

a {
    text-decoration: none;
    color: inherit;
}

a:visited {
    color: inherit;
}

#header {
    color: var(--color);
}

h1 {
    display: inline-block;
    margin: 1.5em 1.5em 0.75em 1.5em;
}

.dirname {
    color: var(--dirname-color);
}

h2 {
    display: inline-block;
    position: relative;
    top: -1px;
}

#footer {
    margin: 1em 0 1em 4em;
    color: #aaa;
    font-size: 12px;
}

#footer a {
    color: #666;
    border-bottom: 1px solid #ccc;
}

#footer a:visited {
    color: #666;
}

#navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 1em;
    height: 100%;
    background-color: var(--navbar-background);
    border-right: 1px solid var(--navbar-border);
    cursor: pointer;
}

#navbar span {
    display: block;
    position: absolute;
    width: 100%;
    height: 5px;
}

#navbar .unvisited, #navbar .some-visited {
    background-color: var(--unvisited-margin-color);
}

#report {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

#lines-layer {
    position: absolute;
    z-index: -100;
    width: 100%;
    background-color: var(--code-background);
}

#lines-layer span {
    display: inline-block;
    width: 100%;
}

a[id] {
    display: block;
    position: relative;
    top: -5.5em;
}

#lines-layer .unvisited {
    background-color: var(--unvisited-color);
}

#lines-layer .visited {
    background-color: var(--visited-color);
}

#lines-layer .some-visited {
    background-color: var(--somevisited-color);
}

a[id]:target + span {
    -webkit-animation: highlight-blank 0.5s;
    -moz-animation: highlight-blank 0.5s;
    -o-animation: highlight-blank 0.5s;
    animation: highlight-blank 0.5s;
}

a[id]:target + .unvisited {
    -webkit-animation: highlight-unvisited 0.5s;
    -moz-animation: highlight-unvisited 0.5s;
    -o-animation: highlight-unvisited 0.5s;
    animation: highlight-unvisited 0.5s;
}

a[id]:target + .visited {
    -webkit-animation: highlight-visited 0.5s;
    -moz-animation: highlight-visited 0.5s;
    -o-animation: highlight-visited 0.5s;
    animation: highlight-visited 0.5s;
}

a[id]:target + .some-visited {
    -webkit-animation: highlight-some-visited 0.5s;
    -moz-animation: highlight-some-visited 0.5s;
    -o-animation: highlight-some-visited 0.5s;
    animation: highlight-some-visited 0.5s;
}

@-webkit-keyframes highlight-blank {
    from { background-color: var(--highlight-color); }
    to { background-color: transparent; }
}

@-moz-keyframes highlight-blank {
    from { background-color: var(--highlight-color); }
    to { background-color: transparent; }
}

@-o-keyframes highlight-blank {
    from { background-color: var(--highlight-color); }
    to { background-color: transparent; }
}

@keyframes highlight-blank {
    from { background-color: var(--highlight-color); }
    to { background-color: transparent; }
}

@-webkit-keyframes highlight-unvisited {
    from { background-color: var(--highlight-color); }
    to { background-color: var(--unvisited-color); }
}

@-moz-keyframes highlight-unvisited {
    from { background-color: var(--highlight-color); }
    to { background-color: var(--unvisited-color); }
}

@-o-keyframes highlight-unvisited {
    from { background-color: var(--highlight-color); }
    to { background-color: var(--unvisited-color); }
}

@keyframes highlight-unvisited {
    from { background-color: var(--highlight-color); }
    to { background-color: var(--unvisited-color); }
}

@-webkit-keyframes highlight-visited {
    from { background-color: var(--highlight-color); }
    to { background-color: var(--visited-color); }
}

@-moz-keyframes highlight-visited {
    from { background-color: var(--highlight-color); }
    to { background-color: var(--visited-color); }
}

@-o-keyframes highlight-visited {
    from { background-color: var(--highlight-color); }
    to { background-color: var(--visited-color); }
}

@keyframes highlight-visited {
    from { background-color: var(--highlight-color); }
    to { background-color: var(--visited-color); }
}

@-webkit-keyframes highlight-some-visited {
    from { background-color: var(--highlight-color); }
    to { background-color: var(--somevisited-color); }
}

@-moz-keyframes highlight-some-visited {
    from { background-color: var(--highlight-color); }
    to { background-color: var(--somevisited-color); }
}

@-o-keyframes highlight-some-visited {
    from { background-color: var(--highlight-color); }
    to { background-color: var(--somevisited-color); }
}

@keyframes highlight-some-visited {
    from { background-color: var(--highlight-color); }
    to { background-color: var(--somevisited-color); }
}

#line-numbers {
    float: left;
    border-right: 1px solid var(--border);
    margin-right: 1em;
    color: var(--line-number-color);
    background-color: var(--line-numbers-background);
    text-align: right;
}

#line-numbers a {
    display: inline-block;
    padding-left: 2.35em;
    padding-right: 1em;
    text-decoration: none;
    color: var(--line-number-color);
}

#line-numbers .unvisited {
    background-color: var(--unvisted-number-color);
}

#line-numbers .visited {
    background-color: var(--visted-number-color);
}

code span[data-count] {
    background-color: var(--visited-number-color);
}

code span[data-count="0"] {
    background-color: var(--unvisited-number-color);
}

#tool-tip {
    display: none;
    position: fixed;
    padding: 0 0.25em;
    background-color: black;
    color: white;
}

#tool-tip.visible {
    display: block;
}

#files {
    padding: 1.5em 4em;
    background-color: var(--code-background);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.meter {
    display: inline-block;
    position: relative;
    top: 3px;
    width: 5em;
    height: 1em;
    background-color: var(--meter-unvisited-color);
}

.covered {
    display: inline-block;
    position: absolute;
    width: 50%;
    height: 100%;
    background-color: var(--meter-visited-color);
    border-right: 1px solid var(--meter-separator-color);
}

.percentage {
    display: inline-block;
    width: 4em;
    font-size: 90%;
    color: var(--color);
}

#files a {
    text-decoration: none;
    border-bottom: 1px solid var(--underline-color);
    color: var(--color);
}

.hljs-link,
.hljs-comment,
.hljs-quote {
    color: var(--hljs-link);
}

.hljs-built_in,
.hljs-builtin-name,
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
    color: var(--hljs-keyword);
}

.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
    color: var(--hljs-variable);
}

.hljs-regexp,
.hljs-string,
.hljs-doctag {
    color: var(--hljs-regexp);
}

.hljs-title,
.hljs-section,
.hljs-selector-id {
    color: var(--hljs-title);
}

.hljs-type,
.hljs-class .hljs-title {
    color: var(--hljs-type);
}

.hljs-meta,
.hljs-tag,
.hljs-name,
.hljs-attribute {
    color: var(--hljs-meta);
}