body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
text-transform: uppercase;  
font-family: 'Product Sans Regular', Sans-Serif;
}

.progress-info {
  text-align: left;
  margin-top: 10px;
  width: 95%; /* Set the width to match the progress bar container */
  margin: 0 auto; /* Center the additional info within the container */
  font-size: 150%;
  color: #1a1818;
  margin-left: 0%;
}

.progress-container {
  width: 100%;
  background: #f2f2f2; /* Light gray background */
  height: 48px;
  border-radius: 0px;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  height: 48px;
  width: 95%;
  background-color: #000; /* Black bar */
  transition: width 0.5s ease-in-out;
  color: #333; /* Neutral dark gray for readability */

}

.extra-info {
  text-align: left;
  margin-top: 10px;
  width: 95%; /* Set the width to match the progress bar container */
  margin: 0 auto; /* Center the additional info within the container */
  padding-top: 10%;
  color: #333;
  margin-left: 0%;

}
/* Highlighted percentage */
.extra-info span {
  color: #ff9800; /* Bright orange for emphasis */
  font-weight: bold;
}

#screenshot-btn {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  color: #fff;
  background-color: #007bff; /* Default: Blue */
}

#screenshot-btn:hover {
  opacity: 0.9;
}


/* Active state (when button is pressed) */
#screenshot-btn:active {
    background-color: #3e8e41; /* Even darker green when clicked */
    transform: translateY(2px); /* Button moves down slightly */
}

/* Disabled button style */
#screenshot-btn:disabled {
    background-color: #e0e0e0; /* Light gray */
    color: #b0b0b0; /* Gray text */
    cursor: not-allowed; /* No hover effect */
    box-shadow: none;
}

/* For larger screens */
@media (min-width: 768px) {
    #screenshot-btn {
        font-size: 18px; /* Increase font size on larger screens */
    }
}

#capture-area {
  display: inline-block;
  padding: 20px;
  width: 95%;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff; /* Ensure a white background for clarity */
  text-align: center;
}