.statistics {
    --this-gap: 15px;
    --shadow: calc(var(--this-gap)/2);
    display: flex;
    flex-direction: column;
    gap: var(--this-gap);
    padding: var(--this-gap) 0px;
    padding-top: calc(var(--this-gap) + var(--shadow)/2);
    border-bottom: 2px solid #00000040;
    box-shadow: inset 0px var(--shadow) calc(var(--shadow)/2) 0px rgba(0, 0, 0, 0.25);
    transition: 0.3s;
}
.statistics {
    --gradient-gap: calc(var(--this-gap)*2);
    --px: 2px;
    --coeff: 0.5;
    background-color: var(--back-clr-three);
    background-image:
        repeating-linear-gradient(
            to right,
            rgba(0,0,0,0.25) 0px,
            rgba(0,0,0,0.25) var(--step),
            rgba(0,0,0,0.5) var(--step),
            rgba(0,0,0,0.5) calc(var(--step)*2)
        ),
        linear-gradient(to left,
            transparent calc(var(--this-gap)*2 - var(--px)),
            rgba(235, 214, 24, 0.5) calc(var(--this-gap)*2 - var(--px)),
            rgba(235, 214, 24, 0.5) calc(var(--this-gap)*2),
            transparent calc(var(--this-gap)*2),
            transparent calc(var(--this-gap)*5 - var(--px)),
            rgba(235, 73, 36, 0.5) calc(var(--this-gap)*5 - var(--px)),
            rgba(235, 73, 36, 0.5) calc(var(--this-gap)*5),
            transparent calc(var(--this-gap)*5),
            transparent calc(var(--this-gap)*8 - var(--px)),
            rgba(36, 239, 141, 0.5) calc(var(--this-gap)*8 - var(--px)),
            rgba(36, 239, 141, 0.5) calc(var(--this-gap)*8),
            transparent calc(var(--this-gap)*8),
            transparent calc(var(--this-gap)*11 - var(--px)),
            rgba(36, 185, 239, 0.5) calc(var(--this-gap)*11 - var(--px)),
            rgba(36, 185, 239, 0.5) calc(var(--this-gap)*11),
            transparent calc(var(--this-gap)*11),
            transparent 0px
        )
    ;
}
.statistics__section {
    display: flex;
    flex-direction: column;
}
.statistics__header {
    display: flex;
    padding-left: var(--this-gap);
}
.statistics__title {
    padding: calc(var(--this-gap)/2);
    border-radius: 5px 5px 0px 0px;
    background-color: var(--back-clr-two);
    background-clip: padding-box;
}
.statistics__card {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--this-gap);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    /* padding: calc(var(--this-gap)/2); */
    padding: calc(var(--this-gap)/2) var(--this-gap);
}
.statistics__card:first-of-type {
    border-top: 1px solid rgba(0,0,0,0.5);
}
.statistics__subheader {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--this-gap);
}
.statistics__list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--this-gap);
}
.statistics__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: calc(var(--this-gap)*2);
    padding: 2px 5px 5px;
    border-radius: 5px;
    /* border: 1px solid var(--main-clr-three); */
    background-color: var(--back-clr-two);
    cursor: default;
}
.statistics__avatar {
    display: block;
    flex-shrink: 0;
    width: 40px;
    aspect-ratio: 1/1;
    border: 2px solid var(--main-clr-three);
    border-radius: 5px;
    background-size: contain;
}
.statistics__subtitle {
    display: flex;
    align-items: center;
    gap: calc(var(--this-gap)/2);
    font-size: var(--h5);
}
.statistics__text {
    font-size: var(--h6);
    border-radius: 5px;
    /* background-color: var(--back-clr-three); */
}