body {
    width: calc(100% - 2vh);
    height: calc(90vh - 2vh);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    margin: 0;
    padding: 1vh;
    user-select: none;
    overflow: hidden;
    position: relative;
    flex-direction: column;
    gap: 1vh;
    transition: .2s;
    -webkit-transition: .2s ease-in-out;
}

body::-webkit-scrollbar {
    display: none;
    margin: 0;
}

.kill-counter {
    position: absolute;
    bottom: 4.3vh; /* Ajustez cette valeur pour monter la tête de mort */
    right: 7vw; /* Ajustez cette valeur pour aligner la tête de mort à droite */
    color: white;
    font-size: 1.5vh; /* Augmente la taille du chiffre */
    text-align: center;
    font-family: "Gill Sans", sans-serif;
}

.kill-counter img {
    width: 2vw; /* Réduit la taille de l'image */
    height: 2vw; /* Réduit la taille de l'image */
    display: block;
    margin: 0 auto;
}

.kill-counter span {
    display: block;
    margin-top: 0.9vh; /* Ajustez cette valeur pour rapprocher le texte de l'image */
}
@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@300;600&display=swap");

@font-face {
    font-family: regular;
    src: url(fonts/Metropolis-Regular.otf);
}

@font-face {
    font-family: medium;
    src: url(fonts/Metropolis-Medium.otf);
}

@font-face {
    font-family: bold;
    src: url(fonts/Metropolis-Bold.otf);
}

@font-face {
    font-family: italic;
    src: url(fonts/SignPainter\HouseScript.ttf);
}

@font-face {
    font-family: x;
    src: url(fonts/x.ttf);
}

@font-face {
    font-family: bone;
    src: url(fonts/bones.ttf);
}

@font-face {
    font-family: x2;
    src: url(fonts/x2.ttf);
}

@font-face {
    font-family: x3;
    src: url(fonts/x3.ttf);
}

.rank {
    left: 4vh; 
    width: 2.3vh;
    height: auto;
}

.wrapper {
    position: relative;
    width: fit-content;
    height: calc(2.3vh - 1vh);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(37, 37, 37, 0.719);
    padding: .5vh;
    border-radius: .3vh;
    gap: 1vh;
    border-bottom: .1vh solid transparent;
}

.wrapper.me {
    background-color: rgb(0, 128, 0);
    box-shadow: 0 0 10px rgb(0, 128, 0);
    border-bottom-color: rgb(0, 128, 0);
}

.wrapper.me > .wcombo > span,
.wrapper.me > .wleft > span,
.wrapper.me > .wright > span,
.wrapper.me > .wii > i {
    color: rgb(255, 255, 255);
}

.wrapper.me > .wii > img {
    filter: grayscale(100%) brightness(100%);
}

.wrapper.death {
    background-color: rgb(124, 26, 26);
    box-shadow: 0 0 10px rgb(124, 26, 26);
    border-bottom-color: rgb(124, 26, 26);
}

.wrapper.death > .wcombo > span,
.wrapper.death > .wleft > span,
.wrapper.death > .wright > span,
.wrapper.death > .wii > i {
    color: #ffffff;
}

.wrapper.death > .wii > img {
    filter: grayscale(100%) brightness(100%);
}

.wrapper.death > .wii > i {
    font-size: 1.5vh;
}

.wcombo {
    width: fit-content;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: .25vh;
    gap: .5vh;
}

.wcombo > span {
    color: #fff;
    font-size: 1.75vh;
    font-family: x3;
}

.wcombo > i {
    color: #fff;
    font-size: 1.85vh;
}

.wleft, .wright {
    width: fit-content;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.wleft > span {
    color: #fff;
    font-size: 1.5vh;
    font-family: medium;
    text-overflow: ellipsis;
    overflow: hidden !important;
}

.wright > span {
    color: #fff;
    font-size: 1.5vh;
    font-family: medium;
    text-overflow: ellipsis;
    overflow: hidden !important;
}

.wii {
    width: fit-content;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vh;
}

.wii > img {
    width: 4vw;
}

.wii > i {
    color: #fff;
    font-size: 1.75vh;
    transform: rotate(-20deg);
}

#x {
    font-size: 1.75vh;
    font-family: x;
    margin-left: .1vh;
    font-weight: bold;
}

.wkill, .wdeath {
    position: absolute;
    left: -4vh;
    width: 2.5vh;
    height: 2.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(37, 37, 37, 0.622);
    padding: .25vh;
    border-radius: 8vh;
    opacity: 0%;
}

.wkill > i {
    color: #0f84c7;
    font-size: 2vh;
    opacity: 0%;
}

.wdeath > i {
    font-size: 1.5vh;
    color: #a200ff;
    font-size: 1.75vh;
    opacity: 0%;
    font-size: 1.5vh;
}

.killanim {
    width: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 5vh;
    right: 35%;
}

.fade-out {
    opacity: 0.1;
    transition: opacity 1s ease-in-out;
}

.fade-out-complete {
    opacity: 0;
    margin-right: -50vh;
    transition: opacity 1s ease-in-out, margin-right 1s ease-in-out;
}


.rank.fade-out, 
.rank-number.fade-out {
    opacity: 0.1; /* Même opacité que la killfeed */
    transition: opacity 1s ease-in-out; /* Transition fluide */
}