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

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

#meat, #tomato, #wheat, #popcorn, #fish {
    position: absolute; 
    z-index: 2;
}

/* Position relative to page1 */
#meat {
    top: 20%;
    left: 18%;
}

#tomato {
    left: 38%;
    top: 26%;
}

#wheat {
    top: 7%;
    left: 52%;
}

#popcorn {
    right: 11%;
    top: 25%;
}

#fish {
    right: 41%;
    bottom: -3%;
}

#fish_text, #meat_text, #popcorn_text, #tomato_text, #wheat_text {
    display: none; /* Initially hidden */
    position: absolute;
    color: white;
    font-size: 12px;
    font-family: monospace, sans-serif;
    text-shadow: 2px 2px 5px black;
    text-align: center;
    z-index:3;
}

#fish_text { 
    width: 140px;
    right: 48%; 
    bottom: 14%; 
}

#meat_text { 
    width: 160px;
    top: 42%; 
    left: 23%; 
}

#tomato_text { 
    width: 100px;
    left: 42%; 
    top: 52%; 
}

#wheat_text { 
    width: 100px;
    top: 27%; 
    left: 59.5%; 
}

#popcorn_text { 
    width: 100px;
    right: 19.6%; 
    top: 47%; 
}

a:link {
    color: white;
}
a:visited {
    color: white;
}
a:hover, a:active { 
    background-color: rgb(90, 153, 255);
}