/* Global Styles */
body {
  margin: 0;
  font-family: 'Rockwell Nova', sans-serif;
  background: #0f191ef9;
  color: #ffffff;
}

p{
    font-size:  small;
}

/* Sticky Header */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #1e1e1e;
  height: 180px;
  padding: 20px;
  transition: all 0.3s ease-in;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: inset 0px -3px 10px 5px rgb(0, 0, 0);
}

/* Shrinking header on scroll */
header.shrink {
    text-align: center;
  font-size: small;
  height: 5px;
  padding: 10px 20px;
}



header.shrink .marquee  {
    position:fixed;
    font-size: 1.5em;
    line-height: 10px;
    
}


header.shrink .tagline, 
header.shrink .nav-links, 
header.shrink .lang-button {
  opacity: 0;
  pointer-events: none;
}

/* Header Left */
.header-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.3s ease;
}

.marquee {
  font-size: 2em;
  font-family: 'Chakra Petch', sans-serif;
  margin:auto;
  transition: font-size 0.3s ease;
}

.tagline {
  margin: 0;
  line-height: 1.2;
  transition: opacity 0.3s ease;
}

/* Navigation */
.nav-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transition: opacity 0.3s ease;
}

.nav-links a {
  text-decoration: none;
  color: #ffffff;
  font-size: 1em;
  transition: color 0.3s;
  margin: 5px 0;
}

.nav-links a:hover {
  color: #00bcd4;
}

.lang-button {
  margin-bottom: 10px;
  transition: opacity 0.3s ease;
}

/* Main Content */
.main-container {
  padding: 200px 20px 100px;
  text-align: center;
}

.main-heading {
  font-size: 3em;
  font-family: 'Chakra Petch', sans-serif;
  margin-bottom: 20px;
}

.main-container p {
  font-size: 1.2em;
  max-width: 600px;
  margin: 0 auto;
}

/* Video element */
.main-container video {
  max-width: 100%;
  height: auto;
  margin: 20px 0;
}

/* Sticky Footer */
footer {
  position: sticky;
  bottom: -80px;
  left: 0;
  right: 0;
  z-index: 1000;
  text-align: center;
  padding: 20px;
  background: #0a121ca9;
  box-shadow:  0px 0px 50px 30px rgb(0, 0, 0);
}




/* Responsive Design */
@media screen and (max-width: 768px){
  header {
    flex-direction: column;
    text-align: center;
    height: auto;
    padding: 15px;
  }


/* Footer */
footer {
  font-size: 10px;
  position: sticky;
  bottom: -40px;
  height: 20px;
  left: 0;
  right: 0;
  z-index: 1000;
  text-align: center;
  padding:  20px ;
  background: #1e1e1e;

}



  .header-left {
    align-items: center;
    margin-bottom: 10px;
  }

  .nav-links {
    flex-direction: row;
    justify-content: center;
  }

  .nav-links a {
    margin: 0 10px;
  }

  .main-container {
    padding: 150px 15px 80px;
  }

  .main-heading {
    font-size: 2em;
  }

  .main-container p {
    font-size: 0.8em;
    max-width: 90%;
  }
}

@media screen and (max-width: 580px) {
  header {
    padding: 10px;
  }
footer{
  background-color: rgb(6, 15, 6);
}

.main-container p {
  font-size: 0.7em;
  
}

  .marquee {
    font-size: 1.8em;
  }

  .main-heading {
    font-size: 1em;
  }

  .nav-links a {
    font-size: 0.9em;
    margin: 0 5px;
  }
}


  /* ANIMÁLT STEVE BLACK FX */

  .marquee {
            /* position: absolute; */
            /* position: relative; */
            text-align: center;
            white-space: nowrap;
            font-size: 3rem;
            top: 2vh;
            animation: size  1s alternate;
        }
        .marquee span {
            color: #444;
            display: inline-block;
            opacity: 0.7;
            animation: glow 1.6s cubic-bezier(0.55, 0, 0.1, 1) forwards;
        }
        /* Egyedi késleltetés minden betűnek */
        .marquee span:nth-child(1) { animation-delay: 1.0s; }
        .marquee span:nth-child(2) { animation-delay: 0.2s; }
        .marquee span:nth-child(3) { animation-delay: 1.4s; }
        .marquee span:nth-child(4) { animation-delay: 0.6s; }
        .marquee span:nth-child(5) { animation-delay: 0.8s; }
        .marquee span:nth-child(6) { animation-delay: 1.0s; }
        .marquee span:nth-child(7) { animation-delay: 1.2s; }
        .marquee span:nth-child(8) { animation-delay: 2.0s; }
        .marquee span:nth-child(9) { animation-delay: 0.6s; }
        .marquee span:nth-child(10) { animation-delay: 1.8s; }
        .marquee span:nth-child(11) { animation-delay: 2.0s; }

        @keyframes size {
            0% { font-size: 1rem; }
            100% { font-size:3rem; }
        }
        @keyframes glow {
            0% { color: #444; opacity: 0.7; text-shadow: none; }
            80% { color: #0e303635; opacity: 1; text-shadow: 0 0 80px #fff2; }
            100% { color: #fff; opacity: 1; text-shadow: 0 0 0px #0bebff, 0 0 1px rgba(26, 197, 231, 0.382); }
        }