@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
body {
    font-family: 'Press Start 2P', cursive, sans-serif;
    text-align: center;
    background-image:'bg.jpg';
    background-size: cover;
  }

  .game-container {
    margin: 50px auto;
    max-width: 1100px;
    padding: 20px;
  
  }

  body {
    font-family: 'Press Start 2P', cursive, sans-serif;
    text-align: center;
    
    background-image: 'bg.jpg';
    background-size: cover; /* Gradient from dark blue to light blue */
  }




#scoreboard-container {
    background-color: rgb(105, 84, 10); 
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 20px;
}

#scoreboard {
    display: flex;
    justify-content: space-around;
}

.bubble {
    background-color: #e8f1a0;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    width: 50px;
    height: 50px;
}

#target-container {
    margin: 20px 0;
    font-size: 20px;
}


  #scoreboard {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
  }
  .box {
    display: inline-block;
    padding: 5px 10px; 
    border: 1px solid #000000;
    border-radius: 5px;
    color: rgb(255, 255, 255); 
    margin-right: 5px; 
    background-color: 	#f5f550
  }

  .value-box {
    display: inline-block;
    padding: 5px 10px; 
    border: 1px solid #000000;
    border-radius: 5px;
    color: rgb(255, 255, 255); 
    margin-right: 5px; 
    background-color: rgb(214, 75, 75); 


  }




  #bubble-container {
    display: grid;
    grid-template-columns: repeat(19, 1fr); 
    grid-template-rows: repeat(8, 1fr); 
    gap: 5px;
    width: 1060px; 
    height: 455px;
    background-color: #A7FFEB;
    border: 1px solid #01796b;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
  }


  .bubble {
    background-color: #5DEBD7;
    color: #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    width: 50px; 
    height: 50px; 
  }

  #target-container {
    margin: 20px 0;
    font-size: 20px;
  }