body {
  font-family: "Segoe UI", sans-serif;
  background: #191919;
  background: linear-gradient(0deg, #191919 0%, #0a0a0a 300px);
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 2em;
}

.logo {
  display: block;
  margin: 0 auto 20px auto;
  max-width: 300px;
}

.main-nav {
  margin-bottom: 2em;
}

.main-nav a {
  color: #00ffcc;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2em;
}

.intro h1 {
  font-size: 2em;
  margin-bottom: 0.2em;
}

.intro p {
  color: #aaa;
  font-size: 1.1em;
}

.discord-section {
  margin: 2.5em 0;
}

.discord-button {
  background: #00ffcc;
  color: #000;
  padding: 12px 25px;
  font-size: 1.4em;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  animation: pulse 2s infinite;
}
.league-button {
  background: #00ffcc;
  color: #000;
  font-weight: bold;
  text-decoration: none;
  padding: 10px 20px;
  font-size: 2em;
  border-radius: 8px;
  display: inline-block;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 255, 204, 0.5);
}

.league-button:hover {
  background: #00e6b8;
  box-shadow: 0 0 20px rgba(0, 255, 204, 0.8);
  transform: scale(1.05);
}
.quake-info {
  margin-top: 3em;
  font-size: 0.95em;
  color: #bbb;
}

.quake-info a {
  color: #00ffcc;
  text-decoration: none;
  font-weight: bold;
}

.quake-info a:hover {
  text-decoration: underline;
}


@keyframes pulse {
  0%, 100% { box-shadow: 0 0 10px #00ffcc; }
  50% { box-shadow: 0 0 25px #00ffcc; }
}

.socials {
  margin: 2em 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.social-button {
  display: inline-block;
  padding: 10px 20px;
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s ease;
}

.social-button.twitch {
  background: #9146ff;
  color: #fff;
  box-shadow: 0 0 10px #9146ff;
}

.social-button.twitch:hover {
  box-shadow: 0 0 25px #9146ff;
}

.social-button.youtube {
  background: #ff0000;
  color: #fff;
  box-shadow: 0 0 10px #ff0000;
}

.social-button.youtube:hover {
  box-shadow: 0 0 25px #ff0000;
}

.server-list {
  margin-top: 3em;
}

.server-list table {
  margin: 0 auto;
  border-collapse: collapse;
  width: 90%;
  max-width: 700px;
  font-size: 1em;
  background-color: #1a1a1a;
}

.server-list td {
  border: 1px solid #333;
  padding: 10px;
}

.server-list a {
  color: #00ffcc;
  text-decoration: none;
}

.rules, .thanks {
  margin-top: 3em;
}

.thanks ul {
  list-style: none;
  padding: 0;
  margin: 1em 0;
}

footer {
  margin-top: 3em;
  padding: 1em 0;
  background: #111;
  color: #aaa;
  font-size: 0.9em;
}

footer a {
  color: #00ffcc;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}
#title {
  font-size: 2.2em;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 0.5em;
}

/* Gradient dla Q — poziomy: #DA1CB8 → #3D26C0 */
.qgrad {
	font-size: 1.3em;
  background: linear-gradient(to right, #DA1CB8, #3D26C0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;

  /* Kontur */
  -webkit-text-stroke: 1.2px #000;
  text-shadow: 0 0 1px #000; /* fallback dla Firefoxa */

  position: relative;
  animation: qglow 3s ease-in-out infinite;
}

.lipgrad {
	font-size: 1.2em;
  background: linear-gradient(to bottom, #50BCD9, #013F79);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;

  /* Kontur */
  -webkit-text-stroke: 1.2px #000;
  text-shadow: 0 0 1px #000;

  position: relative;
  animation: lipglow 3s ease-in-out infinite;
}
/* Neon glow dla Q */
@keyframes qglow {
  0%, 100% {
    text-shadow:
      0 0 6px rgba(218, 28, 184, 0.8),
      0 0 12px rgba(61, 38, 192, 0.7);
  }
  50% {
    text-shadow:
      0 0 12px rgba(218, 28, 184, 1),
      0 0 24px rgba(61, 38, 192, 0.9);
  }
}

/* Neon glow dla LIP */
@keyframes lipglow {
  0%, 100% {
    text-shadow:
      0 0 6px rgba(80, 188, 217, 0.8),
      0 0 12px rgba(1, 63, 121, 0.7);
  }
  50% {
    text-shadow:
      0 0 12px rgba(80, 188, 217, 1),
      0 0 24px rgba(1, 63, 121, 0.9);
  }
}
/* Q gradient — bez glow */
/* Gradient dla Q — poziomy: #DA1CB8 → #3D26C0 */
.qgrad2 {	
  font-size: 1.1em;
  background: linear-gradient(to right, #DA1CB8, #3D26C0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

/* Gradient dla LIP — pionowy: #50BCD9 → #013F79 */
.lipgrad2 {
  font-size: 1.1em;
  background: linear-gradient(to bottom, #50BCD9, #013F79);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}