/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
body {
  background-image: url('/wallpaper2.jpg'); /* Replace with your image path */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-size: cover; /* Scales the image to cover the entire background */
}

h1 {
  font-family: "Press Start 2P", cursive; /* Example pixel font */
  color: #00ffff; /* Cyan */
  text-shadow: 2px 2px #ff00ff; /* Pink shadow */
}

.glitch-text {
  filter: hue-rotate(90deg) saturate(200%);
  animation: glitch 0.5s infinite alternate;
}

@keyframes glitch {
  0% { transform: translate(0, 0); }
  25% { transform: translate(2px, -2px) skewX(5deg); }
  50% { transform: translate(-3px, 3px) skewY(-5deg); }
  75% { transform: translate(1px, -1px) skewX(2deg); }
  100% { transform: translate(0, 0); }
}

.button {
  border: 4px dashed #ffff00; /* Yellow dashed border */
  border-radius: 5px;
  padding: 10px 20px;
  background-color: #ff69b4; /* Hot Pink */
}

img:hover {
  transform: scale(1.1) rotate(5deg);
  transition: transform 0.2s ease-in-out;
}

.overlay-element {
  position: absolute;
  top: 20px;
  left: 30px;
  z-index: 2;
}

.base-element {
  position: relative;
  z-index: 1;
}