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

a:hover {
  transition: .2s;
  cursor: pointer;
}

html {
  height: 100%;
  font-size: 62.5%;
  background: #000;
  scroll-behavior: smooth;
}

body {
  height: 100%;
  font-family: Arial, sans-serif;
  font-size: 1.4rem;
  color: #fff;
  background: linear-gradient(rgba(0 0 0 / 50%),rgba(0 0 0 / 50%)),url('../images/bg-code.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: grid;
  grid-template-rows: auto 1fr;
}

header {
  display: grid;
  justify-content: space-between;
  align-content: center;
  grid-template-columns: auto auto;
  padding: 3vh;
  background: #000;
  width: 100%;
  z-index: 2;
  text-align: center;
}

  .cldvd {
      width: 15rem;
  }

  .lang {
    width: 3rem;
    cursor: pointer;
}

main {
  display: grid;
  justify-items: start;
  align-content: center;
  padding: 0 4vw;
  grid-gap: 3vh;
  width: 65%;
}

  h1 {
    font-size: 3rem;
    text-transform: uppercase;
  }

  h2 {
    font-size: 1.6rem;
    font-weight: 400;
  }

  .qrcode {
    width: 100%;
    display: grid;
    justify-items: center;
    padding: 5vh 0;
  }

    .qrcode img {
      height: 15rem;
    }

  #devices {
    width: 10rem;
}

footer {
  display: flex;
  grid-gap: 2vw;
  padding: 4vh 4vw;
  background: #fff;
  position: relative;
}        

  footer a {
      text-decoration: none;
      color: #000;
      font-size: 1rem;
      padding: 2vh;
  }

      footer a:hover {
          border-bottom: solid 1px #ff6565;
      }

section {
    position: fixed;
    height: 100vh;
    z-index: 1;
    width: 100%;
    background: rgb(0 0 0 / 80%);
    display: none;
    justify-items: center;
    align-content: center;
    top: 0;
}

.footer {
    display: none;
    justify-items: center;
    grid-gap: 2vh;
    width: 70%;
    background: #000;
    padding: 2vh 4vw;
    position: relative;
}

    .close {
        width: 1rem;
        position: absolute;
        top: 2vh;
        right: 2vw;
        cursor: pointer;
    }

    .footer h1 {
        font-size: 3rem;
        width: 75%;
        align-self: center;
    }

    .footer p,
    .footer span,
    .footer li,
    .donneesPersosText {
        font-size: 1rem;
        text-align: justify;
    }

        #donneesPersosText1 {
            align-self: end;
        }

    .contactText {
        width: 75%;
        display: flex;
        justify-content: center;
        grid-gap: 4vw;
    }

        #contactText {
            width: auto;
        }

    .infosTexts {
        display: grid;
        justify-items: center;
        align-self: start;
        grid-gap: 2vh;
    }

        .infosText1 {
            width: 75%;
            display: flex;
        }

            .infosText1 p {
                width: auto;
            }

    .footer ul {
        width: 75%;
        display: grid;
        justify-items: center;
    }

    .footer a {
        color: rgb(53, 99, 235);
        font-size: 1rem;
    }