/* style.css - globales Design für alle Seiten */

/* === Hintergrundcontainer === */
#background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(-45deg, #1a1a1a, #2a1a1a, #1a1a2a, #1a2a1a);
  background-size: 400% 400%;
  animation: gradientMove 25s ease infinite;
  z-index: -2;
}

#background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
  opacity: 0.04;
}

/* === Animation === */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* === Body & Content === */
body {
  position: relative;
  overflow-x: hidden;
  color: #f0f0f0;
  font-family: 'Rajdhani', sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#content {
  position: relative;
  z-index: 1; /* liegt über dem Hintergrund */
  flex: 1;
}

/* === Glow für H1 === */
@keyframes glow {
  0%, 100% {
    text-shadow: 0 0 6px rgba(229, 57, 53, 0.6),
                 0 0 12px rgba(229, 57, 53, 0.4),
                 0 0 18px rgba(229, 57, 53, 0.2);
  }
  50% {
    text-shadow: 0 0 12px rgba(229, 57, 53, 0.8),
                 0 0 24px rgba(229, 57, 53, 0.6),
                 0 0 36px rgba(229, 57, 53, 0.3);
  }
}

h1 {
  color: #e53935;
  animation: glow 1.5s infinite alternate;
}