#bird {
    position: absolute;

    /* ⭐ Responsive sizing */
    width: clamp(22px, 3vw, 38px);
    height: auto;
    aspect-ratio: 38 / 26;

    top: 40%;
    left: 20%;
}

.bird-body {
    position: relative;
    border: 0.5px solid black;
    width: 100%;
    height: 100%;
    background: #FFD93D;
    border-radius: 60% 60% 55% 55%;
    box-shadow:
        inset -4px 2px 6px rgba(0, 0, 0, 0.25),
        0 2px 3px rgba(0, 0, 0, 0.2);
}

.eye {
    position: absolute;

    width: clamp(3px, 0.5vw, 5px);
    height: clamp(3px, 0.5vw, 5px);

    background: white;
    border-radius: 50%;
    top: 38%;
    left: 74%;
}

.eye::after {
    content: "";
    position: absolute;

    width: 80%;
    height: 80%;

    background: black;
    border-radius: 50%;
    top: 20%;
    left: 20%;
}

.beak {
    position: absolute;

    width: clamp(7px, 1vw, 12px);
    height: clamp(3px, 0.6vw, 6px);

    background: #F39C12;
    top: 62%;
    left: 105%;
    border-radius: 2px;
    box-shadow: inset -2px 1px 2px rgba(0, 0, 0, 0.25);
}

.wing {
    position: absolute;

    width: clamp(10px, 1.5vw, 18px);
    height: clamp(6px, 1vw, 12px);

    background: #F4C430;
    top: 70%;
    left: 26%;
    border-radius: 50%;
    box-shadow: inset -2px 2px 3px rgba(0, 0, 0, 0.2);
}