html {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background-color: rgb(19, 19, 19);
  text-align: center;
  user-select: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

::-webkit-scrollbar {
  display: none;
}
body {
  height: 98vh;
  flex-direction: column;
  display: flex;
  align-items: center;
  background-color: rgb(20, 20, 20);
  position: relative;
}
#logo {
  width: 10vw;
  margin-top: 1vh;
  max-width: 30%;
  filter: drop-shadow(0px 0px 5px rgb(255, 157, 0));
}

#inputtitre {
  background-color: rgb(27, 27, 27);
  position: absolute;
  top: 79%;
  outline: none;
  color: antiquewhite;
  border-radius: 0.5vw;
  border: solid 0.5px black;
  padding: 0.3vw;
  text-align: center;
  box-shadow: 0px 0px 5px rgb(70, 70, 70) inset;
}
#textarea {
  position: absolute;
  top: 83%;
  background-color: rgb(24, 24, 24);
  height: 13vh;
  width: 30%;
  color: antiquewhite;
  outline: none;
  resize: none;
  text-align: center;
  border-radius: 1vw;
  border: solid 0.5px black;
  padding: 0.8vw;
  box-shadow: 0px 0px 5px rgb(70, 70, 70) inset;
}

#blockapercu {
  user-select: text;
  padding: 2%;
  padding-left: 3%;
  padding-right: 3%;
  font-family: Arial, Helvetica, sans-serif;
  align-items: center;
  display: flex;
  flex-direction: column;
  background-color: rgb(36, 36, 36);
  max-width: 80%;
  width: 33%;
  height: 62%;
  top: 42.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  border-radius: 10px;
  white-space: pre-wrap;
  overflow-x: hidden;
  overflow-y: scroll;
  row-gap: 20px;
  box-shadow: 0px 0px 15px rgb(70, 70, 70) inset;
  overflow-wrap: break-word;
  border: solid black 1.5px;
}
#titreapercu {
  color: rgb(255, 213, 171);
  margin-top: 15px;
  font-size: 2.4vw;
  width: fit-content;
  height: fit-content;
  text-shadow: 0px 0px 1px black;
}
#textapercu {
  margin: 0;
  color: rgb(255, 178, 107);
  font-size: 2.2vh;
}
#bouttonpdf {
  top: 1.5%;
  position: absolute;
  background-color: black;
  border-radius: 0.5vw;
  font-size: 1vw;
  color: rgb(255, 177, 94);
  padding: 5px;
  cursor: pointer;
  transition: color 0.4s ease;
}
#bouttonpdf:hover {
  color: rgb(44, 255, 216);
}
#bouttondelete {
  top: 79%;
  left: 56%;
  position: absolute;
  background-color: black;
  border-radius: 0.5vw;
  font-size: 0.4vw;
  color: rgb(255, 177, 94);
  padding: 5px;
  cursor: pointer;
  transition: color 0.4s ease;
  filter: grayscale(100%);
}
#bouttondelete:hover {
  filter: hue-rotate(5deg);
}

/* TELEPHONE */
@media (min-width: 300px) and (max-width: 1025px) {
  #blockapercu {
    width: 70%;
    height: 60%;
    top: 40%;
    padding: 5vw;
    border-radius: 12px;
  }

  #titreapercu {
    font-size: 4.2vw;
    margin-top: 1vh;
  }

  #textapercu {
    font-size: 3vw;
    text-align: center;
  }

  #inputtitre {
    height: 3vh;
    top: 74.5%;
    width: 40%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2vh;
  }

  #textarea {
    padding: 1.2vh;
    top: 79%;
    width: 80%;
    height: 17vh;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.8vh;
  }
  #bouttonpdf {
    top: 0.4%;
    font-size: 2.7vw;
    padding: 1vh;
  }
  #bouttondelete {
    left: 73%;
    top: 74.7%;
    font-size: 1.5vw;
    border-radius: 1.5vw;
  }
}

/* PETIT TELEPHONE */
@media (max-width: 980px) {
  #titreapercu {
    font-size: 5.5vw;
    margin-top: 2vh;
  }

  #textapercu {
    font-size: 3.5vw;
    margin-top: 1.5vh;
  }

  #textarea {
    height: 16vh;
    border-radius: 2vw;
  }
  #inputtitre {
    top: 74%;
    width: 40%;
    height: 3.5%;
    border-radius: 2vw;
  }
  #bouttonpdf {
    font-size: 2vh;
    top: 1%;
    border-radius: 2vw;
  }
  #bouttondelete{
    border-radius: 1.5vw;
  }
}