body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.background {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 1s ease;
  position: relative;
  animation: pulse 10s infinite;
}

/* 背景バリエーション */
.bg1 {
  background: radial-gradient(circle, #ff00cc, #3333ff);
}

.bg2 {
  background: linear-gradient(135deg, #00ffcc, #ffcc00);
  animation: swirl 20s infinite linear;
}

.bg3 {
  background: repeating-conic-gradient(#ff6600 0deg 30deg, #6600ff 30deg 60deg);
  animation: rotateBg 15s infinite linear;
}

/* タイトルスタイル */
.title {
  font-size: 3rem;
  color: white;
  cursor: pointer;
  transition: font-family 0.5s ease, transform 0.5s ease;
  z-index: 2;
  animation: float 3s ease-in-out infinite;
}

/* フォントバリエーション */
.font1 {
  font-family: 'Segoe UI', sans-serif;
}

.font2 {
  font-family: 'Courier New', monospace;
}

.font3 {
  font-family: 'Impact', fantasy;
}

/* アニメーション */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5); }
}

@keyframes swirl {
  background-position: center;
  background-size: 200% 200%;
}

@keyframes rotateBg {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}