body {
  /* 1. Ensure the background fills the entire screen height */
  margin: 0;
  min-height: 100vh;

  /* 2. Create the linear gradient (Transitions from top-left to bottom-right) */
  background: linear-gradient(135deg, #1a0808, #401414, #000000);

  /* 3. Lock the background in place so it doesn't repeat if the page scrolls */
  background-attachment: fixed;
}
.navbar {
  transition: all 1s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  background-color: #802828;
  border-radius: 50px;
  padding: 0; /* FIX: Set to 0 so the link fills the total vertical space */
  margin: 0 auto; /* Centers the entire navbar container on the web page */
}
.navbar:hover {
  transition: all 1s ease-out;
  width: 500px;
}

.navbar ul {
  list-style: none;
  width: 100%; /* Spans the full 300px navbar width */
  padding: 0; /* Wipes out browser list indentation */
  margin: 0;
}

.navbar ul li {
  width: 100%; /* Forces list item to match navbar width */
  display: block;
}

.navbar ul li a {
  color: bisque;
  text-decoration: none;
  font-family:
    "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;

  /* CRITICAL CHANGES FOR FULL BUTTON CLICKABILITY */
  display: block; /* Expands hit-box from text-only to a full structural block */
  width: 100%; /* Stretches the block edge-to-edge */
  padding: 10px 0; /* Moved here to create the vertical clickable height */
  text-align: center;
  border-radius: 50px; /* Aligns the hover background shape with the parent pill */
  cursor: pointer;
}

/* Optional hover background tint to see the wide clickable area */
.navbar ul li a:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   FORM COMPONENT & CARD FIELDS
   ========================================================================== */
.form-card {
  display: flex;
  flex-direction: column;
  background-color: black;
  gap: 30px;
  padding: 20px;
  border-radius: 12px;
  width: 100%;
  max-width: 400px;
  margin: 30px auto 0;
}

#email-form {
  background-color: black;
  color: white; /* Added so you can read typed input text */
  padding: 20px;
  border-radius: 5px;
  margin: 10px;
  border: 1px solid #333; /* Added subtle border to outline the black field */
}

#message-form {
  background-color: black;
  color: white; /* Added so you can read typed message text */
  padding: 20px;
  border-radius: 5px;
  margin: 10px;
  border: 1px solid #333; /* Added subtle border to outline the black field */
}

#btn {
  background-color: yellow;
  color: black;
  margin: 10px;
  padding: 10px;
  border-radius: 20px;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

/* ==========================================================================
   ADDITIONAL STYLES
   ========================================================================== */
.img-sell {
  translate: 50px;
}

.card {
  color: rgb(216, 216, 126);
  width: min-content;
  background-color: black;
  border-radius: 10px;
  padding: 30px;
}