/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

.topbar {
  position: fixed;      /* stays in place */
  top: 0;               /* sticks to top */
  left: 0;
  width: 100%;          /* full width */
  background: #B697EE;  /* light background */
  padding: 10px 20px;
  display: flex;
  gap: 20px;
  z-index: 9999;        /* stays above everything */
}

.topbar a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.topbar a:hover {
  color: #ff66ff;
}

button {
  background: #6a0dad;        /* deep purple */
  color: white;
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;

  box-shadow: 0 0 10px #E0CCFF;
  transition: 0.25s ease;
}

/* Hover effect */
button:hover {
  background: #7c1fe0;
  box-shadow: 0 0 15px #c78cff, 0 0 25px #E0CCFF;
  transform: scale(1.05);
}

/* Click effect */
button:active {
  transform: scale(0.97);
  box-shadow: 0 0 8px #a04cff;
}

#chatbox {
  text-shadow: none;
}

body {
  background:
    conic-gradient(
      #8F6BC8 0deg 90deg,
      #65449E 90deg 180deg,
      #8F6BC8 180deg 270deg,
      #65449E 270deg 360deg
    );
  background-size: 40px 40px;      /* bigger squares = less visual noise */
  animation: moveChecker 1.2s linear infinite;
  color: #EEE;                     /* slightly off-white */
  font-family: "Comic Sans MS", cursive, sans-serif;
  text-shadow:
  0 0 4px #C7A8FF,
  0 0 8px #C7A8FF,
  0 0 12px #C7A8FF,
  0 0 16px #C7A8FF;

}

@keyframes moveChecker {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 40px 40px;
  }
}


/* Header */
h1 {
  font-size: 48px;
  margin-bottom: 10px;
  text-shadow: 0 0 15px #c78cff;
}

/* Paragraph text */
p {
  font-size: 20px;
  max-width: 600px;
  margin: 0 auto 30px auto;
  line-height: 1.6;
}

/* Links */
a {
  color: #fef;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


/* Centered glowing container */
.container {
  background: rgba(255, 255, 255, 0.05);
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 0 25px #c78cff55;
  max-width: 700px;
  margin: auto;
}