* {
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    margin: 0;
    padding: 0;
    background-color: #222;
    overflow: hidden;
}

#world {
    --half-hole-size: 3px;
    --glass-color: #bbb;
}

.object {
    position: absolute;
    transform: translate(-50%, -50%);
}

.sand {
    width: 4px;
    aspect-ratio: 1;
    border-radius: 50%;
}

#hourglass1 {
    height: 55vh;
    top: calc(50% - 35vh);
    left: 50%;
    width: 4vh;
    background-color: #422C1F;
    border-radius: 1vh;
}

#hourglass2 {
    height: 55vh;
    top: calc(50% + 35vh);
    left: 50%;
    width: 4vh;
    background-color: #422C1F;
    border-radius: 1vh;
}

#hourglass3 {
    height: 12vh;
    top: calc(50% - 27vh);
    left: calc(50% - 21.65vh - var(--half-hole-size));
    width: 3vh;
    background-color: var(--glass-color);
    border-radius: 0 0 0 8px;
}

#hourglass4 {
    height: 12vh;
    top: calc(50% - 27vh);
    left: calc(50% + 21.65vh + var(--half-hole-size));
    width: 3vh;
    background-color: var(--glass-color);
    border-radius: 0 0 8px 0;
}

#hourglass5 {
    height: 12vh;
    top: calc(50% + 27vh);
    left: calc(50% - 21.65vh - var(--half-hole-size));
    width: 3vh;
    background-color: var(--glass-color);
    border-radius: 8px 0 0 0;
}

#hourglass6 {
    height: 12vh;
    top: calc(50% + 27vh);
    left: calc(50% + 21.65vh + var(--half-hole-size));
    width: 3vh;
    background-color: var(--glass-color);
    border-radius: 0 8px 0 0;
}

#hourglass7 {
    height: 30vh;
    top: calc(50% - 12vh);
    left: calc(50% - 11.65vh - var(--half-hole-size));
    width: 3vh;
    background-color: var(--glass-color);
    border-radius: 8px 0 0 0;
}

#hourglass8 {
    height: 30vh;
    top: calc(50% - 12vh);
    left: calc(50% + 11.65vh + var(--half-hole-size));
    width: 3vh;
    background-color: var(--glass-color);
    border-radius: 0 8px 0 0;
}

#hourglass9 {
    height: 30vh;
    top: calc(50% + 12vh);
    left: calc(50% - 11.65vh - var(--half-hole-size));
    width: 3vh;
    background-color: var(--glass-color);
    border-radius: 0 0 0 8px;
}

#hourglass10 {
    height: 30vh;
    top: calc(50% + 12vh);
    left: calc(50% + 11.65vh + var(--half-hole-size));
    width: 3vh;
    background-color: var(--glass-color);
    border-radius: 0 0 8px 0;
}

#hourglass11 {
    height: 4.6vh;
    top: calc(50%);
    left: calc(50% - 1.5vh - var(--half-hole-size));
    width: 3vh;
    background-color: var(--glass-color);
}

#hourglass12 {
    height: 4.6vh;
    top: calc(50%);
    left: calc(50% + 1.5vh + var(--half-hole-size));
    width: 3vh;
    background-color: var(--glass-color);
}