/* RESET AF STANDARDSTIL */
* {
    margin: 0; /* Fjerner margin (afstand) fra alle elementer */
    padding: 5px; /* Tilføjer en generel padding på 5px for at skabe lidt afstand i alle elementer */
    box-sizing: border-box; /* Sikrer, at padding og border er inkluderet i elementernes samlede størrelse */
}

/* GENERELLE STILINDSTILLINGER */
/* Styling for body-elementet, som gælder for hele siden */
body {
    font-family: 'Jockey One', sans-serif; /* Sætter skrifttypen til 'Jockey One' for hele siden */
    background: linear-gradient(to bottom, #a9b4df, #848484, #6c6c6c); /* Baggrundsfarve med en lineær gradient fra lys lilla til grå */
    color: #5e4795; /* Sætter standard tekstfarven til en lilla nuance */
    margin: 0; /* Fjerner margin fra body-elementet */
    padding: 0; /* Fjerner padding fra body-elementet */
}

/* STIL FOR LOGO */
/* Styling for logo-containeren */
.logo-container {
    text-align: right; /* Justerer logoet til højre på skærmen */
    padding: 20px; /* Tilføjer padding på 20px rundt om logo-containeren */
    position: right; /* Denne regel virker ikke, da 'position' kræver værdier som 'absolute', 'relative', 'fixed' etc. */
}

/* Logo-billede */
.logo-img {
    width: 10%; /* Indstiller bredden af logoet til 10% af containeren */
    max-height: 100px; /* Begrænser højden på logoet til 100px */
    object-fit: cover; /* Sørger for at billedet fylder containeren korrekt uden at blive forvrænget */
}

/* Positionering af logo */
.logo-img {
    position: absolute; /* Placering af logoet i forhold til containeren */
    top: 20px; /* Placerer logoet 20px fra toppen */
    left: 20px; /* Placerer logoet 20px fra venstre */
    max-height: 100px; /* Begrænser højden på logoet */
}

.logo {
    width: 10.7rem;
}

/* Header styling */
header {
    display: flex; /* Bruger Flexbox for at arrangere header-indholdet */
    justify-content: space-between; /* Skubber elementerne til hver sin side af headeren */
}

.headerbyt {
    display: flex;
    flex-direction: row-reverse;
}

/* navbar */
header {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    background: #a9b4df;
    box-shadow: 0 5px 10px #6c6c6c;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 15rem;
    z-index: 99;
    
 }

 .navbar {
    display: flex;
    align-items: center;
 }
 
 header .navbar ul{
    list-style: none;
 }
 
 header .navbar ul li{
    position: relative;
    float: left;
 }
 
 header .navbar ul li a {
    text-decoration: none;
    font-size: 20px;
    padding: 18px;
    color: #5e4795;
    display: block;
 
 }
 
 header .navbar ul li a:hover{
    background-color: rgba(108, 108, 108, 0.4);
    color: #fff;
 }
 
 header .navbar ul li ul{
    position: absolute;
    left: 0;
    width: 300px;
    background-color: rgba(169, 180, 223, 0.87);
    display: none;
 }
 
 header .navbar ul li ul li{
    width: 100%;
    border-top: 1px solid rgba(0,0,0,0.1);
 }
 
 header .navbar ul li:focus-within > ul,
 header .navbar ul li:hover > ul{
    display: block;
 }
 
 #menu-bar{
    
    display: none;
 }
 
 header label{
    font-size: 20px;
    color: #ffffff;
    cursor: pointer;
    display: none;
 }

 
/* FOOTER */
/* Footer-styling - baggrund og tekstfarve */
footer {
    background-color: #313131; /* Sort baggrund */
    padding: 40px 20px; /* Giver luft omkring footer-indholdet */
    color: white; /* Hvid tekst */
    font-family: 'Jockey One', sans-serif; /* Angiver skrifttypen for footer */
}

/* FOOTER-CONTAINER */
/* Opsætning af containeren i footer for layout */
.footer-container {
    display: flex; /* Bruger Flexbox til at arrangere indholdet */
    flex-direction: column;
}

/* Generel footer styling - justering og tilpasning af elementer */
footer {
    display: flex; /* Bruger Flexbox for layout */
    justify-content: space-between; /* Skubber elementerne til hver sin side */
    align-items: flex-start; /* Justerer elementerne langs toppen */
    background-color: #313131; /* Sort baggrund */
    padding: 20px; /* Giver luft omkring indholdet */
    color: white; /* Hvid tekstfarve */
}

/* Footer sektion for andet indhold */
.footer-andet {
    flex: 1; /* Sørger for, at denne sektion kan tilpasse sig fleksibelt */
    margin-right: -13rem; /* Flytter denne sektion lidt til venstre */
}

/* Footer kontakt-sektion - justering af tekst */
.footer-kontakt {
    text-align: left; /* Venstrestiller teksten */
    flex: 1; /* Sørger for, at denne sektion kan tilpasse sig fleksibelt */
}

/* Styling af links i footer */
footer a {
    color: white; /* Sætter tekstfarven til hvid */
    text-decoration: none; /* Fjerner understregning fra links */
}

/* Footer link hover - Ændrer farven på links når de hoveres */
footer a:hover {
    color: #5e4795; /* Skifter farven på links til en lilla farve, når musen er over */
}

/* Sociale medie ikoner - Layout og justering */
.socials {
    display: flex; /* Bruger Flexbox til at arrangere ikonerne */
    gap: 1rem; /* Tilføjer mellemrum mellem de sociale ikoner */
    flex: 1rem; /* Tildeler et fleksibelt område til de sociale ikoner */
    flex-direction: row; /* Arrangerer ikonerne horisontalt */
    margin-top: 2.5rem; /* Giver lidt afstand fra toppen */
    margin-left: 1rem; /* Tilføjer margin til venstre */
}

/* Justerer margin for hver social ikon */
.footer-icon {
    margin-right: 10px; /* Giver lidt afstand mellem ikonerne til højre */
}

/* Footer logo - Justering af størrelse på footer logo */
.footerlogo {
    width: auto; /* Sætter bredden på logoet */
    height: 30px; /* Sætter højden på logoet */
}

/* Kontakt og Andet sektioner - Justering af tekst og fleksibilitet */
.kontakt, .andet {
    text-align: left; /* Venstrestiller teksten */
    /* flex: 1 1 300px; Sørger for at sektionerne kan tilpasse sig, min. bredde 300px */
}

/* Footer links - Basis styling for links i footer */
footer a {
    color: white; /* Sætter standard farve på links til hvid */
    text-decoration: none; /* Fjerner understregning fra links */
}

/* Footer link hover - Ændrer farven på links når de hoveres */
footer a:hover {
    color: #5e4795; /* Skifter farven på links til en lilla farve, når musen er over */
}

/* Footer span - Gør span tags til blok elementer */
footer span {
    display: block; /* Ændrer span til et blok-element, så det fylder hele linjen */
}


/* NYHEDSBREV SEKTION - Justering af layout */
.nyhedsbrev {
    display: flex; /* Bruger Flexbox til at arrangere indholdet */
    flex-direction: row-reverse; /* Arrangerer elementerne fra højre mod venstre */
    align-content: center; /* Centrerer indholdet vertikalt */
    justify-content: flex-start; /* Justerer indholdet til venstre */
}

/* Vilkår sektion - Justering af layout */
.vilkaar {
    display: flex; /* Bruger Flexbox til at arrangere indholdet */
    flex-direction: row-reverse; /* Arrangerer elementerne fra højre mod venstre */
    align-content: center; /* Centrerer indholdet vertikalt */
    justify-content: flex-start; /* Justerer indholdet til venstre */
}

/* FAQ sektion - Justering af layout */
.faq {
    display: flex; /* Bruger Flexbox til at arrangere indholdet */
    flex-direction: row-reverse; /* Arrangerer elementerne fra højre mod venstre */
    align-content: center; /* Centrerer indholdet vertikalt */
    justify-content: flex-start; /* Justerer indholdet til venstre */
}

/* RESPONSIVE DESIGN */
 /* Tablet */
@media (min-width: 601px) and (max-width: 991px) {
footer {
    padding: 30px 15px; /* Justerer padding på mobile enheder */
}

header{
    padding: 20px;
    height: 10rem;
 }
 

 .headerbyt {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
 }

 header label{
    display: block;
    font-size: 3rem;
    color: #5e4795;
    display: flex;
    align-items: center;
 }
 
 header .navbar{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: rgba(169, 180, 223, 0.87);
    border-top: 1px #6c6c6c;
    display: none;
 }
 
 header .navbar ul li{
    width: 100%;
    position: relative;
 }
 
 header .navbar ul li ul{
    position: relative;
    width: 100%;
 }
 
 header .navbar ul li ul li{
    background-color: rgba(169, 180, 223, 0.87);
 }
 
 header .navbar ul li ul li ul{
    width: 100%;
    left: 0;
 }
 
 #menu-bar:checked ~ .navbar{
    display: block;
 }

/* Footer logo - Justerer størrelsen på footer-logoet */
.footerlogo {
    width: 3rem; /* Sætter bredden på logoet */
    height: 3rem; /* Sætter højden på logoet */
}

/* Footer sektioner - Centrerer teksten på små skærme */
.kontakt, .andet {
    text-align: center; /* Centrerer teksten på små skærme */
}

/* FOOTER - Justering af baggrundsfarve, tekst og font */
footer {
    background-color: #313131; /* Sætter baggrundsfarven til mørk grå */
    color: white; /* Sætter tekstfarven til hvid */
    font-family: 'Jockey One', sans-serif; /* Sætter fonten */
}

/* Footer layout - Flex container til at arrangere indholdet vertikalt */
footer {
    display: flex; /* Aktiverer Flexbox layout */
    background-color: #313131; /* Sætter baggrunden til mørk grå */
    color: white; /* Sætter tekstfarven til hvid */
    flex-direction: column; /* Arrangerer indholdet i en kolonne */
    text-align: left; /* Venstrestiller al tekst */
}

/* Andet - Justering af sektionen 'andet' i footeren */
.andet {
    display: flex; /* Aktivere flexbox */
    flex-direction: column; /* Arrangerer børnene vertikalt */
    align-items: flex-start; /* Justerer børnene til venstre */
}

/* Margin på footer sektionen 'andet' */
.footer-andet {
    margin-top: 1rem; /* Tilføjer margin mellem sektioner */
}

/* Footer kontakt - Justering af kontaktsektionen */
.footer-kontakt {
    text-align: left; /* Venstrestiller teksten */
    flex: 1; /* Gør sektionen fleksibel så den kan tilpasse sig */
    display: flex; /* Aktivere flexbox for nemmere justering af indholdet */
    flex-direction: column; /* Arrangerer børnene vertikalt */
}

/* Sociale medie ikoner - Justering af placering og margin */
.socials {
    justify-content: center; /* Centrerer de sociale ikoner */
    margin-bottom: 1rem; /* Tilføjer margin nederst på ikonerne */
    margin-left: 2rem; /* Tilføjer margin til venstre på de sociale ikoner */
}

/* Kontakt sektion - Sørger for korrekt justering af kontaktindholdet */
.kontakt {
    text-align: left; /* Venstrestiller teksten */
    flex: 1; /* Gør sektionen fleksibel så den kan tilpasse sig */
} 
    }

/* Mobilskærme */
@media (max-width: 600px) {

    /* Styling af logo på mobilskærme */
    .logo {
        display: flex; /* Bruger flexbox til centrering af logo */
        justify-content: center; /* Centrerer logoet horisontalt */
        align-items: center; /* Centrerer logoet vertikalt */
        width: 6rem; /* Sætter en fast bredde på logoet */
        height: 7.7rem; /* Sætter en fast højde på logoet */
        margin: auto; /* Centrerer logoet på siden */
        padding-top: 1rem; /* Lidt padding på toppen af logoet */
        padding-bottom: 1rem; /* Lidt padding på bunden af logoet */
    }
    
    header{
        padding: 20px;
        height: 10rem;
        
     }
     
    
     .headerbyt {
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
     }
    
     header label{
        display: block;
        font-size: 3rem;
        color: #5e4795;
        display: flex;
        align-items: center;
     }
     
     header .navbar{    
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: rgba(169, 180, 223, 0.87);
        border-top: 1px   #6c6c6c;
        display: none;
        
     }
     
     header .navbar ul li{
        width: 100%;
     }
     
     header .navbar ul li ul{
        position: relative;
        width: 100%;
     }
     
     header .navbar ul li ul li{
        background-color: rgba(169, 180, 223, 0.87);
     }
     
     header .navbar ul li ul li ul{
        width: 100%;
        left: 0;
     }
     
     #menu-bar:checked ~ .navbar{
        display: block;
     }

/* FOOTER */
.footerlogo {
    width: 20px; /* Mindre logo på mobile enheder */
    height: 20px; /* Mindre logo på mobile enheder */
}

.kontakt, .andet {
    text-align: center; /* Centrerer teksten på små skærme */
}

footer {
    display: flex; /* Brug flexbox for layout */
    background-color: #313131; /* Sort baggrund */
    padding: 0.7rem; /* Polstring rundt om footer */
    color: white; /* Hvid tekstfarve */
    font-family: 'Jockey One', sans-serif; /* Bruger skrifttypen Jockey One */
    flex-direction: column; /* Arrangerer elementerne i en kolonne */
    text-align: left; /* Venstrestiller teksten */
}

.andet {
    display: flex; /* Bruger flexbox for at arrangere elementerne */
    flex-direction: column; /* Arrangerer børnene i en kolonne */
    align-items: flex-start; /* Venstrestiller børnene */
}

.footer-andet {
    margin-top: 1rem; /* Giver mellemrum øverst på denne sektion */
}

.footer-kontakt {
    text-align: left; /* Venstrestiller kontakten */
    flex: 1; /* Sørger for at disse sektioner kan tilpasse sig */
}

.socials {
    display: flex; /* Bruger flexbox til sociale medier */
    gap: 1rem; /* Mellemrum mellem ikonerne */
    flex: 1rem; /* Lader denne sektion tage op plads */
    flex-direction: row; /* Arrangerer ikonerne horisontalt */
    margin-top: 1rem; /* Giver margin øverst */
    margin-left: -0.3rem; /* Justerer venstremargen */
}

.footer-icon {
    margin-right: 10px; /* Giver margen på højre side af ikonene */
}

.footerlogo {
    width: 2rem; /* Sætter bredden på logoet */
    height: 2rem; /* Sætter højden på logoet */
}

.kontakt {
    text-align: left; /* Venstrestillet tekst */
    flex: 1; /* Sørger for at disse sektioner kan tilpasse sig */
} 
    }