/* Style the header */
.logo {
        width: 20%;
      }

.header {
  padding: 270px;
  text-align: center;
  align-items: center;
  position: relative;
  z-index: 0;
  /* set the background image */
  background-image: url('logo2.png');
  background-repeat: no-repeat;
  /* set the size and other background properties as needed */
  background-size: 45%;
  background-position: center;
  /* make sure the content is in front of the background */
  }

.header::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* set the background color with desired opacity */
  background-color: rgba(255, 255, 255, 0.7);
  z-index: -1;
  /* set the opacity of the pseudo-element itself */
  opacity: 0.7;
}

h1 {
  background-image: linear-gradient(45deg, #FF8C00, #FFA500);
  font-size: 50px;
}

p {
  color: black;
  font-size: 30px;
}


/* Style the input field */
input[type=text] {
  width: 50%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  outline: none;
}

/* Style the submit button */
button[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Add a hover effect to the submit button */
button[type=submit]:hover {
  background-color: #45a049;
}

/* Style the footer */
.footer {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
}

p1{
  color: green;

}

#time {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}