@font-face {
  font-family: "Format_1452";
 src: url("Format_1452.woff2");
}

html{
    font-family: "Format_1452";
}

div{
  position: absolute;
  width: auto;
  height: auto;
  cursor: grabbing;
}

a {
  color: blue;
  text-decoration: overline underline 50px;
  text-shadow: red 5px 5px;
  animation: blink 0.1s linear infinite;
}

a:hover{
  color: yellow;
  text-shadow: blue -5px -5px;
}

@keyframes blink {
50% {
  opacity: 0;
}
}

#rech {
  position: absolute;
  display: none;
  font-size: 300px;
  top: 25%;
  text-align: center;
}

#legende {
  display: block;
  position: sticky absolute;
  width: 100px;
  height: auto;
  background: white;
  top: 20px;
  left: 20px;
  margin: 20px;
  padding:10px;
  text-align: justify left;
  /*border: ridge 5px aquamarine;
    border-collapse: 52px;*/
}

div:hover{
  background-color: yellow;
  filter: drop-shadow(20px 20px 200px white);
  box-shadow: 2px 2px 2000px 150px yellow;
}

<!--position absolute → sort l'élément du flux DONC les autres élémens en dessous vont remonter DONC nécessité de mettre du right/top etc.-->

#b1{
left: 300px;
}

#b2{
  right: 60px;
  top: 120px;
  display: none;
}

#b3{
  bottom: 100px;
  left: 455px;
  display: none;
}