/*
 * Globals
 */

@font-face {
    font-family: 'Knockout';
    src: url('assets/fonts/Knockout HTF48-Featherweight.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Abel';
    src: url('assets/fonts/Abel-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/* Custom default button */
.btn-light,
.btn-light:hover,
.btn-light:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
}


/*
 * Base structure
 */

body {
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
        background: url(assets/images/background.webp);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      }
.cover-container {
  max-width: 42em;
}

h1 {
  font-family: 'Knockout', sans-serif; /* Ensure fallback font */
  font-size: 250px;
  color: #D6FF00;
  letter-spacing: 32px;
  line-height: 200px;

  /* Cross-browser text-shadow */
  -webkit-text-shadow: 
    1px 0px 2px #d6ff00, 
    1px 0px 2px #d6ff00, 
    1px 0px 2px #d6ff00, 
    1px 0px 1.5px #b1ce00, 
    5px 3px 15px #b1ce00, 
    5px 0px 15px rgba(182, 220, 0, 0.8), 
    5px 0px 125px rgba(182, 220, 0, 0.6), 
    20px 0vw 200px rgba(182, 220, 0, 0.4), 
    40px 0vw 200px rgba(182, 220, 0, 0.2);

  -moz-text-shadow: 
    1px 0px 2px #d6ff00, 
    1px 0px 2px #d6ff00, 
    1px 0px 2px #d6ff00, 
    1px 0px 1.5px #b1ce00, 
    5px 3px 15px #b1ce00, 
    5px 0px 15px rgba(182, 220, 0, 0.8), 
    5px 0px 125px rgba(182, 220, 0, 0.6), 
    20px 0vw 200px rgba(182, 220, 0, 0.4), 
    40px 0vw 200px rgba(182, 220, 0, 0.2);

  text-shadow: 
    1px 0px 2px #d6ff00, 
    1px 0px 2px #d6ff00, 
    1px 0px 2px #d6ff00, 
    1px 0px 1.5px #b1ce00, 
    5px 3px 15px #b1ce00, 
    5px 0px 15px rgba(182, 220, 0, 0.8), 
    5px 0px 125px rgba(182, 220, 0, 0.6), 
    20px 0vw 200px rgba(182, 220, 0, 0.4), 
    40px 0vw 200px rgba(182, 220, 0, 0.2);

  /* Extra support for WebKit-based browsers */
  -webkit-text-stroke: 0.5px #b1ce00; 
  
  padding-left: 15px;
}


.flicker-slow, .flicker-fast {
  animation: flicker 3s linear infinite;
  mix-blend-mode: lighten; /* Helps remove background artifacts */
  text-shadow: 5px 0px 15px rgba(214, 255, 0, 0.5); /* Adds glow effect */
}

.flicker-fast {
  animation: flicker 1s linear infinite;
}


@keyframes flicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    opacity: .99;
    
  }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
    opacity: 0.4;
  }
}


h2 {
  font: normal normal normal 80px/80px Abel;
  letter-spacing: 12px;
  color: #FFFFFF;
  text-transform: uppercase;
}

h4 {
  font-family: 'Knockout';
  font-size: 27px;
  line-height: 28px;
  margin-bottom: unset;
  color: #D6FF00;
}
 
p {
  font-family: 'Abel';
  font-size: 20px;
  line-height: 26px;
  color: #ffffff;
}


footer p{
  font-family: 'Abel';
  font-size: 14px;
  line-height: 18px;
  color: #ffffff;
  text-shadow: 0px 3px 6px #000000 ;
}

hr {
    border: 0; /* Remove default border */
    height: 20px; /* Adjust height based on image */
    background: url('assets/images/line.webp') center/contain no-repeat;
}


@media (max-width: 1500px) { 
  h1 { font-size: 178px; line-height: 170px; letter-spacing: 28px; } 
  h2 { font-size: 64px; line-height: 64px; } 
  h4 { font-size: 25px; line-height: 25px; } 
  p { font-size: 20px; line-height: 20px; } 
}
@media (max-width: 1200px) { 
  h1 { font-size: 176px; line-height: 170px; letter-spacing: 28px; } 
  h2 { font-size: 62px; line-height: 62px; } 
  h4 { font-size: 24px; line-height: 24px; } 
  p { font-size: 19px; line-height: 19px; } 
} /* xl */
@media (max-width: 992px)  { 
  h1 { font-size: 136px; line-height: 130px; letter-spacing: 24px; } 
  h2 { font-size: 48px; line-height: 50px; } 
  h4 { font-size: 24px; line-height: 24px; } 
  p { font-size: 19px; line-height: 19px; } 
} /* lg */
@media (max-width: 768px)  { 
  h1 { font-size: 120px; line-height: 86px; } 
  h2 { font-size: 42px; line-height: 42px; } 
} /* md */
@media (max-width: 576px)  { 
  h1 { font-size: 90px; line-height: 75px;} 
  h2 { font-size: 32px; line-height: 36px; } 
} /* sm */