@font-face {
    font-family: baloo-2;
    src: url(../fonts/baloo-2.ttf);
}

main {
  display: flex;
  width: 100%;
  justify-content: center;
}

main h1{
    font-family: baloo-2;
    font-weight: bold;
    position: absolute;
    left: 41%;
    top: 2%;
    font-size: 50px;
    color: #4D1717;
}

main video{
  width: 80%;
  display: flex;
  justify-content: center;
  position: relative;
  top: -110px;
  left: -30px;
}

main h3{
    color: white;
    text-shadow: 2px 2px 8px #aa3c4c;
    font-family: baloo-2;
    font-weight: 400;
    font-size: 22px;
    position: absolute;
    bottom: 4%;
    right: 4%;
    animation: puls 1.8s ease-in-out infinite;
}

@keyframes puls {
    0% {
      transform: scale(1);
      text-shadow: 2px 2px 8px #aa3c4c;
    }
    50% {
      transform: scale(1.08);
      text-shadow: 3px 3px 12px #ff6b81;
    }
    100% {
      transform: scale(1);
      text-shadow: 2px 2px 8px #aa3c4c;
    }
  }

  #info-1{
    position: absolute;
    left: 68%;
    top: 35%;
    width: 70px;
  }

  #info-2{
    position: absolute;
    left: 32%;
    top: 34%;
    width: 45px;
  }

  #info-3{
    position: absolute;
    left: 32%;
    top: 45%;
    width: 45px;
  }

  #info-4{
    position: absolute;
    left: 27.5%;
    top: 30%;
    width: 38px;
  }

  #infotekst-1 {
    position: absolute;
    top: 50%;
    width: 400px;
    left: 100vw; /* Start helt ude til højre for skærmen */
    transition: left 0.5s ease;
    padding: 1rem;
    font-size: 1.5rem;
    color: white;
    background: #4D1717;
    border-radius: 10px;
    z-index: 999;
    font-family: baloo-2;
  }
  
  #infotekst-1.aktiv {
    left: 60vw; /* Ind til synlig placering på skærmen */
  }
  
  #infotekst-2 {
    position: absolute;
    top: 74%;
    width: 400px;
    left: -100vw; /* Start helt ude til venstre for skærmen */
    transition: left 0.8s ease;
    padding: 1rem;
    font-size: 1.5rem;
    color: white;
    background: #4D1717;
    border-radius: 10px;
    z-index: 999;
    font-family: baloo-2;
  }
  
  #infotekst-2.aktiv {
    left: 15vw; /* Ind til synlig placering på skærmen */
  }
  
  #infotekst-3 {
    position: absolute;
    bottom: -100px; /* Start uden for skærmen */
    left: 30%;
    transform: translateX(-50%) translateY(100vh); /* Start under skærmen */
    transition: transform 0.6s ease;
    width: 400px;
    padding: 1rem;
    font-size: 1.5rem;
    color: white;
    background: #4D1717;
    border-radius: 10px;
    z-index: 999;
    font-family: baloo-2;
  }
  
  #infotekst-3.aktiv {
    transform: translateX(-50%) translateY(-105%); /* Flyt op på sin plads */
  }
  

  #infotekst-4 {
    position: absolute;
    top: 74%;
    width: 400px;
    left: -100vw; /* Start helt ude til venstre for skærmen */
    transition: left 0.8s ease;
    padding: 1rem;
    font-size: 1.5rem;
    color: white;
    background: #1D719A;
    border-radius: 10px;
    z-index: 999;
    font-family: baloo-2;
  }
  
  #infotekst-4.aktiv {
    left: 4vw; /* Ind til synlig placering på skærmen */
  }