html, body {
  margin: 0;
  height: 100%;
  background: black;
  font-family: "Anton SC", sans-serif;
}
.fullscreen-text{
  position: relative;
  width:100vw;
  height:100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

svg{
  width:100%;
  height:100%;
  display:block;
}

video{
  width:100%;
  height:100%;
  object-fit:cover;
}

#startOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: pointer;
  transition: opacity .6s ease;
}

#startOverlay span{
  color: white;
  font-size: 2.8rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  opacity: .85;
  animation: pulse 1.8s infinite;
}

@keyframes pulse{
  0%{opacity:.4}
  50%{opacity:1}
  100%{opacity:.4}
}

.footer {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 15px;
}

.footer .logo {
  height: 40px;
  filter: drop-shadow(0 0 5px #666);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.footer .discord:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 0 12px #7289da);
}

.footer .twitch:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 0 12px #9146ff);
}

.footer .youtube:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 0 12px #ff0000);
}

.footer .instagram:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 0 12px #e1306c);
}

.vignette{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(
    circle at center,
    rgba(0,0,0,0) 45%,
    rgba(0,0,0,0.35) 70%,
    rgba(0,0,0,0.75) 100%
  );
}

.flicker{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  background: rgba(255,255,255,0.08);
  mix-blend-mode: soft-light;
  animation: flicker 1.6s infinite;
}

@keyframes flicker{
  0%  { opacity: 0.08; }
  50% { opacity: 0.03; }
  100%{ opacity: 0.07; }
}

svg{
  filter: contrast(1.08) saturate(1.05);
}