:root{
  font-family: "VT323", monospace;
  font-weight: 400;
  --primary-color: #ffd52c;
  --secondary-color: #ff5c00;
  --tertiary-color: #c72d04;
  --background-color: #111;
  scrollbar-color: var(--primary-color) var(--secondary-color);

  /* scalable base font */
  font-size: clamp(18px, 3vw, 30px);
}

/* page */
body{
  background: var(--background-color);
  margin: 0;
  color: var(--primary-color);
}

/* center page and limit max width so it looks good on wide monitors */
.container{
  display: flex;
  flex-direction: column;
  align-items: center;        /* center children horizontally */
  padding: 2rem;             /* breathe room at edges */
  gap: 1.5rem;
  max-width: 1400px;         /* keeps layout readable on ultrawide */
  margin: 0 auto;            /* center the whole container in viewport */
  mask-image: linear-gradient(to bottom, #0005 50%, #000 50%);
  mask-size: 100% 2px;
  text-shadow: 0 0 0.5rem;
}

/* main content card */
.content{
  border: 2px solid var(--primary-color);
  width: 100%;               /* fluid width up to max-width of .container */
  max-width: 950px;          /* visual cap, like your original 950px */
  padding: 1rem;
  box-sizing: border-box;
}

/* gallery: responsive grid that collapses automatically */
.gallery-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  justify-items: center;
  width: 100%;
  box-sizing: border-box;
}

/* card/item sizing handled by grid; keep aspect visual consistent */
.item{
  width: 100%;
  max-width: 600px;    /* keeps each item from growing too large */
  height: auto;        /* height follows content */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  box-sizing: border-box;
}

/* images scale to container */
.item > img{
  width: 100%;         /* fluid width */
  max-width: 400px;    /* your previous image width */
  height: 280px;       /* keep visual height */
  object-fit: cover;   /* crop gracefully instead of stretching */
  display: block;
  border: 1px solid rgba(255,255,255,0.03);
}

/* smaller screens tweaks */
@media (max-width: 900px){
  .container{ padding: 1rem; }
  .item > img{ height: 220px; } /* slightly shorter on tablets */
}

@media (max-width: 480px){
  :root{ font-size: clamp(16px, 4vw, 22px); } /* keep readable on phones */
  .content{ padding: .75rem; }
  .item > img{ height: 180px; max-width: 100%; }
}