body {
  display: grid;
  text-align: left;
  font-family: "Inter", sans-serif;
  background-color: #020a33;
  color: #fff;
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  width: 100%;
}

@media only screen and (max-width: 740px) {
  #close-btn {
    position: fixed;
    display: flex;
    padding: 10px;
    width: 100%;
    height: 84px;
    align-items: center;
    justify-content: right;
    margin-bottom: 13px;
    text-decoration: none;
    opacity: 100;
    padding: 18px;
    background-color: #020a33;
    right: 4%;
  }

  h2 {
    margin: 84px 15px 50px 15px;
  }

  /*Main container START*/

  #main-container {
    width: 100%;
  }

  /*Renseignements START*/

  #renseignements {
    width: 92%;
    height: 560px;
    margin: 0px 15px;
  }

  .subtitle {
    font-weight: 600;
    margin-bottom: 30px;
    text-decoration: underline;
  }

  .label {
    min-width: 250px;
    height: 25px;
    margin-bottom: 2px;
  }

  .bubble {
    border: 1px solid white;
    padding: 10px 16px;
    width: 100%;
    border-radius: 8px;
    margin-bottom: 30px;
  }

  /*Renseignements END*/

  #numeroId {
    width: 92%;
    height: 560px;
    margin-bottom: 50px;
    margin: 30px 15px;
  }

  .enregistrement {
    width: 100%;
    height: 25px;
    margin: 0px 15px 50px 15px;
  }

  .text1 {
    width: 90%;
    white-space: pre-line;
    margin: 0px 15px 50px 15px;
  }

  .host {
    height: 200px;
    margin: 0px 15px;
    white-space: pre-line;
  }
  /*Main container END*/
}

/* Small devices (portrait tablets and large phones, 655px and up) */
@media (min-width: 740px) {
  #close-btn {
    position: fixed;
    display: flex;
    width: 100%;
    height: 84px;
    align-items: center;
    text-decoration: none;
    padding: 18px 0px;
    background-color: #020a33;
    justify-content: right;
  }

  a {
    margin-right: 6.5%;
  }

  h2 {
    margin: 84px 43px 50px 42px;
  }

  /*Main container START*/

  #main-container {
    width: 100%;
    margin: 0px 42px;
  }

  #sub-container {
    display: flex;
    width: 88%;
  }

  /*Renseignements START*/

  #renseignements {
    width: 47%;
    height: 560px;
    margin-bottom: 50px;
    margin-right: 50px;
  }

  .subtitle {
    font-weight: 600;
    margin-bottom: 30px;
    text-decoration: underline;
  }

  .label {
    width: 290px;
    height: 25px;
    margin-bottom: 2px;
  }

  .bubble {
    border: 1px solid white;
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 30px;
  }

  /*Renseignements END*/

  #numeroId {
    width: 47%;
    height: 560px;
  }

  #lastParagraphs {
    width: 87%;
  }

  .enregistrement {
    margin-bottom: 50px;
  }

  .text1 {
    width: 100%;
    white-space: pre-line;
    margin-bottom: 50px;
  }

  .host {
    white-space: pre-line;
    margin-bottom: 50px;
    }
  /*Main container END*/
}

/* Large devices (laptops/desktops, 1200px and up) */
@media (min-width: 1280px) {

  body {
    justify-content: center;
    max-height: 780px;
  }

  h2 {
    margin-left: 0px;
  }
  #close-btn {
    position: fixed;
    max-width: 1280px;
    margin-right: 179px;
    width: 100%;
    justify-self: center;
    justify-content: right;
    z-index: 1;
  }

  /*Main container START*/

  #main-container {
    position: relative;
    max-height: 720px;
    top: 0px;
    margin-right: 0px;
    margin-left: 0px;
  }

  #sub-container {
    width: 60%;
  }

  /*Renseignements START*/

  #renseignements {
    width: 48%;
    margin-right: 50px;
  }

  /*Renseignements END*/

  #numeroId {
    width: 48%;
    margin-left: 0px;
    margin-right: 50px;
  }

  #lastParagraphs {
    position: relative;
    bottom: 610px;
    left: 63%;
    width: 32%;
    margin-left: 50px;
    font-size: 16px;
    line-height: 25px;
  }

  /*Main container END*/
}