@font-face {
    font-family: "font";
    src: url("../font/InconsolataNerdFontPropo-Bold.ttf");
}


* {
    // margin: 0;
    font-family: "font";
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    // width: 530px;
    color: #FAF8FC;
    transform-origin: 0 0;
    background-color: #050505;
    transform: scale(2.5);
}

.container {
    max-width: 630px;
    min-width: 500px;
    width: max-content;
    padding: 20px 15px 10px 15px;
    background-color: #232323b2;
}

.head_box {
    padding: 10px;
    // color: rgb(0, 0, 0);
    text-align: center;

    .id_text {
        font-size: 30px;
        font-weight: bold;
        text-align: left;
        font-weight: bold;
    }
}

.data_box {
    border-radius: 10px;
    margin-top: -5px;
    padding: 6px;
    // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.list {
    display: flex;
    flex-direction: column;
    gap: 15px;

    .item {
        display: flex;
        align-items: center;

        background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.2),
                rgba(255, 255, 255, 0.05));
        backdrop-filter: blur(12px) saturate(150%);

        border-radius: 16px;
        padding: 15px;

        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
            inset 0 1px 1px rgba(255, 255, 255, 0.2);

        border: 1px solid rgba(255, 255, 255, 0.15);

        .title {
            font-size: 16px;

            .text {
                font-weight: bold;
                display: flex;
                align-items: center;

                .release {
                    font-size: 11px;
                    margin-left: 10px;
                    color: #bbbbbb;
                    border: 2px solid #bbbbbb;
                    border-radius: 18px;
                    padding: 3.5px 8px;
                    display: inline-block;
                }


                .icon {
                    width: 18px;
                    height: 18px;
                    margin-right: 5px;
                }
            }

            .branch {
                display: flex;
                align-items: center;
                font-size: 13px;
                margin-top: 5px;
                color: #C4C3C8;

                img {
                    width: 13px;
                    height: 13px;
                    margin-right: 1.5px;
                }
            }

            .dec {
                font-size: 13px;
                color: #C4C3C8;
                margin-top: 10px;
                display: flex;
                align-items: center;
                white-space: pre;

                span {
                    color: #FAF8FC
                }

                .avatar {
                    display: flex;
                    align-items: center;
                    margin-right: 5px;

                    img {
                        width: 16px;
                        height: 16px;
                        border-radius: 50%;
                        margin-left: -4px;
                        position: relative;

                        &[src=""]::after {
                            content: attr(data-nameStart);
                            position: absolute;
                            inset: 0;
                            color: #FAF8FC;
                            background: #E67E22;
                            font-family: "Verdana", "Arial";
                            text-align: center;
                            line-height: 16px;
                            font-size: 11px;
                            // z-index: 1;
                        }

                        &:first-child {
                            z-index: 1;
                        }
                    }
                }


            }

            .desc {
                font-size: 12px;
                color: #C4C3C8;
                margin-top: 10px;
                // white-space: pre-wrap;
                // line-height: 10px;

                .head {
                    font-size: 14px;
                    color: #FAF8FC;
                }

                ul,
                ol {
                    padding-left: 13px;
                    text-indent: -2px;
                    // margin-left: 8px;
                }

                h1,
                h2,
                h3,
                h4 {
                    margin-top: 0.5em;
                    margin-bottom: 0.8em;
                }


                a {
                    color: #90d0e4;
                    text-decoration: none;
                }
            }

            .stats {
                border-top: 1px solid rgba(255, 255, 255, 0.15);
                border-bottom: 1px solid rgba(255, 255, 255, 0.15);
                margin-top: 10px;
                padding: 5px 10px;
                font-size: 13px;
                color: #C4C3C8;
                width: max-content;
            }
        }
    }
}

.copyright {
    font-size: 12px;
    text-align: center;
    color: #c3c4c4;
    margin-top: 10px;

    .version {
        color: #d3bc8e;
        display: inline-block;
        padding: 0 3px;
    }
}

.file-count {
    color: #ffffff;
}

.additions {
    color: #00B400;
}

.deletions {
    color: #D92B2F;
}