/* ---------- Base page ---------- */

:root {
  --side-width: 500px;
  --max-content-width: 760px;
}

* {
  box-sizing: border-box;
}
h1 {
  color:rgb(55, 88, 22);
  font: "Consolas";
}
body {
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: white;
  background: #000000;
}

.site-content {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.site-title-img {
  max-height: 80px;
  width: auto;
  display: block;
}

/* Position it just right of the left margin strip, on desktop only */
@media screen and (min-width: 2700px) {
  .site-header h1 {
    min-height: 30px;  /* matches your logo's max-height */
  }
  
  .site-title-img {
    position: fixed;
    top: 150px;
    left: 520px;  /* 500px strip + 20px gap */
    z-index: 10000;  /* above your side strips (9999) and header */
  }
}

.site-header,
.site-footer {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: .9 rem;
  text-align: center;
}

.site-header nav a {
  margin: 0 0.75rem;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.site-header nav a:hover {
  border-bottom-color: currentColor;
}

section {
  margin-bottom: 3rem;
}

/* ---------- Margin gif strips ---------- */
/* Fixed to the viewport, so they run the full page height and sit
   above the header/footer, not just the main content. */

.side-decor {
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--side-width);
  z-index: 9999;
  pointer-events: none; /* clicks pass through to whatever is underneath */

  /* Swap this URL for your own hosted gif/image */
  background-image: url("https://raw.githubusercontent.com/slashoscar/slashoscar.github.io/main/assets/space.gif");
  background-repeat: repeat-y;
  background-size: var(--side-width) auto;
}

.side-decor-left {
  left: 0;
}

.side-decor-right {
  right: 0;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 1.5rem;
}

.badge-row img {
  display: block;
  image-rendering: pixelated; /* keeps low-res gifs crisp instead of blurry-scaled */
}

/* Hide the strips on tablets and phones */
@media screen and (max-width: 1700px) {
  .side-decor {
    display: none;
  }
}