.page-content img {
  max-width: 100%;
  height: auto;
}

/* Site-wide background image (behind main content). */
body > #content {
  background-color: transparent !important;
  background-image: url("/images/GTA5-2016-03-09-18-35-03.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Theme sets a fixed 30x30 on the navbar logo; override for wide logo images. */
.navbar-brand img {
  width: auto !important;
  height: 40px !important;
}

/* GTA5 Redux vibe: green header bar on dark background. */
body > header {
  background-color: var(--primary-color) !important;
}

header .navbar-brand,
header .navbar .navbar-nav a,
header .navbar-toggler {
  color: var(--text-link-color) !important;
}

/* The theme colors the brand text with primary color; force readable contrast. */
header .navbar-brand {
  color: var(--text-link-color) !important;
}

/* Installation section: use the same dark surface as the theme UI. */
#installation {
  background-color: var(--secondary-background-color) !important;
}

/* Hero overlay to keep text readable over the background. */
#hero {
  position: relative;
  background: transparent;
}

#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  pointer-events: none;
}

#hero > .container {
  position: relative;
  z-index: 1;
}

/* Hero image should be clean (no thumbnail look) when it's the logo. */
#hero .image img.img-thumbnail[src*="gta5_redux_logo_header.png"] {
  background-color: transparent !important;
  border: none !important;
}

/* Buttons: one filled (direct), one outline (torrent). */
#hero a.btn.btn-download {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--text-link-color) !important;
}

#hero a.btn.btn-torrent {
  background-color: transparent !important;
  border-color: var(--text-link-color) !important;
  color: var(--text-link-color) !important;
}

/* Footer logo also has fixed width/height in markup. */
footer img {
  width: auto !important;
  height: 40px !important;
}
