body {
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('media/page1/bg.png');
    background-size: cover;
    width: 100%;
    height: 100vh;
    margin: 0;
    position: relative;
}

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Change from absolute to relative */
    width: 1100px; /* Match the width of #page1 */
    height: auto;
    margin: auto;
}

#page1 {
    position: relative; /* Allows absolute children */
    display: block;
}

#drawing, #manga, #grocery, #NY, #people {
    position: absolute; 
    z-index: 2;
}

/* Position relative to page1 */
#drawing {
    top: 19%;
    left: 37%;
}

#manga {
    left: 35%;
    top: 59%;
}

#grocery {
    top: 44%;
    left: 42%;
}

#NY {
    right: 16%;
    top: 33%;
}

#people {
    right: 21%;
    bottom: 14%;
}