/* CHARGEMENT DES TYPOS */

@font-face {
    font-family: 'Aqua Grotesque';
    src: url('../font/AquaGrotesque.eot');
    src: url('../font/AquaGrotesque.eot?#iefix') format('embedded-opentype'),
        url('../font/AquaGrotesque.woff2') format('woff2'),
        url('../font/AquaGrotesque.woff') format('woff'),
        url('../font/AquaGrotesque.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'RobotoSlab';
    src: url('../font/RobotoSlab-Regular.eot');
    src: url('../font/RobotoSlab-Regular.eot?#iefix') format('embedded-opentype'),
        url('../font/RobotoSlab-Regular.woff2') format('woff2'),
        url('../font/RobotoSlab-Regular.woff') format('woff'),
        url('../font/RobotoSlab-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  
  /* DEBUT DU CSS */

  body{
      margin: 0;
      padding: 0;
      font-family: 'RobotoSlab'!important;
      font-weight: normal;
      font-style: normal;
      color: #1d1d1b;
      background-color: #f3f3f3;
      overflow-x: hidden;
  }
  
  h1, h2, h3, h4, h5, h6{
    font-family: 'Aqua Grotesque'!important;
    text-transform: uppercase;
  }
  
  ul{
      list-style-type: none;
      padding-left: 0 !important;
  }

#loader{
    height: 100vh;
    width: 100vw;
    background-color: #1d1d1b;
    position: fixed;
    z-index: 5;
}

  nav{
    position: fixed;
    width: 96vw;
    height: 10vh;
    background-color: #1d1d1b;
    color: #f3f3f3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2vw 0 2vw;
    z-index: 4;
  }

  nav img{
    height: 6vh;
  }

  a{
    text-decoration: none;
  }

nav div a{
    color: #f3f3f3;
    padding-right: 4vw;
    font-size: 3vh;
}

nav div a:hover{
    text-decoration: underline;
}

#menu{
    display: none;
}

#ResponsiveNav{
    position: fixed;
    z-index: 3;
    display: none;
}

#ResponsiveNav a{
    color: #f3f3f3;
    padding-right: 4vw;
    font-size: 3vh;
}

button {
    border: 2px solid #1d1d1b;
    background: transparent;
    transition: all 0.5s ease;
    width: 9vw;
    font-size: 1.5vw !important;
    color: #1d1d1b;
    padding: 0.5vh;
  }
  
  button:hover {
    background: #1d1d1b;
    color: #F3F3F3;
  }

footer{
    height: 30vh;
    width: 100vw;
    background-color: #1d1d1b;
    color: #f3f3f3;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

footer img{
    height: 10vh;
  }

  footer div{
    display: flex;
    flex-direction: column;
  }

footer div a{
    color: #f3f3f3;
    font-size: 2vh;
    text-decoration:underline;
}

h4{
    text-align: center;
    width: 100vw;
    font-size: 1.5vh;
}

/* Responsive */

@media (max-width: 912px){

    nav{
        width: 90vw;
        padding: 0 5vw 0 5vw;
      }

    nav div{
        display: none;
    }

    #menu{
        display: block;
    }

    #ResponsiveNav{
        height: 100vh;
        width: 100vw;
        background-color: #1d1d1b;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #ResponsiveNav a{
        margin: 3vh 0 3vh 0;
    }

    footer{
        padding-top: 2vh;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
    }

    footer img{
        height: 8vh;
      }

}