@font-face {
  font-family: 'Akira';
  src: url('../assets/polices/Akira\ Expanded\ Demo.otf') format('opentype');
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  header {
    position: relative;
    text-align: center;
  }

  .background {
    background-image: url('../assets/ecran-accueil.png');
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
    overflow: hidden;
  }

  .background-win {
    background-image: url('../assets/win.png');
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
    overflow: hidden;
  }

  footer {
    position: fixed;
    bottom: 0;
    right: 0;
    font-size: 20px;
    padding: 20px;
  }

  

/* menu */

  nav {
    text-align: center;
    position: fixed;
    top: calc(50% - 90px);
    left: calc(50% - 50px);
    transform: translate(-50%, -50%);
  }

  nav ul {
    list-style-type: none;
  }

  nav ul li a {
    
    text-decoration: none;
    color: rgb(27, 37, 69);
    font-size: 48px;
    transition: color 0.3s ease;
    font-family: "Akira", sans-serif;
  }

  nav ul li a:hover {
    color: rgb(246, 240, 208);
  }



  /* lignes */

  .ligne {
    content: '';
    position: absolute;
    width: 200%;
    height: 2px;
    background-color: #ccc;
    animation: flicker 1.5s infinite alternate;
  }

  .ligne:nth-child(1) {
    top: 55%;
    left: -50%;
    transform: rotate(80deg);
  }
  
  .ligne:nth-child(2) {
    top: 50%;
    left: -90%;
    transform: rotate(-160deg);
  }
  
  .ligne:nth-child(3) {
    top: 70%;
    left: -30%;
    transform: rotate(15deg);
  }
  
  .ligne:nth-child(4) {
    top: 40%;
    left: -50%;
    transform: rotate(-20deg);
  }
  
  .ligne:nth-child(5) {
    top: 85%;
    left: -50%;
    transform: rotate(-80deg);
  }

  .ligne:nth-child(6) {
    top: 50%;
    left: -80%;
    transform: rotate(-80deg);
  }

  .ligne:nth-child(7) {
    top: 50%;
    left: -80%;
    transform: rotate(-175deg);
  }

  @keyframes flicker {
    0% { opacity: 0.3; }
    50% { opacity: 0.5; }
    100% { opacity: 0.3; }
  }


/*   logos */

.logo {
  display: none;
  width: 35%;
  height: auto;
  margin: 0 auto;
}
.logo-container {
  text-align: center;
  padding-top: 100px;
}

/* cacher le reste  */

.hide-background {
  background-image: none;
  background-color: rgb(246, 240, 208);
}

.hide-menu {
  display: none;
}

/* crédits */

.center-image {
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

.background-credits {
  background-color: rgb(246, 240, 208);
  overflow: hidden;
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.close-icon {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.close-icon:before,
.close-icon:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: black;
}

.close-icon:before {
    transform: translateY(-50%) rotate(45deg);
}

.close-icon:after {
    transform: translateY(-50%) rotate(-45deg);
}