*,
*::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: 18.1818%;
    background: hsla(0, 41%, 84%, 0.35);
}

.h1 {
    top: 18.1818%;
    height: 6.0606%;
    background: hsla(0, 40%, 80%, 0.35);
}

.h2 {
    top: 24.2424%;
    height: 6.0606%;
    background: hsla(0, 40%, 76%, 0.35);
}

.h3 {
    top: 30.3030%;
    height: 6.0606%;
    background: hsla(0, 40%, 72%, 0.35);
}

.h4 {
    top: 36.3636%;
    height: 6.0606%;
    background: hsla(0, 40%, 68%, 0.35);
}

.h5 {
    top: 42.4242%;
    height: 6.0606%;
    background: hsla(0, 40%, 64%, 0.35);
}

.h6 {
    top: 48.4848%;
    height: 6.0606%;
    background: hsla(0, 40%, 60%, 0.35);
}

.h7 {
    top: 54.5455%;
    height: 6.0606%;
    background: hsla(0, 40%, 56%, 0.35);
}

.h8 {
    top: 60.6061%;
    height: 6.0606%;
    background: hsla(0, 40%, 52%, 0.35);
}

.h9 {
    top: 66.6667%;
    height: 6.0606%;
    background: hsla(0, 40%, 48%, 0.35);
}

.h10 {
    top: 72.7273%;
    height: 6.0606%;
    background: hsla(0, 40%, 44%, 0.35);
}

.h11 {
    top: 78.7879%;
    height: 6.0606%;
    background: hsla(0, 40%, 40%, 0.35);
}

.h12 {
    top: 84.8485%;
    height: 6.0606%;
    background: hsla(0, 40%, 36%, 0.35);
}

.ftr {
    top: 90.9091%;
    height: 9.0909%;
    background: hsla(0, 40%, 32%, 0.35);
}

@media (hover:hover) {

    .zone:hover,
    .zone:focus {
        background: hsla(0, 40%, 20%, 0.45);
        outline: 2px dashed #fff;
        outline-offset: -3px;
    }
}