body {
        background-image: url("aura.jpeg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
       
      }

h1 {
  color: white;
  font-size: 30px;
 text-align: center;
 font: Arial;
}

div {
  background-color: transparent;
}


#myButton {
  /* Initial styles */
  transition: transform 0.3s ease-in-out; /* Smooth transition over 0.3 seconds */
}

#myButton:hover {
  transform: translateY(-5px); /* Move the button up 5 pixels on hover */
}

button img {
  background-color: transparent;
  border: none;
  display: block;
  width: 100px; /* or whatever size you want */
}

img {
  object-fit: cover;
}

.imgtxt {
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.imgtxt span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 2.5rem;
  color: #FFF;
  filter: drop-shadow(1px 1px 0 black) 
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);
}
.imgtxt:hover span, .imgtxt:focus span {
  opacity: 1;
}
.imgtxt:hover img, .imgtxt:focus img {
  /* add hover effects like transform or filter to your images here! */
}