body {
    margin: 0;
    padding: 0;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#wantedimage {
    position: absolute;

    left: 172px;
    top: 102px;
    width: 170px;
    height: 137px;
}

#gameboard {
    background-image: url('../Images/bg.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: relative; /* This is the key. Children are positioned relative to this div. */
    width: 512px;
    height: 768px;
}

#timertext {
    position: absolute; /* Position the text directly on the game board */
    top: -10px; /* Example value to place it at the top */
    left: 50%; /* Center it horizontally */
    transform: translateX(-50%); /* Adjust to truly center */
    color: black;
    font-size: 40px;
    font-family: "Polygon";
}

#scoretext 
{
    position: absolute; /* Position the text directly on the game board */
    top: 300px; /* Example value to place it at the top */
    left: 50%; /* Center it horizontally */
    transform: translateX(-50%); /* Adjust to truly center */
    color: black;
    font-size: 40px;
    font-family: "Polygon";
}

#greyarea {
    position: absolute; /* This positions the div relative to the #gameboard */
    /* These values are manually measured from the image. */
    /* The screenshot shows the top-left corner of the poster is NOT at the top-left of the image. */
    /* These are EXAMPLE values. */
    top: 385px;
    width: 512px;
    height: 370px;
    background-color: transparent; 
}

@font-face {
  font-family: "Polygon";
  src: url("../Fonts/PolygonParty.ttf") format("truetype");
}