.index-img {
  object-fit:cover; 
  filter: brightness(70%);
  height: 100vh;
}

.dropdown-item svg {
    width: 1em;        /* same height as text */
    height: 1em;
    margin-left: 0.4em;  /* space between text and icon */
    vertical-align: middle;
}

.inline-flag {
    display: inline-block;
    width: 1em;
    height: 1em;
}

.inline-flag svg {
    width: 100%;
    height: 100%;
    vertical-align: -0.1em;
}

/*this is the danceOmatic logo*/
.overlay-danceOmatic-logo {
  position: absolute;
  width: 13%; 
  height: auto;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);

}

.bling-container {
  position: absolute;
  width: 50%; 
  height: auto; 
  top: 55%;
  left: 37%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.overlay-coin {
  position: absolute;
  width: 5%; 
  height: auto; 
  top: 69%;
  left: 0%;
  transform: translate(-50%, -50%);
}

.svg-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none; /* Forhindrer, at SVG-containeren fanger musebegivenheder */
}

.zoomed-svg {
  position: relative;
  /* transform: scale(1.5) translateY(-20%); */
  transform-origin: top;
  overflow: hidden;
}

/* @media (max-width: 768px) {
  
  .zoomed-svg {
    transform: scale(1.5) translateY(-20%); 
    overflow: hidden;
    position: relative;
  }
  .overlay-danceOmatic-logo {
    top: 60%; 
    width: 30%;
    height: auto;
    transform: translate(-50%, -50%);
    left: 50%;
  
  }
} */

.container.position-relative {
  position: relative; /* Ensure position relative is maintained */
  z-index: 1; /* Ensure it stays in the correct stacking order */
}

.duplicate-paragraph {
  position: relative; /* Relative positioning for correct placement */
  z-index: 2; /* Higher z-index to appear above the SVG */
}



#bling.bling-visible {
  opacity: 1;
  animation: Bling 0.2s alternate ease-out forwards;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes Bling {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}


/* header image styling */
.header-img,
.header-img-bottom,
.header-img-top {
  width: 100%;
  height: 70vh; /* Default height */
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 700px) {
  .header-img,
  .header-img-bottom,
  .header-img-top {
    height: 40vh; /* Reduce height for smaller screens */
    object-position: top;
    margin-top: 7%;
  }
}


.item-appear {
  opacity: 0;
  transition: opacity 0.5s ease, top 0.9s ease;
  position: relative;
  top: 100px;
}

.visible {
  opacity: 1;
  top: 0%
}

/* Start Styling of link to teateravisen */

.link-container {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.3s, box-shadow 0.3s;
}
.link-container:hover {
  background-color: #fef7a2; /* Lys baggrund ved hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.link-image {
  width: 50px; /* Bredde på billedet */
  height: 50px; /* Højde på billedet */
  margin-right: 15px; /* Mellemrum mellem billede og tekst */
  object-fit: cover; /* Sikrer, at billedet fylder containeren */
  border-radius: 5px; /* Runde hjørner på billedet */
}
.text-with-icon {
    display: inline-flex;
    align-items: center;
}
.text-with-icon object {
    width: 1em; /* Adjust the width as needed */
    height: 1em; /* Adjust the height as needed */
    vertical-align: middle; /* Aligns the SVG vertically in the middle */
    margin-left: 0.2em; /* Space between text and icon */
}
/* Stop Styling of link to teateravisen */

/* zoom header image */
.scroll-container {
  height: 200vh; /* Makes the container taller than the viewport to allow scrolling */
}

.zoom-image {
  position: fixed;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
}

@keyframes zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}
/* Stop zoom header image */



/* tourplan styling */
.icon_calender {
  background: url(/assets/svg_elements/icon_calender.svg) no-repeat;
}


    @keyframes moveRight {
      0%, 100% {
        transform: translateX(0);
      }
      50% {
        transform: translateX(10px);
      }
    }

    .card-img-overlay .bi-arrow-right-short {
      animation: moveRight 1s infinite;
    }


/* style landingpage */



.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  width: 100%;
  height: 100%;
  grid-gap: 5px;
}



.grid-item1 {
  background-image: url("/img/terminusHorsensTogstation.png");
  background-size: cover;
  background-position: center;
  grid-column: 1/3;
  grid-row: 1;
  clip-path: polygon(0 0, 80% 0, 0% 100%, 0 100%);
}

.grid-item2 {
  background-image: url("/img/frikaAmarMain.jpg");
  background-size: cover;
  background-position: center;
  grid-column: 1/4;
  grid-row: 1;
  clip-path: polygon(54% 0%,
             100% 0%,
             40% 100%,
              1% 100%);
}

.grid-item3 {
  background-image: url("/img/dmaskine_kolding2017.jpg");
  background-size: cover;
  background-position: center;
  grid-column: 2/4;
  grid-row: 1;
  clip-path: polygon(102% 0%,
             100% 0%,
             100% 100%,
              0% 112%);
}


#Arcade #Screen {
  animation: flicker 0.1s infinite alternate;
}

@keyframes flicker {
  0% {
    opacity: 0.9;
    filter: contrast(100%) brightness(100%);
  }
  50% {
    opacity: 0.8;
    filter: contrast(110%) brightness(110%);
  }
  100% {
    opacity: 1;
    filter: contrast(90%) brightness(90%);
  }
}



/* Scroll-driven parallax on the landing page hero cards: the photo drifts
   downward slower than the page as each card travels through the viewport.
   Pure CSS -- no scroll listeners. The image is scaled up slightly to give the
   drift somewhere to go without exposing an empty edge, and the parent card
   clips the overflow. Browsers without scroll-driven animations, and visitors
   who have asked for reduced motion, simply get the still photo. */
/* `clip`, not `hidden`: an `overflow: hidden` box becomes a scroll container,
   which would make view() measure the image against the card instead of the
   viewport and freeze the animation. `hidden` stays as a fallback first. */
.card:has(.parallax-img) {
  overflow: hidden;
  overflow: clip;
}

.parallax-img {
  transform: scale(1.12);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .parallax-img {
      will-change: transform;
      animation: parallax-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    @keyframes parallax-drift {
      from {
        transform: scale(1.12) translateY(-4%);
      }
      to {
        transform: scale(1.12) translateY(4%);
      }
    }
  }
}

/* <picture> must not introduce an inline box between the card and its image,
   or the inline baseline gap shows up under the full-height hero. */
.card picture {
  display: block;
}

/* The wide artwork has no red band behind the headline, so white text lands on
   pale beige at only 3.4:1 -- under WCAG AA. This scrim lifts it to ~10:1.
   Portrait keeps the original poster, whose red band already gives 11:1, so
   the scrim is scoped to the landscape sources. */
@media (min-aspect-ratio: 1/1) {
  .hero-scrim::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, rgba(45, 8, 6, 0.60), rgba(45, 8, 6, 0.30) 35%, transparent 65%);
    pointer-events: none;
  }

  .hero-scrim > * {
    position: relative;
  }
}