page2.css

@import url('https://fonts.googleapis.com/css2?family=Bubblegum+Sans&display=swap');

html, body {
  font-family: "Bubblegum Sans", sans-serif;
  font-weight: 400;
  font-size: 40px;
  font-style: normal;
  color: white;
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f0f0; /* Just to help see the full page is centered */
  background-image: url('images/backgroundimg2.png'); /* Replace 'background.jpg' with the path to your background image */
  background-size: cover; /* Cover the entire viewport */
  background-repeat: no-repeat; /* Do not repeat the background image */
  background-position: center; /* Center the background image */
}

h1 {
  padding: 30px;
  color: white;
  text-align: center;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  animation:
  typing 1s steps(26),
  cursor .4s step-end infinite alternate;
}

@keyframes cursor {
  50% { border-color : transparent }
}

@keyframes typing  {
  from { width : 0}
}

.button-container {
  display: flex;
  justify-content: center;
  gap: 80px; /* Adjust the space between buttons */
  padding: 80px;
}

button {
  
  width: 200px; /* Adjusted width */
  height: 200px; /* Adjusted height */
  padding: 30px; /* Adjusted padding */
  border-radius: 50%; /* This makes the button circular */
  border: 2px solid #007BFF; /* Border color */
  color: #007BFF; /* Text color */
  background-color: #fff; /* Button background color */
  font-size: 30px; /* Adjust as needed */
  cursor: pointer; /* Changes the cursor to a pointer on hover */
  font-family: "Bubblegum Sans", sans-serif; /* Added font-family */
  white-space: nowrap; /* Prevents text from wrapping */

}

button:hover {
  background-color: #007BFF; /* Color when hovered */
  color: #fff; /* Text color when hovered */
}

.animated-button1 {
  
  opacity: 0; /* Initially hidden */
  animation: slideIn 0.5s ease forwards; /* Animation */
  animation-delay: 0.5s; /* Delay for sequential appearance */
}


.animated-button2 {
  opacity: 0; /* Initially hidden */
  animation: slideIn 0.5s ease forwards; /* Animation */
  animation-delay: 0.7s; /* Delay for sequential appearance */
}


.animated-button3 {
  opacity: 0; /* Initially hidden */
  animation: slideIn 0.5s ease forwards; /* Animation */
  animation-delay: 0.8s; /* Delay for sequential appearance */

}


.animated-button4 {
  opacity: 0; /* Initially hidden */
  animation: slideIn 0.6s ease forwards; /* Animation */
  animation-delay: 1.0s; /* Delay for sequential appearance */
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(50px); /* Initial position below */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* Final position at the center */
  }
}


.w3-jumbo {
  position: absolute; /* Set the positioning to absolute */
  top: 0; /* Align to the top */
  right: 0;
}
#progressBarContainer {
    
  width: 1500px; /* Fixed width */
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 5px;
  padding: 5px; /* Adds padding around the fill bar */
  box-sizing: border-box; /* Ensures padding doesn't add to the total width */
  margin: 0 auto; /* Centers the progress bar container horizontally */
}

#progressBarFill {
  height: 100%;
  width: 75%; /* Represents the progress */
  background-color: #4297d8;
  border-radius: 3px; /* Slightly less than the container to fit nicely inside */
  transition: width 0.4s ease-in-out;
}
nav {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%; /* Ensures the navbar spans the entire width of the viewport */
  display: inline-block;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline;
}

li a {
  padding: 10px 20px;
  color: white;
  text-decoration: none;
}

li a:hover {
  color: blue;
}