* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


:root {
    --primary-color:#DEE2A4;
    --primary-font: "Lao Sangam MN";
    --secundary-font: "Roca";
 }

 @font-face {
    font-family: 'Lao Sangam MN';
    src: url('fonts/Lao Sangam MN.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}




/* webskærm */
@media only screen and (min-width: 1100px)  {
    .burgermenu {
        display: none;
    }
    header {
        position: fixed;
        top:0;
        left:5px;
        right:5px;
        width: 100%;
        z-index: 1000;
        background: transparent;
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-transform: uppercase;
    }
    
    header .logo{
        margin-left: 10px;
        padding-left: 0;
    }
    
    .logo{
        width: 10vw;
    
    }
    
    header .navbar ul {
        list-style: none;
    }
    
    header .navbar ul li {
        position: relative;
        float: left;
    }
    
    
    /* Styling af hovedmenu og undermenu */
    header .navbar ul li a {
        box-sizing: border-box;
        text-decoration: none;
        font-size: 15px;
        font-family: 'Lao Sangam MN', sans-serif;
        padding: 18px 70px;
        color: white;
        display: block;
        text-align: center;
    }
    
    header .navbar ul li a:hover {
        background: rgba(0,0,0,0.1);
        color: #fff;
    }
    
    /* Første niveau af undermenu */
    header .navbar ul li ul {
        box-sizing: border-box;
        position: absolute;
        left: 0;
        width: 200px; /* Ensartet bredde */
        background: transparent; /* Let baggrundsfarve for synlighed */
        display: none;
        padding: 0;
    }
    
    header .navbar ul li ul li {
        width: 100%; /* Ensartet bredde */
        border-top: 1px solid rgba(255, 255, 255, 0.2); /* Lysere kant for synlighed */
    }
    
    /* Styling af undermenu links */
    header .navbar ul li ul li a {
        padding: 10px 0; /* Juster padding for centrering */
        color: white; /* Sørger for, at teksten er synlig */
        text-align: center;
        width: 100%; /* Fyld hele bredden af menuen */
        display: block;
        box-sizing: border-box;
    }
    
    header .navbar ul li ul li a:hover {
        background: rgba(141, 137, 137, 0.2); /* Lysere hover for synlighed */
    }
    
    /* Næste niveau af undermenu */
    header .navbar ul li ul li ul {
        left: 100%; /* Justering til højre for første undermenu */
        top: 0;
        width: 200px; /* Ensartet bredde */
        background: transparent; /* Ensartet baggrund */
        display: none;
    }
    
    header .navbar ul li ul li ul a {
        padding: 10px 0; /* Juster padding for centrering */
        color: white; /* Sørger for synlig tekst */
        text-align: center;
        width: 100%; /* Fyld hele bredden af menuen */
        display: block;
        box-sizing: border-box;
    }
    
    /* Hover-effekt til at vise undermenuer */
    header .navbar ul li:hover > ul,
    header .navbar ul li ul li:hover > ul {
        display: block;
    }
    
    #menu-bar {
        display: none;
    }
    
    header label {
        font-size: 20px;
        color: #333;
        cursor: pointer;
        display: none;
    }

    body {
    /* font-family:"Roca"; */
    font-family: 'Lao Sangam MN', sans-serif;
    background-color: black;
    color: white;
    text-align: center;
    padding: 20px;
}

main {
 padding-bottom: 10%;   
 padding-top: 10%;
}

.om-os {
    max-width: 800px;
    margin: 0 auto;
    margin-top: 5%;
}

section.billeder {
    display: flex;
    justify-content: center;
    gap: 10px; /* den lille luft mellem billederne */
    margin-bottom: 20px;
}

img.image {
    width: 50%; /* Adjust to fit 3 images horizontally */
    object-fit: cover;
   
}
 /* fjerner slideshow */
.container{
    display: none;
}

h1 {
    color: var(--primary-color, #DEE2A4); 
    font-size: 2rem;
    margin-bottom: 15px;
    font-family: var(--secundary-font);
    margin-top: 50px;
}

p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 15px;
    
}

.footer {
    background-color:black; 
    color: white; 
    text-align: center; 
    padding: 20px; /* luft omkring footer */
    position: relative; /* får den til at blive i midten */
    padding-top: 90px;
    border-top: 1px solid var(--primary-color);
}

.footer p {
    margin: 5px 0; /* linjeafstand mellem de forskellige p'er */
    font-size: 0.9rem; 
}



.social-icons {
    margin-top: 10px;
}

.social-icons a {
    margin: 0 10px;
    color: white; 
    font-size: 1.5rem; 
    text-decoration: none;
   
}

.social-icons a:hover {
    color: var(--primary-color); /* Highlight color on hover */
}
}



















/* tablet */
@media only screen and (min-width: 600px) and (max-width: 1099px) {
    header {
        position: fixed;
        top:0;
        left:5px;
        right:5px;
        width: 100%;
        z-index: 1000;
        background: transparent;
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-transform: uppercase;
    }
    
    header .logo{
        margin-left: 10px;
        padding-left: 0;
    }
    
    .logo{
        width: 10vw;
    }
    
    .navbar {
        display: none;
    }
    
    nav{
        height: 60px;
        background-color: transparent;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    
    
    /* styling af tekst */
    nav a{
        height: 100%;
        padding: 0 20px;
        display: flex;
        align-items: center;
        text-decoration: none;
        color: black;
    }
    
    nav a:hover {
        background: rgba(0,0,0,0.5);
            color: #fff;
    }
    
    
    /* ikoner */
    nav svg .streger {
        fill: white;
    }
    
    nav svg .kryds {
        fill: rgb(0, 0, 0);
    }
    
    /* fjerner checkboks */
    #sidebar-active {
        display: none;
    }
    
    /* fjerner checkboks  */
    .open-sidebar-button, .close-sidebar-button {
        display: none;
    }
    
    
    /* styling for mobil specifikt */
    
    /* den boks der folder ud når man klikker de tre prikker */
    /* styling af selve burgermenuen (når man har klikket på stregerne) */
        .links-container{
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            background-color: var(--primary-color);
    
           flex-direction: column; /* vertikale menupunkter */
           align-items: flex-start; /* paceret i venstre side af container */
    
           position: fixed; /* nav baren følger med ved scroll */
           top: 0;
           right: -100%; /* boksen er per automatik skjult når den er -100% */
           z-index: 10;
           width: 300px;
           color: black;
    
           box-shadow: -5px 0 5px rgba(0,0,0,0.25);
           transition: 1s ease-out; /* smooth når man åbner baren */
    
        }
    
    nav a {
        box-sizing: border-box;
        height: auto;
        width: 100%;
        padding: 20px 30px;
        justify-content: flex-start; 
    }
    
    .open-sidebar-button, .close-sidebar-button {
        padding: 20px;
        display: block;
    }
    
    /* ~ styler links-container hvis det er søskende til #sidebar-active */
    /* pseudo klassen :cheked styler/reagerer når ikonet er "checked" altså når vi trykker på de tre streger*/
    #sidebar-active:checked ~ .links-container{
    right: 0;  /* når værdien er 0 er menuen fremme når den er -100  */
    }
    
    /* sørger for at vi klikker ud fra menu'en når vi klikker et andet sted på siden */
    #sidebar-active:checked ~ #overlay{
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
    }
    
    
    header label {
        font-size: 20px;
        color: #333;
        cursor: pointer;
        display: none;
    }
    
    #menu-bar {
        display: none;
    }
  


    body {
        font-family: 'Lao Sangam MN', sans-serif;
        background-color: black;
        color: white;
        text-align: center;
        padding: 20px;
    }
    
    main {
        padding-bottom: 10%;   
        padding-top: 10%;
       }
       
    
    .om-os {
        max-width: 700px;
        margin: 0 auto;
        margin-top: 60px;
        margin-bottom: 90px;
        margin-left: 15%;
        margin-right: 15%;
    }

    section.billeder {
        display: flex;
        justify-content: center;
        gap: 2%;
        margin-bottom:5%;
    }

    img.image {
        width: 45%; /* Adjust image width for tablet */
        object-fit: cover;
    }

    /* fjerner slideshow */
    .container{
        display: none;
    }

    h1 {
        color: var(--primary-color, #DEE2A4);
        font-size: 1.8rem;
        margin-bottom: 10px;
        font-family: var(--secundary-font);
        margin-top: 40px;
    }
    p {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 10px;
    }
    .footer {
        background-color: black;
        color: white;
        text-align: center;
        padding: 15px;
        position: relative;
        padding-top: 60px;
        border-top: 1px solid var(--primary-color);
    }
    .footer p {
        margin: 5px 0;
        font-size: 0.9rem;
    }
    .social-icons {
        margin-top: 10px;
    }
    .social-icons a {
        margin: 0 8px;
        color: white;
        font-size: 1.5rem;
        text-decoration: none;
    }
    .social-icons a:hover {
        color: var(--primary-color);
    }
}







/* Mobil */
@media only screen and (max-width: 600px) {
    header {
        position: fixed;
        top:0;
        left:5px;
        right:5px;
        width: 100%;
        z-index: 1000;
        background: transparent;
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-transform: uppercase;
    }
    
    header .logo{
        margin-left: 10px;
        padding-left: 0;
    }
    
    .logo{
        width: 15vw;
    }
    
    .navbar {
        display: none;
    }
    
    nav{
        height: 60px;
        background-color: transparent;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    
    
    /* styling af tekst */
    nav a{
        height: 100%;
        padding: 0 20px;
        display: flex;
        align-items: center;
        text-decoration: none;
        color: black;
    }
    
    nav a:hover {
        background: rgba(0,0,0,0.5);
            color: #fff;
    }
    
    
    /* ikoner */
    nav svg .streger {
        fill: white;
    }
    
    nav svg .kryds {
        fill: rgb(0, 0, 0);
    }
    
    /* fjerner checkboks */
    #sidebar-active {
        display: none;
    }
    
    /* fjerner checkboks  */
    .open-sidebar-button, .close-sidebar-button {
        display: none;
    }
    
    
    /* styling for mobil specifikt */
    
    /* den boks der folder ud når man klikker de tre prikker */
    /* styling af selve burgermenuen (når man har klikket på stregerne) */
        .links-container{
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            background-color: var(--primary-color);
    
           flex-direction: column; /* vertikale menupunkter */
           align-items: flex-start; /* paceret i venstre side af container */
    
           position: fixed; /* nav baren følger med ved scroll */
           top: 0;
           right: -100%; /* boksen er per automatik skjult når den er -100% */
           z-index: 10;
           width: 300px;
           color: black;
    
           box-shadow: -5px 0 5px rgba(0,0,0,0.25);
           transition: 1s ease-out; /* smooth når man åbner baren */
    
        }
    
    nav a {
        box-sizing: border-box;
        height: auto;
        width: 100%;
        padding: 20px 30px;
        justify-content: flex-start; 
    }
    
    .open-sidebar-button, .close-sidebar-button {
        padding: 20px;
        display: block;
    }
    
    /* ~ styler links-container hvis det er søskende til #sidebar-active */
    /* pseudo klassen :cheked styler/reagerer når ikonet er "checked" altså når vi trykker på de tre streger*/
    #sidebar-active:checked ~ .links-container{
    right: 0;  /* når værdien er 0 er menuen fremme når den er -100  */
    }
    
    /* sørger for at vi klikker ud fra menu'en når vi klikker et andet sted på siden */
    #sidebar-active:checked ~ #overlay{
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
    }
    
    
    header label {
        font-size: 20px;
        color: #333;
        cursor: pointer;
        display: none;
    }
    
    #menu-bar {
        display: none;
    }
    
main {
    padding-bottom: 10%;   
    padding-top: 10%;
   }
    
body {
        font-family: 'Lao Sangam MN', sans-serif;
        background-color: black;
        color: white;
        text-align: center;
        padding: 10px;
    }

.om-os {
        max-width: 100%;
        margin: 0 auto;
        margin-top: 40px;
        margin-left: 10%;
        margin-right: 10%;
        margin-bottom: 20%;
    }


   
/* fjerner alm. billeder der ikke er i slideshow */
    .billeder{
        display: none;
    }

/* slideshow styling starter her*/
    .container {
        padding: 2rem;
    }

    .slider-wrapper {
        position: relative;
        max-width: 48rem;
        margin: 0 auto;  /* top og bund = 0, højre venstre = auto */
    }
    
.slider {
    display:flex;
    aspect-ratio:  16/9;
    overflow-x:auto;  /* den der gør det muligt for os at scrolle videre til de billeder der er udenfor vores container */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    box-shadow: 0 1.5rem 3rem -0.75rem  hsla(0,0%,0%,0.25);
}

.slider img {
    flex: 1 0 100%;  /* 1 = billederne vil have samme størrelse inde i containeren, 0 = alle billeder vil beholde den bredde de har brug for og ikke wrappe contentet. 100% = billedet udfylder hele containeren */
    scroll-snap-align: start; /* gør at vi kommer til nyt billede når vi slider */
    object-fit:cover; /* får billedet til at udfylde comntaineren, uden at forvride det (kan croppe billedet) */
}

/* de tre prikker */
.slider-nav {
    display: flex;
    column-gap: 1rem;
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    padding-top: 3%;
}

.slider-nav a{
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: white;
    opacity: 0.75;
    transition: opacity ease 25ms; /* påvirker hover effekten */
}

.slider-nav a:hover
{
    opacity: 1;
}


/* tekst */
    h1 {
        color: var(--primary-color, #DEE2A4);
        font-size: 1.5rem;
        margin-bottom: 10px;
        font-family: var(--secundary-font);
        margin-top: 30px;
    }
    p {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 10px;
    }


    /* footer */
    .footer {
        background-color: black;
        color: white;
        text-align: center;
        padding: 10px;
        position: relative;
        padding-top: 50px;
        border-top: 1px solid var(--primary-color);
    }
    .footer p {
        margin: 5px 0;
        font-size: 0.9rem;
    }
    .social-icons {
        margin-top: 10px;
    }
    .social-icons a {
        margin: 0 5px;
        color: white;
        font-size: 1.5rem;
        text-decoration: none;
    }

    .social-icons a:hover {
        color: var(--primary-color);
    }
    }