body {
        margin: 0;
        background: #1e0f2b; /* Any background color or image */
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        overflow: hidden;
    }

    /* The fixed aspect-ratio container */
    #frame {
        position: relative;
        width: 90vw;                     /* scalable */
        max-width: 3840px;               /* never exceeds original size */
        aspect-ratio: 3840 / 2160;       /* preserves the exact ratio */
        background: url('images/layout.png') no-repeat center center;
        background-size: contain;        /* critical */
    }

    .link {
        position: absolute;
        cursor: pointer;
        /* color: rgba(0,255,0,0.3); */ /* toggle this for debugging */
    }

#avatar {
    position: absolute;
    left: 46.74%;
    top: 34.90%;
    width: 41.41%;
    height: 65.09%;
    background: url('images/avatar1.png') no-repeat     center/contain;
    cursor: pointer;
}

/* Hover replaces avatar with the 2nd image */
#avatar:hover {
    background: url('images/avatar2-hover.png') no-repeat     center/contain;
    left: 46.74%;
    top: 28.15%;
    width: 42.40%;
    height: 71.85%;
}