:root{
  --card-min: 160px;    /* min width of a card cell */
  --card-height: 200px; /* default height */
}

@font-face {
  font-family: 'Futured';
  src: url(Futured.TTF);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Futured";
  color: #fff;
  background: #000;
  min-height: 100vh;
  overflow-x: hidden; /* keep vertical scroll */
}

/* Background video fixed behind content */
#background-video {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  filter: brightness(0.5); /* <-- semicolon matters */
  z-index: -1;
  pointer-events: none;
}

/* Title */
.main-title {
  font-family: "Futured";
  text-align: center;
  font-size: clamp(1.8rem, 2.5vw + 1rem, 3rem);
  color: #FF0000;
  margin: 28px 16px;
  text-shadow: 0 0 6px rgba(255,0,0,0.35);
  transition: color .3s ease, text-shadow .3s ease;
  position: relative;
  z-index: 1;
}
.main-title:hover{
  color: #FFD700;
  text-shadow: 0 0 6px #FFD700, 0 0 5px #FFA500;
}

/* Grid */
.grid-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
  gap: 16px;
  padding: 16px;
  width: min(1200px, 100%);
  margin: 0 auto 32px;
  position: relative;
  z-index: 1;
}

/* Card is the link */
.card{
  position: relative;
  display: block;
  height: var(--card-height);
  border-radius: 20px;
  overflow: hidden;
  background-color: #222;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  text-decoration: none; /* remove underline */
}

/* Image fill */
.card .background{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85);
  transition: transform .35s ease, filter .35s ease;
}

/* Gradient at bottom to lift text */
.card .backdrop{
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.7));
}

/* Text */
.card .card-content{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
}

.card .title{
  margin: 0;
  color: #FFD700;
  font-weight: 700;
  font-size: 1.1rem;
  text-shadow: 0 0 6px rgba(0,0,0,0.6);
  transform: translateY(8px);
  opacity: .95;
  transition: transform .3s ease, opacity .3s ease;
}

/* Hover effects only on devices that actually hover */
@media (hover: hover) and (pointer: fine){
  .card:hover .background{ transform: scale(1.05); filter: brightness(1); }
  .card:hover .title{ transform: translateY(0); opacity: 1; }
}

/* Mobile tweaks */
@media (max-width: 767px){
  :root{
    --card-min: 140px;
    --card-height: 160px;
  }
  .grid-container{ gap: 12px; padding: 12px; }
  .main-title{ margin-top: 18px; }
}

/* Tablet tweaks */
@media (min-width: 768px) and (max-width: 1023px){
  :root{
    --card-min: 180px;
    --card-height: 180px;
  }
}