body {
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("media/page4/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;
}

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

#chinatown,
#eastvillage,
#flushing,
#journalsquare,
#koreatown,
#bryantpark {
    position: absolute;
    z-index: 2;
}

/* Position relative to page1 */
#chinatown {
    top: 57%;
    left: 43%;
}

#eastvillage {
    top: 53%;
    left: 46%;
}

#flushing {
    top: 36%;
    left: 59%;
}

#journalsquare {
    top: 49%;
    left: 34%;
}

#koreatown {
    top: 46%;
    left: 45%;
}

#bryantpark {
    top: 40%;
    left: 47%;
}

#home {
    font-family: "Smooch Sans", serif;
    font-optical-sizing: auto;
    font-weight: 700; /*why is the weight not changing? 100-900*/ 
    font-style: normal;
    
    display: none;
    position: absolute;
    color: #0006ac;
    font-size: 20px;
    /*
    font-family: serif;
    font-weight: 600;
    */
    text-shadow: 2px 2px 5px #fffefe;
    text-align: center;
    line-height: 0.9;
    z-index: 3;
    left: 23%;
    top: 40.5%;
}

a:link {
    color: #0006ac;
}
a:visited {
    color: #0006ac;
}
a:hover, a:active { 
    background-color: rgb(202, 222, 255);
} 

#chinatown_text,
#eastvillage_text,
#flushing_text,
#journalsquare_text,
#koreatown_text,
#bryantpark_text {
    display: none;
    position: absolute;
    color: #0006ac;
    font-size: 7px;
    font-family: monospace, sans-serif;
    text-shadow: 2px 2px 5px #fffefe;
    text-align: left;
    z-index: 3;
}

#chinatown_text {
    transform: rotate(-16deg);
    width: 190px;
    top: 46%;
    left: 65%;
}

#eastvillage_text {
    transform: rotate(-16deg);
    width: 190px;
    top: 46%;
    left: 65%;
}

#flushing_text {
    transform: rotate(-16deg);
    width: 190px;
    top: 46%;
    left: 65%;
}

#journalsquare_text {
    transform: rotate(-16deg);
    width: 190px;
    top: 46%;
    left: 65%;
}

#koreatown_text {
    transform: rotate(-16deg);
    width: 190px;
    top: 46%;
    left: 65%;
}

#bryantpark_text {
    transform: rotate(-16deg);
    width: 190px;
    top: 46%;
    left: 65%;
}