:root {
    --color-bg: #0d1117;
    --color-fg: #fff;
    --color-secondary: #666;
    --color-hover: #151B23;

    --color-red: #ff3939;
    --color-green: #4EC313;
    --color-blue: #1EAFFF;
    --color-yellow: #E5BF00;
    --color-orange: #F56F22;
    --color-aqua: #78CFFF;

    --color-link: #4493f8;

    --color-head: var(--color-blue);
    --color-rel: var(--color-green);
    --color-sel: var(--color-yellow);

    --ff-grotesque: 'Rubik', 'OpenSans', sans-serif;
    --ff-monospace: 'JetBrainsMono Nerd Font', 'Consolas', monospace;
    font-size: 18px;

    scrollbar-color: var(--color-secondary) transparent;
    scrollbar-width: thin;
}

html {
    height: 100vh;
}

body {
    margin: 0;
    height: 100%;
    background-color: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--ff-monospace);
}

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

    &:hover {
        text-decoration: underline;
    }
}

h1 {
    font-weight: 600;
    font-size: 2rem;
    padding-bottom: 0.25em;
    border-bottom: 2px solid var(--color-secondary);
}

table.prettytable {
    padding: 0.25em;
    background-color: var(--color-hover);
    border-spacing: 0;

    tr:first-child th {
        background-color: var(--color-hover);
        border-bottom: 1px solid #666;
    }

    tr:nth-child(odd) {
        background-color: #1d2530;
    }

    th,
    td {
        padding-inline: 0.25em;
    }
}

div.container {
    position: relative;
    margin-top: 0.2em;
    padding: 0.75em;
    border: 1px solid var(--color-secondary);
    border-radius: 0.75em;
    font-size: 0.8rem;

    h1 {
        position: absolute;
        top: -0.625em;
        left: 1.25em;

        margin: 0;
        padding-inline: 0.33em;
        padding-bottom: 0;
        border: none;
        background-color: var(--color-bg);
        font-size: 1rem;
        font-weight: 400;
    }

    &.lazy {
        width: fit-content;
    }
}

table.index {
    width: 100%;
    text-align: center;
}

table.commit-history {
    width: 100%;
    white-space: nowrap;
    border-spacing: 0;

    tr:hover {
        background-color: var(--color-hover);

        td.node-symbol {
            background-image: url("/static/img/node-sel-middle.svg");
        }

        &:first-child td.node-symbol {
            background-image: url("/static/img/node-sel-top.svg");
        }

        &:nth-last-child(3) td.node-symbol {
            background-image: url("/static/img/node-sel-bottom.svg");
        }
    }

    tr.commit {
        position: relative;
    }

    td {
        padding-left: 0.5em;
        font-size: 0.85rem;
    }

    td.node-symbol {
        min-width: 1.5em;
        width: 1.5rem;
        height: 1.5rem;
        padding: 0;
        background-image: url("/static/img/node-middle.svg");
        background-size: cover;
        background-repeat: no-repeat;
        cursor: pointer;
    }

    tr:first-child td.node-symbol {
        background-image: url("/static/img/node-top.svg");
    }

    tr:nth-last-child(3) td.node-symbol {
        background-image: url("/static/img/node-bottom.svg");
    }

    tr.tooltip {
        display: none;

        td {
            font-size: 0.8em;
        }

        td.node-symbol {
            background-image: url("/static/img/node-segment.svg");
            cursor: unset;
        }

        &:nth-last-child(2),
        &:nth-last-child(1) {
            td.node-symbol {
                background-image: none;
            }
        }
    }
}

table.inline {
    th {
        text-align: left;
        vertical-align: top;
    }

    td {
        padding-left: 2ch;
    }
}

a.nostyle {
    color: var(--color-fg);
    text-decoration: none;
}

form.tower {

    label,
    input {
        display: block;

        &:not(:first-child) {
            margin-top: 0.5em;
        }
    }

    input[type="submit"] {
        margin-top: 1em;
    }
}

input[type="text"],
input[type="password"] {
    position: relative;

    padding: 0;
    border: 0;
    border-bottom: 1px solid #666;

    background-color: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--ff-monospace);

    caret-color: transparent;

    &:focus {
        outline: none;
        background-color: var(--color-hover);
    }

    &:-internal-autofill-selected {
        background-color: var(--color-hover) !important;
    }

    &::before {
        content: 'a';
        /* Create a pseudo-element as the custom cursor */
        position: absolute;
        left: 0;
        /* Start at the left edge */
        width: 0.8em;
        /* Adjust width to match a character's size */
        height: 1em;
        /* Adjust height to match line height */
        background-color: var(--color-fg);
        /* Color of the box cursor */
        animation: blink 1s steps(2, start) infinite;
        /* Add blinking effect */
    }
}

input[type="submit"],
button {
    padding-block: 0.25em;
    padding-inline: 1em;
    border: 1px solid var(--color-secondary);
    border-radius: 0.5em;
    background-color: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--ff-monospace);

    &:hover {
        background-color: var(--color-hover);
        cursor: pointer;
    }
}

.main-container {
    overflow-x: scroll;
}

.margins {
    margin-inline: 6em;
    box-sizing: border-box;
}

.navbar-wrapper {
    padding-block: 0.5em;
    background-color: #111;
    border-bottom: 3px solid #666;


    #navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #navbar img {
        height: 4em;
    }

    #navbar div.right-panel {
        display: flex;
    }
}

span.release-label {
    color: var(--color-rel);
}

.centered-absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.snippet {
    display: inline-block;
    padding: 1em;
    background-color: var(--color-hover);
    border-radius: 0.5em;
}

.link-list {
    a { margin-right: 1em; }
    a:last-child { margin-right: 0; }
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media (max-width: 1500px) {
    .margins {
        margin-inline: 0.5em;
    }
}

@media (max-width: 1200px) {
    #wrapper {
        flex-direction: column;
    }
}