index.css

body {
  background-color: #fff;
}

h1 {
  text-align: center;
  color: black;
  text-shadow: 0 3px 3px #7ad;
}


#speak-btn {
  width: 80%; /* Adjust width as necessary */
  display: block; /* Make it a block-level element */
  margin: 20px auto; /* Top & Bottom margins and automatic horizontal margins for centering */
  padding: 10px 0; /* Vertical padding, adjust as needed */
  font-size: 4vw; /* Relative to the viewport width */
  text-align: center; /* Center the text inside the button */
  background-color: white; /* Background color */
  color: black; /* Text color */
  border: 2px solid black; /* Solid border for clarity */
  border-radius: 5px; /* Rounded corners for aesthetics */
  cursor: pointer; /* Cursor indicates clickable */
}


.btnAnswer {
    width: 15%; /* Set the width to 15% of the viewport width */
    margin: 10px; /* Vertical margins with automatic horizontal margins for centering */
    font-size: 6vw; /* Set the font size relative to the width of the viewport */
    text-align: center; /* Center the text inside the button */

    /* Additional Styling */
    background-color: white; /* Set background to black */
    color: black; /* Set text color to white */
    border: 2px solid black; /* White border for clear visual boundaries */
    padding: 10px 0; /* Add some padding for aesthetics */
    border-radius: 5px; /* Rounded corners for a softer look */
    cursor: pointer; /* Change cursor to indicate clickable area */
}

#button-container {
    text-align: center; /* Ensure the container itself is centered */
}


#level-selection,
#game-container {
    text-align: center;
    color: black;
}

.level-btn {
    width: 60%; /* 60% of the container's width */
    margin: 10px auto; /* Centering the button with auto margins */
    padding: 15px; /* Adjust padding to your preference */
    font-size: 6vw; /* Adjust based on your preference, relative to viewport width */
    display: block; /* Each button on a new line */
    text-align: center; /* Center text */
    /* Additional styling */
    background-color: white; /* Example background color */
    color: black; /* Text color */
    border: 2px solid black; /* White border for clear visual boundaries */
    border-radius: 5px; /* Rounded corners for a softer look */
    cursor: pointer; /* Cursor indicates clickable */

}

#level-buttons {
    text-align: center; /* Center the buttons container */
}

#progress-bar-container {
  width: 90%;
  height: 10px; /* Adjust height as needed */
  background-color: white;
  border: 2px solid black;
  margin: 20px auto;
  position: relative;
  overflow: visible; /* Allow the icon to extend beyond the bar */
}

#progress-bar {
  height: 100%;
  background-color: grey;
  width: 0%; /* Initial state with no progress */
  position: absolute;
}

#progress-icon {
  position: absolute;
  left: 0; /* Initially at the left */
  top: 50%; /* Center vertically */
  /* Make the icon slightly larger than the progress bar */
  height: 50px; /* Adjust size as needed */
  width: auto; /* Maintain aspect ratio */
  transform: translate(-50%, -50%); /* Adjust for centering */
  z-index: 10; /* Ensure it's above the progress bar */
}