/* 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." */


body, html {
  height: 100%;
  overflow: hidden;
  background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
  position: relative;
  font-family: sans-serif;
}
.navbar {
  background-color: #333;
  max-width: 600px;  /* limit the width */
  width: 90%;
  margin: 10px auto 0 auto;;        /* center horizontally */
  border-radius: 8px;    /* optional: rounded corners */
  overflow: hidden;
  font-weight: bold;
}

.navbar ul {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
}

.navbar li {
  flex: 1;
}

.navbar a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  transition: background 0.3s;
}

.navbar a:hover {
  background-color: pink;
  opacity: 0.6;
  box-shadow: 0 0 15px white;
  color:black;
}

h1 {
  font-size: 60px;
  color:white;
  letter-spacing: 2px;
  margin-top:100px;
}
#loader-container {
      width: 90%;
      max-width: 500px;
      height: 30px;
      background: #333;
      border-radius: 5px;
      overflow: hidden;
      position: relative;
    }

    #loader-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(to right, rgb(210, 172, 253), pink);
      transition: width 0.1s ease;
    }

    #loader-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 14px;
      font-weight: bold;
    }

    #loader-message {
      margin-top: 20px;
      font-size: 14px;
      color: #bbb;
      animation: fadein 0.3s ease;
      text-align: center;
    }

    @keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
h2 {
  color:#000000;
}
.clouds {
  position: absolute;
  width: 200%;
  height: 100%;
  background: white;
  animation: moveClouds 120s linear infinite;
  opacity: 0.2;
  filter: brightness(0.6) grayscale(100%);
}

/* Lightning Flash */
.lightning {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0;
  pointer-events: none;
  animation: flashLightning 20s infinite;
}

/* Animations */
@keyframes moveClouds {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -1000px 0;
  }
}

@keyframes flashLightning {
  0%, 95%, 100% {
    opacity: 0;
  }
  96% {
    opacity: 0.2;
  }
  96.2% {
    opacity: 0;
  }
  96.5% {
    opacity: 0.4;
  }
  96.7% {
    opacity: 0;
  }
}


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

body {
  height: 100vh;
  background: black;
  color: white;
  overflow: hidden;
  font-family: 'Courier New', monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Glitch text */
.glitch-text {
  font-size: 5rem;
  position: relative;
  color: white;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  color: #f0f;
  z-index: -1;
}

.glitch-text::before {
  animation: glitchTop 1s infinite linear alternate-reverse;
}

.glitch-text::after {
  color: cyan;
  animation: glitchBottom 1s infinite linear alternate-reverse;
}

/* Glitch overlay */
.glitch-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.02) 0px,
    rgba(255,255,255,0.02) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  animation: glitchOverlay 2s infinite;
  z-index: 1000;
}

/* Animations */
@keyframes glitchTop {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-2px, -2px); }
  40% { transform: translate(-5px, 0); }
  60% { transform: translate(3px, 2px); }
  80% { transform: translate(1px, -1px); }
  100% { transform: translate(0, 0); }
}

@keyframes glitchBottom {
  0% { transform: translate(0, 0); }
  20% { transform: translate(2px, 2px); }
  40% { transform: translate(5px, 0); }
  60% { transform: translate(-3px, -2px); }
  80% { transform: translate(-1px, 1px); }
  100% { transform: translate(0, 0); }
}

@keyframes glitchOverlay {
  0%, 100% { opacity: 0.05; transform: translateY(0); }
  10% { opacity: 0.1; transform: translateY(-5px); }
  20% { opacity: 0.15; transform: translateY(5px); }
  30% { opacity: 0.05; transform: translateY(-3px); }
  40% { opacity: 0.1; transform: translateY(3px); }
  50% { opacity: 0.2; transform: translateY(0); }
}