* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
  font-family: 'Orbitron', sans-serif;
  overflow: hidden;
  position: relative;
}

.wave-background {
  position: absolute;
  width: 200%;
  height: 200%;
  background: linear-gradient(270deg, #0f0c29, #302b63, #8a2387, #0f0c29);
  background-size: 800% 800%;
  animation: wave 20s ease infinite;
  z-index: -1;
}

@keyframes wave {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
}

.animated-name {
  font-size: 4rem;
  background: linear-gradient(90deg, cyan, magenta);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: gradientShift 6s ease infinite;
  background-size: 200% auto;
}

@keyframes gradientShift {
  0% { background-position: 0% }
  100% { background-position: 100% }
}

.slogan {
  margin-top: 1rem;
  font-size: 1.1rem;
  color: #eee;
}

.socials {
  margin-top: 2rem;
}

.socials a {
  margin: 0 10px;
  font-size: 1.8rem;
  color: white;
  transition: transform 0.3s, color 0.3s;
  display: inline-block;
}

.socials a:hover {
  transform: scale(1.2);
  color: cyan;
}

.kick-icon {
  width: 26px;
  height: 26px;
  vertical-align: middle;
  filter: brightness(1000%);
}