body {
  margin: 0;
  padding: 0;
  font-family: Verdana;
  position: relative;
  overflow-x: hidden;
  background-color: black;
  background-image: url('windows.gif');
    background-size: cover;
  background-position: center;
  background-attachment: fixed;
}


/* Fade-in background image using ::before */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://i.pinimg.com/736x/e7/0d/bd/e70dbdd7ee85889382c90498123a7232.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: -1;
  opacity: 0;
  animation: fadeInBG .5s ease-out 3.5s forwards;
}



/* Your main content stays above the fading background */
.content {
  position: relative;
  z-index: 1;
  color: black;
  padding: 20px;
}
.webpfp {
  position: absolute;
  top: 30vh;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  animation: fadeInBG 0.5s ease-out 3.5s forwards;
}

.username {
  border-radius: 5px;
  border: 2px solid black;
  position: absolute;
  top: 45vh;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 240px;
  height: 30px;
  background-color: white;
  color: black;
  opacity: 0;
  animation: fadeInBG 0.5s ease-out 3.5s forwards;
}

.password {
  border: 2px solid black;
  border-radius: 5px;
  position: absolute;
  top: 50vh;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 240px;
  height: 30px;
  background-color: white;
  color: black;
  opacity: 0;
  animation: fadeInBG 0.5s ease-out 3.5s forwards;
}
.submit {
  border: 2px solid black;
  border-radius: 5px;
  position: absolute;
  top: 55vh;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 20px;
  background-color: white;
  color: black;
  opacity: 0;
  animation: fadeInBG 0.5s ease-out 3.5s forwards;
}



@keyframes fadeInBG {
  from { opacity: 0; }
  to { opacity: 1; }
}