body{
  position: relative;
  height: 100vh;
  background: black;
}

.link{
  position: absolute;
  text-decoration: none;
  color: yellow;
  opacity: 80%;
}

.l1{top: 4%; left: 4%; transform: rotate(-10deg);}
.l2{top: 14%; left: 44%;transform: rotate(+5deg);}
.l3{top: 54%; left: 24%;transform: rotate(90deg);}
.l4{top: 23%; left: 7%;transform: rotate(-16deg);}
.l5{top: 45%; left: 8%;transform: rotate(-34deg);}
.l6{top: 9%; left: 19%;transform: rotate(73deg);}
.l7{top: 79%; left: 1%;transform: rotate(7deg);}
.l8{top: 99%; left: 76%;transform: rotate(1deg);}
.l9{top: 61%; left: 99%;transform: rotate(-10deg);}
.l10{top: 21%; left: 54%;transform: rotate(-34deg);}
.l11{top: 45%; left: 34%;transform: rotate(-1deg);}
.l12{top: 56%; left: 76%;transform: rotate(90deg);}
.l13{top: 83%; left: 67%;transform: rotate(87deg);}
.l14{top: 32%; left: 34%;transform: rotate(50deg);}
.l15{top: 12%; left: 2%;transform: rotate(71deg);}
.l16{top: 1%; left: 32%;transform: rotate(12deg);}
.l17{top: 88%; left: 56%;transform: rotate(24deg);}
.l18{top: 25%; left: 78%;transform: rotate(45deg);}
.l19{top: 87%; left: 90%;transform: rotate(-45deg);}
.l20{top: 90%; left: 2%;transform: rotate(-10deg);}
.l21{top: 50%; left: 50%;transform: rotate(-10deg);}

.l1:focus{color: red;}
.l2:focus{color: purple;}
.l3:focus{color: green;}
.l4:focus{color: greenyellow;}
.l5:focus{color: orange;}
.l6:focus{color: pink;}
.l7:focus{color: yellow;}
.l8:focus{color: rebeccapurple;}
.l9:focus{color: blue}
.l10:focus{color: red;}
.l11:focus{color: red;}
.l12:focus{color: purple;}
.l13:focus{color: green;}
.l14:focus{color: greenyellow;}
.l15:focus{color: orange;}
.l16:focus{color: pink;}
.l17:focus{color: yellow;}
.l18:focus{color: rebeccapurple;}
.l19:focus{color: blue;}
.l20:focus{color: teal;}