/* Body */
body {
    margin: 0;
    padding: 0;
    background-color: #1a1a2e; /* Dark background */
    color: white;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

/* Header */
header {
    width: 100%;
    display: flex;
    justify-content: space-between; /* Align title to the left and button to the right */
    align-items: center;
    background-color: #1a1a2e; /* Dark header background */
    color: white;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 20px; /* Padding inside the header */
    padding-left: 100px; /* Additional left padding */
    border-bottom: 4px solid #ff9f1c; /* Thick orange border below the header */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
}
  
  /* Header Title */
  header #gameTitle {
    font-size: 20px;
    font-weight: bold;
    margin: 0; /* Remove default margins */
  }
  

  
/* How to Play Button */
#infoButton {
    background-color: #ff9f1c;
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    left: -60px; /* Move the button to the left by 100px */
}

#infoButton:hover {
    background-color: #ff6f1c; /* Slightly darker on hover */
}
  
/* Game container */
#gameContainer {
    border: 3px solid #ff9f1c; /* Orange border */
    background-color: #000; /* Black background for the canvas */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Subtle shadow */
    margin: 40px auto; /* Lowered by 10px */
    max-width: 90%; /* Ensure container doesn't exceed the screen width */
    max-height: 90%; /* Ensure container doesn't exceed the screen height */
    aspect-ratio: 1; /* Maintain square aspect ratio */
    position: relative; /* For positioning internal elements */
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box; /* Include border in element's total width and height */
}
  
    /* Score and Timer */
    #scoreElement,
    #timerElement {
    position: absolute;
    top: 120px;
    left: 20px;
    font-size: 16px;
    color: white;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
    padding: 5px 10px;
    border-radius: 8px;
    z-index: 1; /* Ensure it’s above the game container */
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Add subtle shadow */
    }

    /* Timer specifically */
    #timerElement {
    top: 150px; /* Positioned slightly below the score */
    }
  
  /* Game Over container */
  #gameOverContainer {
    display: none; /* Hidden by default */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    font-size: 24px;
    font-family: Arial, sans-serif;
    background-color: rgba(0, 0, 0, 0.8); /* Slightly transparent black */
    padding: 20px;
    border-radius: 10px;
    z-index: 10; /* Ensure it's above the canvas */
    line-height: 1.6; /* Improve line spacing */
  }
  
  /* Restart button */
  #restartButton {
    background-color: #ff9f1c;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 20px; /* Add spacing below the text */
  }
  
  #restartButton:hover {
    background-color: #ff6f1c; /* Darker orange on hover */
  }
  
  /* Info section */
  #infoSection {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #0f3460; /* Navy background */
    color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    z-index: 10; /* Ensure it's above other elements */
    width: 80%;
    max-width: 500px;
    text-align: center;
  }
  
  #infoSection h2 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #ff9f1c; /* Accent color for the title */
  }
  
  #infoSection ul {
    text-align: left;
    line-height: 1.8;
    padding: 0 10px;
  }
  
  #infoSection button {
    margin-top: 15px;
    background-color: #ff9f1c;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
  }
  
  #infoSection button:hover {
    background-color: #ff6f1c;
  }