@font-face {
  font-family: "Replica-Bold";
  src: url("./Replica-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "FoundryGridnikW03-ExtraBold";
  src: url("./FoundryGridnikExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
}

*, ::before, ::after {
  font-family: "Replica-Bold";
  font-weight: 700;
  color: #fff;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}



html {
    overflow: hidden;
}

body {
    display: block;
    width: 1920px;
    height: 1080px;
}

main {
    width: 1920px;
    height: 1080px;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 4;
    background: linear-gradient(0deg, rgba(15, 26, 33, 0.80) 0%, rgba(15, 26, 33, 0.80) 100%);
}

/* Style pour l'élément vidéo */
#bgvideo {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1; /* Derrière tout */
    object-fit: cover; /* Recouvre tout en conservant le ratio */
}

/* Style pour la superposition (le filtre) */
.video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Au-dessus de la vidéo, mais sous le contenu de la page */
    
    /* Le dégradé opaque pour le filtre */
    background: linear-gradient(0deg, rgba(15, 26, 33, 0.80) 0%, rgba(15, 26, 33, 0.80) 100%);
}

.backgroundstats {
    position: absolute;
    top: 180px;
    left: 310px;
    width: 1300px;
    height: 720px;
    z-index: 5;
    border-radius: 3px;
    border: 2px solid #393E43;
    background: rgba(22, 22, 22, 0.50);
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    padding-top: 150px;
}

.stat {
    z-index: 6;
    height: 95px;
    width: 1296px;
    display: flex;
    align-items: center;
}

.Player1stat {
    position: absolute;
    left: 500px;
    transform: translateX(-100%);
    text-align: end;
}

h4 {
    position: absolute;
    left: 650px;
    transform: translateX(-50%);
    color: var(--main-bg-color);
    text-align: center;
    font-family: Replica-Bold;
    font-size: 30px;
}

.Player2stat {
    position: absolute;
    left: 800px;
}

h1 {
    text-align: right;
    font-family: Replica-Bold;
    font-size: 44px;
    position: absolute;
    top: 210px;
}

#Player1Name, #Player1Team{
    left: 810px;
    transform: translateX(-100%);
    z-index: 8;
}

#Player2Name, #Player2Team {
    left: 1110px;
    z-index: 8;
}

#Player1Name, #Player1Team, .Player1stat {
    text-align: right;    
}

h2 {
    text-align: right;
    font-family: Replica-Bold;
    font-size: 18px;
    position: absolute;
    top: 280px;
    color: var(--main-bg-color);
}

h3 {
    color: #C8A755;
    text-align: right;
    font-family: FoundryGridnikW03-ExtraBold;
    font-size: 60px;
}

.PlayerAgent {
    width: 350px;
    height: 467px;
    border-radius: 3px;
    border: 2px solid #393E43;
    background: #101920;
    backdrop-filter: blur(5px);
    z-index: 7;
    position: absolute;
    top: 300px;
}

#Player1Agent {
    left: 110px;
}

#Player2Agent {
    left: 1460px;
}