.guy {
    position: fixed;

    height: 50px;
    aspect-ratio: 1;
    image-rendering: pixelated;

    anchor-name: --guy;

    user-select: none;
    user-drag: none;
}

.face {
    position: fixed;
    position-anchor: --guy;

    top: anchor(top);
    left: anchor(left);
    right: anchor(right);

    width: calc(10 / 20 * 50px);
    margin-left: calc(4 / 20 * 50px);
    margin-top: calc(-1 / 20 * 50px);

    pointer-events: none;

    scale: 1;

    &.lower {
        margin-top: calc(1 / 20 * 50px);
    }

    &.pleased {
        scale: 1.4;
    }

    &.hidden {
        scale: 0;
    }
}

#guyToilet {
    image-rendering: pixelated;
    width: calc(8px * 2.5);

    position: fixed;
    position-anchor: --guyToiletlink;
    right: anchor(left);
    bottom: anchor(bottom);
    margin-right: 5px;

    a:has(&) {
        anchor-name: --guyToiletlink;
        margin-left: calc(8px * 2.5);
    }
}