*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;display:flex;align-items:center;justify-content:center;background:#111;font-family:system-ui,sans-serif;}
.hwrap{position:relative;width:90vmin;max-width:800px;}
.bg{width:100%;height:auto;display:block;pointer-events:none;}
.zone{position:absolute;left:0;width:100%;display:block;text-decoration:none;cursor:pointer;}
.hdr{top:0;height:15.9091%;background:hsla(270,50%,82%,0.45);}
.h1{top:15.9091%;height:6.2500%;background:hsla(270,50%,78%,0.45);}
.h2{top:22.1591%;height:6.2500%;background:hsla(270,50%,74%,0.45);}
.h3{top:28.4091%;height:6.2500%;background:hsla(270,50%,70%,0.45);}
.h4{top:34.6591%;height:6.2500%;background:hsla(270,50%,66%,0.45);}
.h5{top:40.9091%;height:6.2500%;background:hsla(270,50%,62%,0.45);}
.h6{top:47.1591%;height:6.2500%;background:hsla(270,50%,58%,0.45);}
.h7{top:53.4091%;height:6.2500%;background:hsla(270,50%,54%,0.45);}
.h8{top:59.6591%;height:6.2500%;background:hsla(270,50%,50%,0.45);}
.h9{top:65.9091%;height:6.2500%;background:hsla(270,50%,46%,0.45);}
.h10{top:72.1591%;height:6.2500%;background:hsla(270,50%,42%,0.45);}
.h11{top:78.4091%;height:6.2500%;background:hsla(270,50%,38%,0.45);}
.h12{top:84.6591%;height:6.2500%;background:hsla(270,50%,34%,0.45);}
.ftr{top:90.9091%;height:9.0909%;background:hsla(270,50%,30%,0.45);}
@media (hover:hover){.zone:hover,.zone:focus{background:hsla(270,50%,20%,0.60);outline:2px dashed #fff;outline-offset:-3px;}}