body{
  position: relative;
  height: 300vh;
  background-color: beige;
}

a{
  position: absolute;
}

.square{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:20em;
  height:20em;
  background:gray;
  transition:0.4s;
  z-index: 2;
  opacity: 80%;
}

#color1, #color2, #color3, #color4, #color5, #color6, #color7, #color8, #color9, #color10, #color11, #color12, #color13, #color14, #color15, #color16, #color17, #color18, #color19, #color20, #color21, #color22, #color23, #color24, #color25, #color26, #color27{
  position:absolute;
  width:0;
  height:0;
}

/*If that color is targeted, selects the square that is after it */
#color1:target ~ .square{
  background:#ff0000;
}

#color2:target ~ .square{
  background:#ff94f4;
}

#color3:target ~ .square{
  background:#a8209a;
}

#color4:target ~ .square{
  background:#2e0029;
}

#color5:target ~ .square{
  background:#473445;
}

#color6:target ~ .square{
  background:#7d0bf1;
}

#color7:target ~ .square{
  background:#0e62ee;
}

#color8:target ~ .square{
  background:#3f516f;
}

#color9:target ~ .square{
  background:#00fff0;
}

#color10:target ~ .square{
  background:#00544f;
}

#color11:target ~ .square{
  background:#ffa200;
}

#color12:target ~ .square{
  background:#544f00;
}

#color13:target ~ .square{
  background:#250054;
}

#color14:target ~ .square{
  background:#8aeccb;
}

#color15:target ~ .square{
  background:#8bc2e4;
}

#color16:target ~ .square{
  background:#1a4dd0;
}

#color17:target ~ .square{
  background:#5a1ad0;
}

#color18:target ~ .square{
  background:#29154e;
}

#color19:target ~ .square{
  background:#be0ade;
}

#color20:target ~ .square{
  background:#f50e8b;
}

#color21:target ~ .square{
  background:#381a2a;
  z-index: -1;
}

#color22:target ~ .square{
  background:#7c142a;
}

#color23:target ~ .square{
  background:#00ff2a;
}

#color24:target ~ .square{
  background:#18ff00;
}

#color25:target ~ .square{
  background:#ffd200;
}

#color26:target ~ .square{
  background:#7e6b11;
}

.l1{top: 2%; left: 21%;}
.l2{top: 8%; left: 1%;}
.l3{top: 56%; left: 34%;}
.l4{top: 89%; left: 67%;}
.l5{top: 12%; left: 78%;}
.l6{top: 43%; left: 90%;}
.l7{top: 25%; left: 99%;}
.l8{top: 92%; left: 76%;}
.l9{top: 76%; left: 56%;}
.l10{top: 67%; left: 41%;}
.l11{top: 23%; left: 4%;}
.l12{top: 32%; left: 23%;}
.l13{top: 27%; left: 12%;}
.l14{top: 29%; left: 17%;}
.l15{top: 37%; left: 32%;}
.l16{top: 9%; left: 11%;}
.l17{top: 79%; left: 23%;}
.l18{top: 68%; left: 67%;}
.l19{top: 78%; left: 88%;}
.l20{top: 90%; left: 80%;}
.l21{top: 77%; left: 4;}
.l22{top: 65%; left: 55%;}
.l23{top: 54%; left: 50%;}
.l24{top: 45%; left: 2%;}
.l25{top: 3%; left: 21%;}
.l26{top: 23%; left: 9%;}

.magic-link{
  position:fixed;
  top:48%;
  left:48%;
}