@font-face {
    font-family: Poppins_Black;
    src: url('../../nav/fonts/Poppins/Poppins-Black.woff') format('woff'), url('../../nav/fonts/Poppins/Poppins-Black.woff') format('embedded-opentype');
  }

  * {
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  @supports (-webkit-touch-callout: none) {
    img {
      -webkit-touch-callout: none
    }
  }

  .loader p {
    color: white;
  }

  .appBar {
    z-index: 1;
    background: none;
  }

  #btnRules,
  #btnSettings,
  #btnNew {
    display: block
  }

  #btnNew {
    opacity: 0.2;
  }

  body {
    margin: 0;
  }

  /***** contenu *********/


  canvas {
    position: absolute;
    top: 0;
    left: 0;
  }

  .appBar {
    z-index: 1;
    background: transparent;
    pointer-events: none;
  }

  #infos {
    position: absolute;
    top: 0;
    width: 80vw;
  }

  #mode {
    cursor: pointer;
    font-size: 1.2em;
    font-family: NumerHIC;
    padding-right: 1%;
    padding-left: 1%;
    width: 100%;
    text-align: right;
    position: absolute;
    right: 5vw;
    color: white;
  }

  #mode img {
    transition: transform 0.5s ease;
    width: clamp(30px, 5vw, 50px);
    vertical-align: middle;
  }

  #mode img:hover {
    transform: scale(1.5);
    transform-origin: center;
  }

  #imgPerdu {
    position: absolute;
    bottom: -2px;
    z-index: 10;
    display: none;
  }

  #imgWin {
    position: absolute;
    bottom: 40px;
    right: 0;
    display: block;
    width: 50vw;
    max-width: 800px;
    transition: all 1s;
    transition-behavior: allow-discrete;
  }

  #imgWin.closed {
    display: none;
    opacity: 0;
  }

  @media (orientation: landscape) {
    #imgPerdu {
      height: clamp(200px, 80vh, 615px);
      width: auto
    }
  }

  @media (orientation: portrait) {
    #imgPerdu {
      width: clamp(200px, 80vw, 615px);
      height: auto;
    }
  }

  /**********settings*********/
  #settings #niveauJeu {
    margin-bottom: 10px;
    margin-top: 50px
  }

  #settings figure {
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    padding: 5px;
    border: solid transparent 10px;
    display: flex;
    align-items: center;
  }

  #settings #niveauJeu figure>img {
    max-width: 5vw;
    padding-right: 1vw;
  }

  #settings #niveauJeu figcaption {
    font-size: clamp(0.5rem, 50px, 1rem);
  }

  #settings #niveauJeu figcaption img {
    width: min(300px, 15vw);
    vertical-align: middle;
  }

  #settings figure:hover {
    background: rgba(255, 255, 255, 0.5);
  }

  #settings input[type="radio"]:checked+label figure {
    border: solid red 10px;
    border-radius: 5px;
    box-sizing: border-box;
    color: white;
    background: rgba(255, 255, 255, 0.5);
  }

  #settings input[type="radio"]:checked+label figure img {
    border: none;
  }

  #settings input {
    display: none;
    cursor: pointer;
  }

  /****rules****/
  #rules {
    padding-bottom: 30px;
    font-size: clamp(0.5rem, 30px, 1rem);
  }

  #rules h4 {
    padding-bottom: 20px;
  }

  #rules p {
    padding-bottom: 10px;
  }

  #rules p span {
    font-family: icons;
    font-size: large;
  }