/* GLOBAL RESET */
* {
    margin: 0;           /* Fjern standardmargener på alle elementer */
    padding: 0;          /* Fjern standardpadding på alle elementer */
    box-sizing: border-box; /* Inkluder padding og border i elementets bredde/højde */
}

/* BAGGRUND*/
#background {
    position: relative;  /* Relativ positionering: bruges som reference for absolut placerede børn */
    height: 100vh;       /* Fylder hele viewport-højden */
    overflow: hidden;    /* Skjuler alt indhold der går udenfor containeren */
}

#background img {
    position: absolute;  /* Absolut placeret i forhold til #background */
    top: 50%;            /* Flytter toppen 50% ned fra containerens top */
    left: 50%;           /* Flytter venstre kant 50% ind fra containerens venstre kant */
    min-width: 100vw;    /* Mindst 100% af viewport-bredden */
    min-height: 100vh;   /* Mindst 100% af viewport-højden */
    width: auto;         /* Behold proportioner */
    height: auto;        /* Behold proportioner */
    transform: translate(-50%, -50%); /* Centrerer billedet præcist */
    z-index: -1;         /* Ligger bag alt andet indhold */
    object-fit: cover;   /* Fylder området uden at deformere billedet */
}

/* OVERLAY (INDHOLD)*/
.overlay {
    position: absolute;  /* Absolut placeret i forhold til nærmeste relative forælder (#background) */
    top: 0;              /* Starter ved toppen af containeren */
    left: 0;             /* Starter ved venstre kant */
    z-index: 1;          /* Ligger ovenpå baggrundsbilledet */
    width: 100vw;        /* Fylder hele viewport-bredden */
    height: 100vh;       /* Fylder hele viewport-højden */
}

/* Overskrift H2 */
.overlay h2 {
    font-family: "Exo 2", sans-serif; /* Font til overskrift */
    color: white;
    text-align: center;
    font-size: 60px;     
    margin-top: 10vh;    /* Afstand fra toppen */
}


/* STAR NAME INPUT */
.star-name-container {
    text-align: center;  /* Centrer inputfeltet */
    margin-top: 10vh;    /* Afstand fra H2 */
}

#starName {
    font-size: 24px;     
    padding: 1.5vh 2vw;  /* Indvendig afstand */
    width: 30vw;         /* Bredde */
    text-align: center;
    border-radius: 3vh;  /* Afrundede hjørner */
    border: 0.5vh solid #12D7E1; /* Lys blå kant */
    outline: none;       /* Fjerner den blå kant ved fokus */
}

/* KEYBOARD BUTTONS */
.keyboard {
    margin-top: 15vh;    /* Afstand fra inputfelt */
}

.row {
    margin-bottom: 1vh;  /* Lidt luft mellem rækker */
}

button {
    font-size: 20px;           
    padding: 1.5vh 2vw;        /* Responsiv padding */
    margin: 0.3vh;             /* Lidt mellemrum mellem knapper */
    border-radius: 2vh;        /* Afrundede hjørner */
    cursor: pointer;           /* Pointer ved hover */
    background-color: #213768; /* Blå baggrund */
    color: white;
    border: 0.2vh solid #12D7E1; /* Lys blå kant */
    transition: background-color 0.3s ease; /* Glidende effekt på hover */
}

button:hover {
    background-color: #12D7E1; /* Lysere blå */
    color: #213768;            /* Skift tekstfarve */
}

/* NAVIGATION PILE*/
.navigation-arrows {
    position: fixed;     /* Holder pile fast nederst på skærmen, uafhængigt af scroll */
    bottom: 2vh;         /* Afstand fra bunden af viewport */
    width: 100vw;        /* Fylder hele bredden */
    display: flex;       /* Flexbox for placering af pile */
    justify-content: space-between; /* Venstre og højre pil */
    padding: 0 5vw;      /* Afstand fra kanterne */
    z-index: 10;         /* Ovenpå overlay-indhold */
}

.navigation-arrows img {
    width: 10vw;         
    height: auto;
    cursor: pointer;
}


/* TRANSITION VIDEO*/
video {
    position: fixed;     /* Fylder hele skærmen og følger med ved scroll */
    top: 0;              /* Starter øverst */
    left: 0;             /* Starter ved venstre kant */
    width: 100vw;        /* Fylder hele viewport-bredden */
    height: 100vh;       /* Fylder hele viewport-højden */
    z-index: 9999;       /* Ligger over alt andet */
    object-fit: cover;   /* Fylder skærmen uden deformation */
}