/*refernces the body of HTML code*/
body {

    
    /*removes the empty space from the sides of the web page*/
    margin: 0;
    padding: 0;

    /*changes font*/
    font-family: Arial, sans-serif;

    /*turns body into flex container, which lays out item in rows OR columns*/
    display: flex;

    
    /*positions things on the flex direction*/
    justify-content: center;

    /*positions things on the perpendicular of the flex direction*/
    align-items: center;

    /*makes the body take up the full height of the browser window*/
    min-height: 100vh;
    
    background-color: #f5a1a1; /* pink */
}
#home-link {
    position: fixed;
    top: 0;
    left: 0;
}
#game-container {
    zoom: 60%;
    background-color: #ffffff; /* White background for the container */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    text-align: center; /* Center text inside the container */
    width: 1200px;
    height: 1100px;
    margin-top: 50px; /* Push it down from the top */
}

#game-container h1 {
    color: #333; /* Darker color for the heading */
    margin-bottom: 20px; /* Space below the heading */
}

#plinko-board {
    margin: auto;
    width: 800px; /* Take up the full width of its parent (#game-container) */
    height: 850px; /* Give it a fixed height */
    background-color: #ffffa1; /* A light yellow to distinguish it */
    border: 2px solid #ccc; /* A light border */
    border-radius: 5px;
    margin-bottom: 100px;
    right: 100px;
    margin-top: 20px; /* Space it out from the H1 above it */
    position: relative; /* Crucial for positioning child elements later (like pegs/ball) */
    overflow: hidden; /* Hide anything that goes outside this box */
}

#store {
   background-color: #ffffa1;
    border: 10px solid #000000; /* A light border */
    border-radius: 5px;
    width: 200px;
    position: relative;
    top: -955px;
    right: -950px;
    height: 840px; /* Give it a fixed height */

}

#store h2 {
    color: #ff3bcf; 
}

#store p{
    position: relative;
}

#score-display {
    margin-bottom: 15px; /* Space below the score */
    font-size: 1.5em; /* Larger font size */
    font-weight: bold; /* Make it bold */
    color: #f4c400; /* A nice yellow color (or choose your own) */
    text-align: center; /* Center the text */
}

.score-label {
    position: absolute; /* Ensures absolute positioning works */
    color: #ff3bcf;       /* Make the numbers visible, adjust as needed for your background */
    font-size: 0.9em;   /* Larger font size for readability */
    font-weight: bold;  /* Make the text bold */
    text-align: center; /* Center the text within the label div */
    width: 50px;        /* Give it a fixed width for consistent centering (adjust if numbers are wider) */
    /* height: 20px; */ /* Optional: if you want a fixed height as well */

    /* These are already set in JS, but good practice to include in CSS for consistency */
    transform: translate(-50%, -50%); /* Centers the div exactly on its assigned left/top coordinates */

    /* IMPORTANT: Prevents the labels from interfering with mouse clicks */
    pointer-events: none; 
    z-index: 10; /* Ensures the labels appear above the Matter.js canvas */
}