* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #111827, #1f2937, #0f172a);
  color: #f8fafc;
  font-family: Arial, sans-serif;
}

.container {
  width: min(1200px, 90vw);
  padding: 2rem 1rem 3rem;
}

h1 {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 2rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.font-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.font-item {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 1rem;
  text-align: center;
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.font-item:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.3);
}

.font-1 { font-family: Arial, sans-serif; }
.font-2 { font-family: 'Georgia', serif; }
.font-3 { font-family: 'Times New Roman', serif; }
.font-4 { font-family: 'Verdana', sans-serif; }
.font-5 { font-family: 'Trebuchet MS', sans-serif; }
.font-6 { font-family: 'Tahoma', sans-serif; }
.font-7 { font-family: 'Courier New', monospace; }
.font-8 { font-family: 'Impact', sans-serif; }
.font-9 { font-family: 'Comic Sans MS', cursive; }
.font-10 { font-family: 'Palatino Linotype', 'Book Antiqua', serif; }
.font-11 { font-family: 'Garamond', serif; }
.font-12 { font-family: 'Bookman Old Style', serif; }
.font-13 { font-family: 'Arial Black', sans-serif; }
.font-14 { font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; }
.font-15 { font-family: 'Lucida Console', monospace; }
.font-16 { font-family: 'Segoe UI', sans-serif; }
.font-17 { font-family: 'Gill Sans', sans-serif; }
.font-18 { font-family: 'Franklin Gothic Medium', sans-serif; }
.font-19 { font-family: 'Copperplate', serif; }
.font-20 { font-family: 'Papyrus', fantasy; }
.font-21 { font-family: 'Brush Script MT', cursive; }
.font-22 { font-family: 'Optima', sans-serif; }
.font-23 { font-family: 'Futura', sans-serif; }
.font-24 { font-family: 'Didot', serif; }
.font-25 { font-family: 'Baskerville', serif; }
.font-26 { font-family: 'Helvetica', sans-serif; }
.font-27 { font-family: 'Geneva', sans-serif; }
.font-28 { font-family: 'Calibri', sans-serif; }

@media (max-width: 640px) {
  h1 {
    font-size: 2rem;
    letter-spacing: 0.04em;
  }

  .font-item {
    min-height: 70px;
    font-size: 1.1rem;
  }
}