/* GENERELT */

body{
    background-color:#172832; /* mørk baggrundsfarve */
    margin:0; /* fjerner standard margin fra browseren */
    overflow-x:hidden; /* forhindrer horizontal scroll */
    color:#e8e8e8; /* tekstfarve */
    font-family:"Avenir Next", sans-serif; /* skrifttype */
    line-height:1.8; /* afstand mellem tekstlinjer */

    display:flex; /* bruger flexbox layout */
    flex-direction:column; /* elementer placeres lodret */
    align-items:center; /* centrerer indholdet horisontalt */

    padding-bottom:50px; /* ekstra luft i bunden af siden */
}


/* MUSIKKNAP */

#musicBtn{
    position:fixed; /* knappen følger med når man scroller */
    top:20px; /* afstand fra toppen */
    right:20px; /* afstand fra højre side */

    background:#172832; /* baggrundsfarve */
    border:none; /* fjerner standard border */
    color:#e8e8e8; /* ikonfarve */

    padding:10px 12px; /* størrelse på knappen */
    border-radius:50%; /* gør knappen rund */

    cursor:pointer; /* ændrer musen til en klikmarkør */
    font-size:20px; /* størrelse på ikonet */

    z-index:1000; /* sørger for at knappen ligger ovenpå alt andet */
}


/* VIDEO */

video{
    width:70%; /* video fylder 70% af sidens bredde */
    height:auto; /* holder proportionerne korrekt */
}


/* SECTION */

section{
    width:80vw; /* sektionen fylder 80% af viewport bredden */
    min-height:80vh; /* minimum 80% af skærmens højde */

    display:flex; /* bruger flexbox */
    flex-direction:row; /* tekst og billede ved siden af hinanden */
    align-items:center; /* centrerer indholdet lodret */
    justify-content:space-between; /* skubber tekst og billede fra hinanden */

    gap:60px; /* afstand mellem tekst og billede */

    margin:10px auto; /* afstand mellem sektioner */

    transform:translateX(400%); /* starter uden for skærmen til højre */
    transition:transform 0.8s ease; /* animation når sektionen vises */
}


/* skifter side for storytelling */

section:nth-of-type(even){
    flex-direction:row-reverse; /* hver anden sektion bytter plads på tekst og billede */
    transform:translateX(-400%); /* starter uden for skærmen til venstre */
}


/* når sektionen får klassen "show" */

section.show{
    transform:translateX(0); /* flytter sektionen ind på skærmen */
}


/* BILLEDE */

section img{
    width:45%; /* billedet fylder 45% af sektionen */
    height:auto; /* holder proportionerne */
    object-fit:contain; /* sikrer billedet ikke bliver beskåret */
}


/* TEKSTBLOK */

.text-block{
    width:50%; /* tekst fylder 50% af sektionen */
    max-width:600px; /* maksimal bredde så teksten er nem at læse */

    opacity:0; /* teksten starter usynlig */
    transform:translateY(30px); /* starter lidt længere nede */

    transition:opacity 0.8s ease, transform 0.8s ease; /* animation */
}


/* når sektionen vises */

section.show .text-block{
    opacity:1; /* teksten bliver synlig */
    transform:translateY(0); /* flytter teksten op til normal position */
}


/* OVERSKRIFT */

.text-block h2{
    font-size:2rem; /* størrelse på overskrift */
    margin-bottom:5px; /* lille afstand til brødtekst */
    font-weight:600; /* lidt tykkere tekst */
}


/* BRØDTEKST */

.text-block p{
    margin-top:0; /* fjerner ekstra afstand over teksten */
    font-size:1.08rem; /* brødtekst størrelse */
}