/* 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-color: black;
  background-image: url("/UI/images/horizontal-repeating-wire-background.jpg");
  background-position: 0;
  background-attachment: fixed;
  color: white;
  font-family: Verdana, sans-serif;
  margin: 0;
  padding: 10px; /* Added padding so content doesn't hit screen edges on mobile */
}

.header-spacer {
  display: block;
  width: 100%;
  max-width: 325px; /* Limits size on desktop */
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
  background: linear-gradient(135deg, #6b6b6b 0%, #4a4a4a 50%, #2a2a2a 100%);
  border: 4px solid;
  border-color: #8a8a8a #5a5a5a #5a5a5a #8a8a8a;
  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.8),
          0 0 20px rgba(0, 0, 0, 0.5);
  padding: 5px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box; /* Ensures padding/border don't add to width */
}

/* Container setup - Responsive */
  .grid-container {
  width: 100%;
  max-width: 325px; /* The "ideal" width for your sliced images */
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
}

/* Ensure images fill their containers without gaps */
img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0;
}

/* Middle Row Layout */
.grid-body {
  display: grid;
  grid-template-columns: 91px 132px 102px; /* Matches your exact widths */
  align-items: start;
  margin: 0 0;
}


/* Nested Grid (The 118px column) */
.col-right-nested {
  display: flex;
  flex-direction: column;
}
.nested-bottom-row {
  display: grid;
  grid-template-columns: 29px 51px 22px; /* Sub-column widths */
  align-items: start;
}