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: Changed to 0 so the link completely fills the height */
  margin: 0 auto; /* Centers the entire navbar container on the web page */
}
.navbar:hover {
  transition: all 1s ease-in;
  width: 500px;
}

.navbar ul {
  list-style: none;
  width: 100%; /* ADDED: Forces the list to stretch across the full 300px width */
  padding: 0; /* ADDED: Wipes out hidden browser list indentation */
  margin: 0;
}

.navbar ul li {
  width: 100%; /* ADDED: Forces the list item to take up the full width */
  display: block; /* ADDED: Lets the inner link safely expand */
}

.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 TO WIDEN HIT-BOX */
  display: block; /* Turns the link into a wide block element */
  width: 100%; /* Stretches the block to the full 300px width */
  padding: 10px 0; /* FIX: Moved here to create the vertical clickable height */
  text-align: center; /* Centers the text letters inside the wide block */
  border-radius: 50px; /* Perfectly aligns the clickable background with the red bar */
  cursor: pointer;
}

/* Optional Hover effect to visually see your new wide clickable area */
.navbar ul li a:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   OTHER STYLES
   ========================================================================== */
.img-sell {
  transition: all 1s ease-in-out;
  translate: 50px;
  margin: 20px;
  border-radius: 20px;
}
.img-sell:hover {
  transition: all 0.5s ease-out-in;
  translate: 198px;
  margin: 20px;
  border-radius: 20px;
  animation: 1 1.5s move;
}
@keyframes move {
  0% {
  }
  100% {
    rotate: 360deg;
  }
}

.card1 {
  display: flex;
  transition: all 1s ease;
  color: rgb(216, 216, 126);
  background-color: black;
  border-radius: 10px;
  width: 200px;
  padding: 30px;
  translate: 100px;
}
.card1:hover {
  display: flex;
  transition: all 1s ease;
  color: rgb(216, 216, 126);
  background-color: black;
  border-radius: 10px;
  padding: 30px;
  translate: 200px;
}
.card2 {
  display: flex;
  transition: all 1s ease;
  color: rgb(216, 216, 126);
  background-color: black;
  border-radius: 10px;
  width: 200px;
  padding: 30px;
  translate: 500px, 200px;
}

/* ==========================================================================
   NEW COLUMN FIX: STRUCTURAL WRAPPER RULES
   ========================================================================== */
.main-layout {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Explicitly splits the view into 2 halves */
  align-items: flex-start; /* Aligns columns cleanly at the top */
  max-width: 1400px;
  margin: 40px auto;
}

.left-column {
  display: block; /* Lets your raw margins and translates position naturally */
}

/* Adjusting Card 2 so it can fill up the right-hand column space */
.card2 {
  width: auto; /* Overrides your width:200px so it stretches wide */
  max-width: 600px; /* Keeps text paragraphs comfortable to read */
}

/* ==========================================================================
   MOBILE ENGINE SYSTEM (Triggers on phone displays under 768px wide)
   ========================================================================== */
@media (max-width: 768px) {
  .navbar {
    width: 90%; /* Forces navigation to adapt fluidly within touch screens */
  }
  .navbar:hover {
    width: 95%; /* Prevents horizontal overflow blowout during navigation scaling */
  }

  .main-layout {
    grid-template-columns: 1fr; /* Dissolves horizontal tracks to stack panels cleanly */
    padding: 0 15px;
    margin: 20px auto;
  }

  /* Safely resets rigid pixel offsets so they do not cause layout breaks on phones */
  .img-sell,
  .img-sell:hover,
  .card1,
  .card1:hover,
  .card2 {
    translate: 0px 0px !important;
    margin: 15px auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important; /* Locks calculation elements to interior bounds */
  }

  .img-sell {
    max-width: 280px !important; /* Prevents raw image assets from bloating on small phone cards */
  }
}