* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background-color: #0d0f12;
  color: #ffffff;
  padding: 40px 20px;
}

h1 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2.2rem;
  letter-spacing: 1px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
}

.box {
  min-width: 600px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.box:hover {
  transform: translateY(-6px) scale(1.01);
}

.one {
  background: black;
  background-image: linear-gradient(135deg, #0f172a, #38bdf8);
}

.two {
  background: black;
  background-image: linear-gradient(45deg, #18181b, #f43f5e);
}

.three {
  background: black;
  background-image: linear-gradient(to right, #2e1065, #7c3aed, #c084fc);
}

.four {
  background: black;
  background-image: linear-gradient(160deg, #7c2d12, #ea580c, #facc15);
}

.five {
  background: black;
  background-image: linear-gradient(to bottom right, #022c22, #0d9488, #2dd4bf);
}

.six {
  background: black;
  background-image: linear-gradient(120deg, #1a2e05, #84cc16);
}

.seven {
  background: black;
  background-image: linear-gradient(45deg, #4c0519, #fb7185, #fde047);
}

.eight {
  background: black;
  background-image: linear-gradient(135deg, #581c87, #d946ef);
}

.nine {
  background: black;
  background-image: linear-gradient(180deg, #0f172a, #475569);
}

.ten {
  background: black;
  background-image: linear-gradient(110deg, #064e3b, #10b981, #f59e0b);
}

.eleven {
  background: black;
  background-image: linear-gradient(135deg, #450a0a, #dc2626, #f97316);
}

.twelve {
  background: black;
  background-image: linear-gradient(to right, #052e16, #22c55e, #06b6d4);
}

.thirteen {
  background: black;
  background-image: linear-gradient(150deg, #831843, #f472b6);
}

.fourteen {
  background: black;
  background-image: linear-gradient(60deg, #030712, #1d4ed8, #a855f7);
}

.fifteen {
  background: black;
  background-image: linear-gradient(to right, #78350f, #f59e0b, #fef08a);
}

.sixteen {
  background: black;
  background-image: radial-gradient(circle at center, #6366f1 0%, #090d16 80%);
}

.seventeen {
  background: black;
  background-image: radial-gradient(circle at top right, #ec4899, #312e81, #020617);
}

.eighteen {
  background: black;
  background-image: radial-gradient(circle at bottom left, #10b981 10%, #064e3b 40%, #022c22 90%);
}

.nineteen {
  background: black;
  background-image: radial-gradient(ellipse at center, #a855f7 0%, #166534 60%, #052e16 100%);
}

.twenty {
  background: black;
  background-image: radial-gradient(circle at 50% 30%, #ef4444 0%, #b91c1c 40%, #000000 90%);
}