body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f2f2f2;
  color: #222;
  transition: background 0.3s ease, transform 0.5s ease;
  cursor: default;
}

header {
  background: #222;
  color: #fff;
  padding: 15px;
  position: sticky;
  top: 0;
  z-index: 1000;
  text-align: center;
}

header h1 { margin:0; font-size: 2rem; }

nav a {
  color: #fff;
  margin: 0 15px;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s;
}
nav a:hover { color: #ffd700; }

button {
  padding: 8px 20px;
  margin: 5px;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  background: #007bff;
  color: white;
  font-weight: bold;
  transition: background 0.3s;
}
button:hover { background: #0056b3; }

main { padding: 20px; min-height: 60vh; }

footer { text-align:center; padding:15px; background:#222; color:white; }

.hero {
  background: #fff;
  color: #222;
  padding: 50px 20px;
  border-radius: 8px;
  margin: 20px auto;
  max-width: 800px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-align:center;
}

.hero h2 { font-size:2.2rem; margin-bottom:15px; }
.hero p { font-size:1.1rem; margin-bottom:20px; }

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px 0;
}
.cards .card {
  background: #fff;
  color: #222;
  padding: 20px;
  margin: 10px;
  border-radius: 8px;
  min-width: 200px;
  max-width: 250px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cards .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* Chatbox */
#chatbox {
  margin-top: 10px;
  background: rgba(0,0,0,0.05);
  padding: 10px;
  border-radius: 6px;
  height: 180px;
  overflow-y: auto;
  text-align: left;
}

/* Chaos elements */
.bouncing {
  position: absolute;
  padding: 10px 15px;
  background: #fff;
  color: black;
  font-weight: bold;
  border-radius: 6px;
  user-select: none;
  pointer-events: none;
  animation: bounce 3s ease-in-out infinite;
  text-align: center;
  transition: transform 0.2s;
}
@keyframes bounce { 0%,100%{transform:translateY(0);}50%{transform:translateY(-30px);} }

.rain {
  position: absolute;
  font-size: 20px;
  user-select: none;
  pointer-events: none;
  transition: transform 0.2s;
}

.sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  pointer-events: none;
  animation: sparkle-fall 1s forwards;
}
@keyframes sparkle-fall {
  0% {opacity:1; transform:translate(0,0) scale(1);}
  100% {opacity:0; transform:translate(var(--dx), var(--dy)) scale(0.5);}
}

/* Cursor trail */
.cursor-trail {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(255,255,255,0.8);
  border-radius: 50%;
  pointer-events: none;
  transition: transform 0.2s, opacity 0.3s;
}

/* Glitch text */
.glitch { display:inline-block; position:relative; }
.glitch::after, .glitch::before {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  color: #ff0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
@keyframes glitchAnim {
  0% { clip: rect(0, 9999px, 0, 0); transform: translate(0,0);}
  20% { clip: rect(2px, 9999px, 10px, 0); transform: translate(-2px,-2px);}
  40% { clip: rect(5px, 9999px, 15px, 0); transform: translate(2px,2px);}
  60% { clip: rect(3px, 9999px, 12px, 0); transform: translate(-1px,1px);}
  80% { clip: rect(1px, 9999px, 10px, 0); transform: translate(1px,-1px);}
  100% { clip: rect(0, 9999px, 0, 0); transform: translate(0,0);}
}