/* ANGEL FONT */
@font-face {
  font-family: 'ANGEL';
    src: url('../shared/fonts/Angel.ttf') format('truetype'),
      url('../shared/fonts/Angel.woff') format('woff'),
      url('../shared//fonts/Angel.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* GERMANICA FONT */
@font-face {
  font-family: 'GERMANICA';
    src: url('../shared/fonts/Fluted\ Germanica.ttf') format('truetype'),
      url('../shared/fonts/Fluted\ Germanica.woff') format('woff'),
      url('../shared//fonts/Fluted\ Germanica.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* ELGETHY FONT */
@font-face {
  font-family: 'ELGETHY';
    src: url('../shared/fonts/Elgethy\ Bold\ Oblique.ttf') format('truetype'),
      url('../shared/fonts/Elgethy-Bold-Oblique.woff') format('woff'),
      url('../shared//fonts/Elgethy-Bold-Oblique.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* LANDSDOWNE FONT */
@font-face {
  font-family: 'LANDSDOWNE';
    src: url('../shared/fonts/Landsdowne.ttf') format('truetype'),
      url('../shared/fonts/Landsdowne.woff') format('woff'),
      url('../shared//fonts/Landsdowne.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* ZAMN BG */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  background: url("../shared/zamnbg.png") center/cover no-repeat fixed;
}

/* Containing div to keep banner centered */
.banner-container {
  position: relative;
  width: 100%;
  max-width: 550px;
  margin: auto;
}

/* The actual SVG */
.banner {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* RADIO ANGEL IG */
.logo-link {
  position: absolute;
  top: 0%;
  left: 49%;
  transform: translateX(-50%);
  width: 10%;
  aspect-ratio: 1/1;
  display: block;
  background: rgba(255,0,0,0);
  z-index: 10;
  cursor: pointer;
}

.logo-link:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1); /* Slight white overlay */
    transition: all 0.2s; /* Smooth transition for all properties */
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
}

/* New container for the dynamic banner */
.dynamic-banner-container {
    display: flex;
    justify-content: center;
    align-items: center;
     width: 100%;
    max-width: 700px; /* Adjust this to control the max width of the banner */
    margin-bottom: 0; /* Remove bottom margin */
}

/* The dynamic banner image itself */
.dynamic-banner {
    width: 100%; /* Make the image fill its container */
    height: auto;
    display: block;
}

/* STATUES CRUMBLE */
.sloganbox {
    font-family: 'GERMANICA', sans-serif;
    color: #9BA546;
    -webkit-text-stroke: 0.2px black;
    text-stroke: 0.5px black;
    
    text-align: center;
    padding: 30px 0;
    margin: 20px 0;
    
    /* Scale with container like your images */
    width: 100%;
    max-width: 700px; /* Same as your image containers */
    font-size: clamp(24px, 4vw, 48px); /* Responsive font with limits */
}

/* cover container */
.image-container {
  display: flex; /* Use flexbox for easy centering */
  justify-content: center; /* Horizontally center the image */
  width: 100%;
  max-width: 700px; /* Adjust this to control the max width of the container */
  margin: 10px 0; /* Add some space above and below */
}

/* cover */
.centered-image {
  width: 100%; /* The image will fill its container */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Removes any extra space below the image */
}

/* Small image container */
.small-image-container {
    display: flex;
    justify-content: flex-start; /* Left-aligns instead of center */
    width: 100%;
    max-width: 700px; /* Same as your other containers */
    margin: 10px auto; /* Space above and below */
    padding: 0; /* Make sure no padding */
}

.small-image-container a {
    display: inline-block; /* Keeps the link tight around the image */
    cursor: pointer; /* Ensures pointer cursor on hover */
}

.small-image-container a:hover .small-image {
    opacity: 0.8; /* Optional: slight fade on hover */
    transition: opacity 0.2s; /* Smooth transition */
}

/* The small image itself */
.small-image {
    width: 90px; /* Fills its container */
    height: auto; /* Maintains aspect ratio */
    /*transform: scale(0.3); /* This will make it 30% of the original size */
    display: block;
    padding: 0; /* Make sure no padding */
}

/* Style for RAintro text */
#RAintro {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 700px; /* Same as your other containers */
    margin: 10px 0; /* Consistent spacing */
    padding: 20px; /* Add some internal padding */
    text-align: center;
    margin-top: 0; /* Remove top margin */
    
    /* Add styling for the text itself */
    font-family: 'ELGETHY', sans-serif; /* or whatever font you prefer */
    font-size: clamp(14px, 3.5vw, 30px); /* Responsive font size */
    font-weight: bold; /* Makes the font bold */
    color: #333; /* or whatever color you want */
    line-height: 1; /* Better readability */
}

/* buttons */
.download-button {
  font-family: 'ANGEL', sans-serif;
  background-color: #5046a5;
  color: white;
    -webkit-text-stroke: 0.10px black; /* outline thickness + color */
  border-radius: 8px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
}

/* correct button size */
.download-button.secondary {
  font-size: clamp(16px, 2vw, 22px);
  padding: 14px 28px;
}

/* WORDS FROM FXSHMN */
#fxshmn-words {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 700px;
    margin: 10px 0;
    padding: 20px;
    text-align: center;
    
    font-family: 'ELGETHY', sans-serif;
    font-size: clamp(14px, 3.5vw, 30px);
    font-weight: bold;
    color: #333;
    line-height: 1;
}

/* fxshmnwords1 */
#fxshmnwords1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 700px; /* Same as your other containers */
    margin: 10px 0; /* Consistent spacing */
    padding: 20px; /* Add some internal padding */
    text-align: center;
    margin-top: 0; /* Remove top margin */
    
    /* Add styling for the text itself */
    font-family: 'LANDSDOWNE', sans-serif; /* or whatever font you prefer */
    font-size: clamp(14px, 3.5vw, 38px); /* Responsive font size */
    color: #333; /* or whatever color you want */
    line-height: 1; /* Better readability */
}

/* Video container */
.video-container {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 700px;
    margin: 20px auto;
    position: relative;
}

/* Responsive video iframe */
#youtube-video {
    width: 100%;
    max-width: 560px;
    height: 315px;
    border-radius: 8px; /* Optional: rounded corners */
}

/* fxshmnwords2 */
#fxshmnwords2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 700px; /* Same as your other containers */
    margin: 10px 0; /* Consistent spacing */
    padding: 20px; /* Add some internal padding */
    text-align: center;
    margin-top: 0; /* Remove top margin */
    
    /* Add styling for the text itself */
    font-family: 'LANDSDOWNE', sans-serif; /* or whatever font you prefer */
    font-size: clamp(14px, 3.5vw, 38px); /* Responsive font size */
    color: #333; /* or whatever color you want */
    line-height: 1; /* Better readability */
}

/* credits*/
#credits {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 700px; /* Same as your other containers */
    margin: 10px 0; /* Consistent spacing */
    padding: 20px; /* Add some internal padding */
    text-align: center;
    margin-top: 0; /* Remove top margin */
    
    /* Add styling for the text itself */
    font-family: 'LANDSDOWNE', sans-serif; /* or whatever font you prefer */
    font-size: clamp(14px, 3.5vw, 38px); /* Responsive font size */
    color: #333; /* or whatever color you want */
    line-height: 1; /* Better readability */
}

.bottom-logo {
  position: sticky;
  bottom: 5px; /* Reduce from 10px to move it lower */
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: auto;
  z-index: 100;
}

/* Responsive scaling */
@media (max-width: 768px) {
    .banner-container {
        max-width: 90vw;
    }
    .image-container {
        max-width: 90vw; /* Adjust for smaller screens */
  }
    #RAintro, #fxshmn-words1, #fxshmn-words  {
        max-width: 90vw; /* Match your other responsive elements */
        padding: 15px;
    }
    
    .video-container {
        max-width: 90vw;
    }

    #youtube-video {
        height: calc(90vw * 9/16); /* Maintains 16:9 aspect ratio */
    }
}