@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%);
}





h1 {
    color: var(--main-bg-color);
    font-size: 30px;
    position: absolute;
    top: 310px;
    left: 375px;
    text-transform: uppercase;
    white-space: nowrap;
}

h2 {
    position: absolute;
    top: 350px;
    left: 375px;
    color: #FFF;
    font-family: Replica-Bold;
    font-size: 100px;
    white-space: nowrap;
}

h3 {
    color: var(--main-bg-color);
    font-family: Replica-Bold;
    font-size: 28px;
}

h4 {
    position: absolute;
    top: 40px;
    color: #FFF;
    font-family: FoundryGridnikW03-ExtraBold;
    font-size: 60px;
}

.container-player {
    position: absolute;
    z-index: 12;
}

.container-stats {
    position: absolute;
    z-index: 12;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: absolute;
    left: 375px;
    top: 550px;
}

.stat {
    width: 300px;
    height: 115px;
    position: relative;
    margin-bottom: 62px;
}

.container-agent {
    position: absolute;
    z-index: 12;
    top: 140px;
    left: 1210px;
    border-radius: 8px;
    width: 450px;
    height: 800px;
}

/* ----- BACKGROUND à 30% ----- */
.agent-bg {
  position: absolute;
  inset: 0;
  background:
    url(./Agents/backgrounds/Breach.png)
    -105px -83.243px / 146.667% 120.686% no-repeat;
  opacity: 0.3;
  z-index: 0;
}

/* ----- AGENT à 100% ----- */
.agent-pic {
  position: absolute;
  inset: 0;

  background:
    url(./Agents/pictures/Breach.png)
    -255.069px -63px / 213.364% 109% no-repeat;

  z-index: 1;
}