/* 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 {
  margin: 0;
  padding: 0;
  height: 100vh;
  background: url('Pixal Beach.jpeg') no-repeat center center fixed;
  background-size: cover;
  font-family: sans-serif;
  color: white;
  overflow: hidden; /* keeps HUD in place */
}

/* HUD wrapper */
.hud {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none; /* HUD doesn’t block clicks on page */
}

/* Commands menu (bottom-left) */
.commands {
  position: absolute;
  bottom: 60px;
  left: 60px;
  pointer-events: auto; /* allow clicks on links */
}

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

.commands li {
  margin: 10px 0;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.commands a {
  color: silver;
  text-decoration: none;
  transition: 0s;
}

/* Blue selector effect on hover */
.commands a:hover {
  background: rgba(0, 100, 255, 0.7); /* translucent KH blue */
  border: 2px solid #00aaff;          /* glowing blue border */
  border-radius: 6px;                 /* rounded edges (optional) */
  color: yellow;                      /* classic KH highlight text */
  text-shadow: 1px 1px 3px black;     /* makes it pop */
}

.commands a:hover {
  color: white; /* mimic KH hover highlight */
}

/* Health bar (bottom-right) */
.healthbar {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.healthbar img {
  width: 250px; /* scale your health bar image */
  height: auto;
}