@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 */
}

/* 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;
}

.preview-image {
    width: 120px;
    height: auto;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 10px;

    transition: transform 0.3s ease;
    transform-origin: left top;
}

.preview-image:hover {
    transform: scale(2);
}

/* 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;
  }
}