.fd{
   width:100px;border-top:2px solid #0f0;
   height:200px;
   display:flex;
   flex-flow:column nowrap;
}
.hb{
   width:50px;
   border-top:1px solid #0f0;
   margin-top:20px;
   margin-bottom:20px;
   line-height:0;
}
.hbl::before{
   content:attr(text);
   padding-right:55px;
   transform:translateX(-100%);
   position:absolute;
}
.hbr::before{
   content:attr(text);
   padding-left:55px;
   position:absolute;
}
.hbl::after{
   position:absolute;
   width:30px;
   transform:translate(-100%,100%);
   padding-top:20px;
   border-top:solid #0f0 1px;
   content:"";
}
.hbr::after{
   position:absolute;
   width:30px;
   transform:translate(0,100%);
   padding-top:20px;
   border-top:solid #0f0 1px;
   content:"";
}
.d{
   background-color:black;
   color:white;
   border:1px solid white;
   width:50px;
   padding:2px;
   font-size:16px;
}
.inl{
   width: 0;
   height: 0;
   border-top: 12px solid transparent;
   border-bottom: 12px solid transparent;
   border-right:12px solid white;
}
.inls{
   position:absolute;
   width: 0;
   height: 0;
   margin-top:2px;
   margin-left:2px;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-right:10px solid black;
}
.inrs{
   margin-left:-12px;
   margin-top:2px;
   width: 0;
   height: 0;
   top:0;
   left:0;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-left:10px solid black;
}
.inr{
   width: 0;
   height: 0;
   box-sizing:border-box;
   border-top: 12px solid transparent;
   border-bottom: 12px solid transparent;
   border-left:12px solid white;
}
#crosshair{
   position:absolute;
   top:50vh;
   left:50vw;
   transform:translate(-50%,-50%);
   width: 30px;
   height:30px;
   mix-blend-mode: difference;
   z-index:99;
   /* clip-path:polygon(0% 40%,0% 60%,40% 60%,40% 40%,0% 40%,40% 0%,40% 40%, 60% 40%, 60% 0%, 40% 0%,40% 40%,60% 40%,60% 60%,100% 60%, 100% 40%,60% 40%,40% 0%); */
}