@font-face {
    font-family: "Komigo3D";
    src: url("assets/fonts/komigo/Komigo3D-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Comico";
    src: url("assets/fonts/comico/Comico.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    margin: 0;
    background: transparent;
    color: white;
    font-family: "Comico", sans-serif;
    padding: 10px;
    /* background-image: url(bg.png); */
}

#box {
    padding: 10px 10px;
    background: rgba(0, 0, 0, .95);
    border-radius: 8px;
    font-size: 24px;
    width: 600px;
    height: 165px;
    font-weight: bold;
    text-shadow: 3px 3px 2px rgb(0, 0, 0);
    backdrop-filter: blur(10px);
    user-select: none;
    box-shadow: 5px 5px 15px 0px rgb(0 0 0);
    letter-spacing: 1.5px;
}


.nick-box {
    display: flex;
    align-items: center;
}

.nick {
    font-family: "Komigo3D", sans-serif !important;
    letter-spacing: 4px;
    line-height: 45px;
    font-size: 35px;
    margin-bottom: 3px;
}

.main {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
    justify-content: space-between;
}
.main>div {
    display: flex;
    gap: 5px;
}

.head {
    background-color: black;
    width: 90px;
    height: 90px;
    background-image: url(head.png);
    background-size: contain;
    box-shadow: inset -4px -4px 8px -4px rgb(0, 0, 0);
}

.box {
    width: 140px;
    margin-left: 6px;
}

.current-streak-box {
    height: 20px;
    display: flex;
    width: 100%;
    align-items: center;
    gap: 5px;
    justify-content: center;
}


.current-streak-box, .stats, .rank-box, .winrate {
    font-size: 16px;
    
}

.rank-box {
    height: 30px;
    display: flex;
    gap: 5px;
    align-items: center;
    /* color: rgb(16, 185, 129); */
    
}

.rank-icon {
    width: 20px;
    height: 20px;
    background-image: url(data:image/png;base64,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);
    background-position: -100px 0px;
    background-size: cover;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

.streak-icon {
    height: 20px;
    width: 20px;
    background-image: url(./assets/icon/fire.png);
    background-size: contain;
    filter: drop-shadow(2px 3px 1px black);
}

.stats {
    display: flex;
    width: 110px;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: center;
    justify-content: center;
}

.stats>div {
    width: 100%;
    text-align: center;
}

.stats>span {
    width: 33%;
    height: 20px;
}

.elo-box {
    display: flex;
    
}

.eloRank {
    font-size: 16px;
    color: #757070;
}

.elo-box, .session-elo {
    font-size: 20px;
}



.stats span {
    align-content: center;
    text-align: center;
}


.stats .win {
    color: green;
}
.stats .lose {
    color: red;
}
.stats .draw {
    color: grey;
}

.matches {
    display: flex;
    justify-content: space-between;
    
}

.matches>.head {
    position: relative;
    width: 42px;
    height: 42px;
    align-content: center;
    text-align: center;
}

.head.lose::after {
    box-shadow: 0px 0px 2px 3px rgba(255, 0, 0, 1);
}
.head.win::after {
    box-shadow: 0px 0px 2px 3px rgba(0, 255, 0, 1);
}
.head.draw::after {
    box-shadow: 0px 0px 2px 3px rgba(160, 160, 160, 1);
}

.head.win::after, .head.lose::after, .head.draw::after {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 100%;
    height: 100%;
}

.head span {
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, 0.9);
}