* {
  margin: 0;
  padding:0;
  box-sizing:border-box;
}

/* Set background and font styles */
body {
  background-color: #000000;
  color: #ffffff;
  font-family:'Arial', sans-serif;
  text-align:center;  
}

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 50px;
}

h1 {
  font-size: 28px;
  margin-bottom: 20px; 
}

img {
  width:100%;
  height:auto;  
  margin-bottom:30px;   
}

.explanation-box {
  background-color:#333333;

  padding-top:40px;/* Add spacing from top to align with image */

  border-radius:.5rem;

  animation-duration:.8s;;
  animation-iteration-count : infinite ;
  opacity:.9 ; /* reduce opacity of the pulse effect */

}


.progress-bar{
  width :80% ; /* Adjust width as needed */
  height :25 px ;
  background-color:#222222 ;
  position:relative ;
  margin:auto ;

}
#progress-fill{
  position:absolute ;
  top :0 ;
  left :0 ;
  bottom :0 ;

  /* Progress bar fill animation (change width dynamically) */
  width:% ; /* Change this dynamically using JavaScript or server-side scripting language based on your maintenance progress */
  background-color:#ff9900 ;


    animation-name:wipe-right-animation , fade-out-animation ; // Animation names separated by comma
    animation-duration:.4s , .3s ; // Duration for each animation

    // Timing functions for each animation
    animation-timing-function:cubic-bezier(.17,.67,.83,.67) , ease-in-out;

    animation-iteration-count:1 , 1 ; // Number of times each animation should run
}

@keyframes wipe-right-animation {
  0% {width:0px;}
  100% {width:%;} /* Change this dynamically using JavaScript or server-side scripting language based on your maintenance progress */
}

@keyframes fade-out-animation {
  0% {opacity:.9;}
  100% {opacity:0;}
}

#progress-percentage{
  position:absolute ;
  top:-20px;
  left :50%;
  transform :translateX(-50%) ;

  font-size: 14px;
  color: #ffffff;
  background-color: #222222;
  padding: 5px 10px;
  border-radius: 4px;

  /* Add animation to the percentage text */
  animation-name:pulse-animation; /* Reusing the pulse effect animation */
  animation-duration:.8s;;
  animation-timing-function:cubic-bezier(0.17, .67, .83, .67);
  animation-iteration-count : infinite ;
  opacity:.9 ; /* reduce opacity of the pulse effect */
}

@keyframes pulse-animation {
  0% {transform: scale(1);}
  50% {transform: scale(1.2);}
  100% {transform: scale(1);}
}

p {
  margin-bottom: 10px;
  line-height: 1.6em;
}

a {
  color:#ff9900;
  text-decoration:none;  
  font-weight:bold;  
}

a:hover {
  text-decoration:underline; 
}