/* Framework */

@import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Notch:wght@200..700&display=swap');

:root {
  --fw-navigation-height: 82px;
}

/* Headers */
.fw-header {
  width: 100%;
}

.fw-header.fw-background-backup {
  position: relative;
  animation: bgBackup var(--cycle) ease-in-out infinite;
}

:root{
  --dark: #080808;  /* gris foncé */
  --light: rgb(12, 12, 12); /* gris clair */
  --cycle: 3s;    /* 1s + 200ms */
}

@keyframes bgBackup {
  0%, 65% {
    background-color: var(--dark);
  }
  75% {
    background-color: var(--light);
  }
  100% {
    background-color: var(--dark);
  }
}

/* Fullpage moins la navigation */
.fw-header.fw-fullpage {
  height: calc(85vh - var(--fw-navigation-height));
}

.fw-header.fw-header-small {
  height: calc(120px);
}

/* Header Game Display */

.fw-header-title {
  height: 21vh;
  min-height: 60px;

  font-family: "Stack Sans Notch", sans-serif;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto 30px auto;
}

.fw-header-title > .fw-header-title-content {
  grid-column: 2;
  grid-row: 2;

  color: #0e0e0e;
  text-align: center;
  font-size: 2em;
  font-weight: bold;
}

.fw-header-title > .fw-header-title-subcontent {
  grid-column: 2;
  grid-row: 4;

  color: #e0e0e0;
  text-align: center;
  font-size: 2.8em;
  font-weight: 800;
}

.fw-header-game-display {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  display: grid;
  grid-template-columns: 3fr auto 50px auto 50px auto 50px auto 3fr;
  grid-template-rows: 1fr auto 1fr;
}

.fw-header-game-display .fw-header-game-display-content {
  grid-row: 2;
}

.fw-header-game-display .fw-header-game-display-content.fw-header-game-display-content-1 { grid-column: 2; }
.fw-header-game-display .fw-header-game-display-content.fw-header-game-display-content-2 { grid-column: 4; }
.fw-header-game-display .fw-header-game-display-content.fw-header-game-display-content-3 { grid-column: 6; }
.fw-header-game-display .fw-header-game-display-content.fw-header-game-display-content-4 { grid-column: 8; }

.fw-header-game-display .fw-header-game-display-content img {
  width: 100%;
  border-bottom: 1px solid rgb(26, 26, 26);
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.fw-header-game-display .fw-header-game-display-content img:hover {
  transform: scale(1.05);
}

/* Navigation */

.fw-navigation {
  height: var(--fw-navigation-height);
}