* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #000f3b;
    font-family: Inter;
    overflow: hidden;
    margin: 5px;
}

*::-webkit-scrollbar {
    height: 0;
    width: 0;
}

.flx {
    display: flex;
}

nav {
    width: 100%;
    min-height: 4rem;
    height: 4rem;
    background: #202020;
    padding-inline: 1rem;
    border-radius: 4px;
    justify-content: space-between;
    user-select: none;

    & .left,
    & .right {
        align-items: center;
        justify-content: space-between;

        & .opt {
            background: #4e4e4e;
            padding: 3px;
            width: 28px;
            height: 28px;
            border-radius: 4px;

            &:hover {
                background: #616161;
                cursor: pointer;
            }
        }

        & .code {
            padding-inline: 1rem 3px;
            color: #fff;
            font-size: 1rem;
            font-weight: bold;
            margin-top: -2px;
        }
    }
}

.container {
    color: #e2e2e2;
    position: absolute;
    top: 74px;
    left: 5px;
    bottom: 5px;
    right: 5px;
    height: stretch;
    border-radius: 4px;
    display: flex;
}

.container .files {
    color: #e2e2e2;
    background: #1d1d1d;
    width: 224px;
    margin-right: 5px;
    overflow: scroll;
    height: stretch;
    border-radius: 4px;
    display: none;
    user-select: none;

    h3 {
        font-size: 1.9rem;
        background: #1d1d1d;
        padding: 6px;
        position: sticky;
        top: 0;
    }

    .file {
        margin-top: 20px;
        flex-direction: column;

        a {
            text-decoration: none;
            background: #141414;
            overflow: scroll;
            margin-top: 5px;
            padding: 5px;
            cursor: pointer;
            font-size: 0.9rem;
            color: white;

            &:hover {
                background: grey;
            }
        }
    }
}

.container .source {
    padding: 5px;
    padding-left: 1rem;
    font-size: 1rem;
    color: #e2e2e2;
    background: #1d1d1d;
    overflow-x: scroll;
    /* height: stretch; */
    border-radius: 4px;
    flex: 1;
    flex-direction: column;

    &::selection {
        background: #3f475e94;
    }
}

/* #region from this div and all what's inside it was generated by Gemini */
.code-container {
    display: flex;
    background-color: #1e1e1e;
    color: #d4d4d4;
    font-family: 'Consolas', 'Cascadia Code', monospace;
    font-size: 16px;
    line-height: 1.6;
    border: 1px solid #3c3c3c;
    overflow-x: auto;
    width: 100%;
    align-items: stretch;

    &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background-color: #444;
        border-radius: 10px;

        &:hover {
            background-color: #555;
        }
    }
}

.line-numbers {
    color: #858585;
    padding: 15px 10px;
    text-align: right;
    min-width: 40px;
    user-select: none;
    z-index: 20;
    white-space: nowrap;
    height: auto;
}

.code-content {
    margin: 0;
    padding: 15px 20px;
    white-space: pre;
    background-color: #1e1e1e !important;
    min-width: max-content;
    flex-grow: 1;
}

.k {
    color: #569cd6;
}

.t {
    color: #4ec9b0;
}

.s-t {
    color: #86d39d;
}

.v {
    color: #9cdcfe;
}

.m {
    color: #dcdcaa;
}

.str {
    color: #ce9178;
}

.c {
    color: #c586c0;
}

.n {
    color: #b5cea8;
}

.e {
    color: #b8d7a3;
}

.i {
    color: #569cd6;
}


.ns {
    color: #c1c1c1;
}

.it {
    color: #b8d7a3;
}

.com {
    color: #00c500;
}

/* #region */