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

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

.ftr {
    top: 90.9091%;
    height: 30%;
    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;
    }
}