*{
    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;
        font-display: swap;
    
 }
  

/* webskærm */
@media only screen and (min-width: 1100px) {
body {
    font-family: 'Lao Sangam MN', sans-serif;
    text-decoration: none;
    background-position: center;
    text-align: center;
    background-color: black;
    min-width: 100vw;
    line-height: 2rem;
}

main {
    background-image: url(../img/forsidetop\(1\).webp);
    background-position: initial;
    background-size: 100vw;
    min-width: 100vw !important;
    background-repeat: no-repeat;
}


a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: none; /* Fjerner den underliggende streg */
    color: inherit; /* Arver farven fra omgivende elementer */ 
}

.section {
    margin: 5vh auto;
    padding: 2vh 5vw;
    max-width: 80vw;
    text-align: center;
    line-height: 2rem;
}


/* Styling af header */
header {
    position: fixed;
    top:0;
    left:5px;
    right:5px;
    width: 100%;
    z-index: 1000;
    background: transparent;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-transform: uppercase;
}

/* Header logo */
header .logo{
    margin-left: 10px;
    padding-left: 0;
}

.logo{
    width: 10vw;

}

/* Styling af hovedmenupunkterne */
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;
}

/* Hovereffekt til menupunkterne */
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(255, 255, 255, 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;
}

/* Gemmer checkboxen */
#menu-bar {
    display: none;
}


header label {
    font-size: 20px;
    color: #333;
    cursor: pointer;
    display: none;
}

/* Fjerner navigationsbar/burgermenu til mobil og tablet for desktop */
.burgermenu{
display: none;
}

.top {
    background-image: linear-gradient(to bottom, transparent 60%, black 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-width: 100vw; /*skal muligvis ændres */
    min-height: 100vh;
    display: flex;
    flex-direction: column; /* Gør det muligt at arrangere børnene lodret */
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Styling af forsidebillede */
.forsidelogo {
    position: relative;
    width: 40vw; /* Juster størrelsen på billedet */
    margin-top: 10vh;
    z-index: 1; /* Sørger for, at billedet er foran baggrunden */
}

/* Styling af knap */
.button {
    font-size: 1vw;
    font-family: 'Lao Sangam MN', sans-serif;
    border-radius: 5%;
    padding: 2vh 3vw;
    background-color: transparent;
    color: white !important;
    border: 2px solid white;
    transition-duration: 0.4s;
    z-index: 1; /* Sørger for, at knappen er foran baggrunden */
}

.button a {
    color: white !important;
}

.button:hover {
    background-color: rgba(211, 211, 211, 0.318); /* Ændring ved hover */
    color: white;
}

/*styling af sektioner, overskrifter og billeder*/
h2, h1{
    font-family: roca;
    padding-bottom: 10px;
    font-size: 3vw;
    color: #DEE2A4;
    line-height: 3.5rem;
}

.sektion1{
    color:#fff;
    background: black;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 5vh 5vw;
    min-width: 100%;
}
#sektion1{
font-size: 3vh;
text-align: center;
}

.golfboldbillede{
    max-height: 80vh;
    padding-left: 150px;
    padding-bottom: 100px;
}

.sektion2{
    color:#fff;
    background: black;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-width: 100%;
    padding: 5vh 5vw;
}
#sektion2{
font-size: 3vh;
text-align: center;
}

#golfsimulator{
    width: 45rem;
}

.sektion3{
    color:#fff;
    background: black;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 5vh 5vw;
    min-width: 100%;
}

.socialemedier{
    height: 65vh;
    margin-top: 15vh;
    margin-bottom: 15vh;
}



.break {
    display: block; /* Sætter "tekst" på en ny linje */
}

/*farver enkelte tekst-stykker med klassen ".hightligt"*/
.highlight{
    color: #DEE2A4;
    font-weight: bold;
}

/*gør tekst i klassen "lys" hvid*/
.lys{
    color: white;
}


/*styling af footer*/
.footer {
    background-color:black; /* Dark background */
    color: white; /* White text color */
    text-align: center; /* Center text horizontally */
    padding: 2vh; /* Add some space inside the footer */
    position: relative; /* Optional, for layout control */
    border-top: 1px solid var(--primary-color);

}
/*styling af tekst*/
.footer p {
    margin: 5px 0; /* Space between footer text lines */
    font-size: 0.9rem; /* Slightly smaller text */
}


/*styling af ikoner i footer*/
.social-icons {
    margin-top: 10px;
}

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

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

}
/*styling til tablet*/
@media screen and (max-width: 1099px){    
    body {
        font-family: 'Lao Sangam MN', sans-serif;
        text-decoration: none;
        background-position: center;
        text-align: center;
        background-color: black;
        min-width: 100vw;
    }
    
    main {
        background-image: url(../img/forsidetop\(1\).webp);
        background-position: initial;
        background-size: 100vw !important;
        min-width: 100vw !important;
        background-repeat: no-repeat;
    }
    
    a:-webkit-any-link {
        color: -webkit-link;
        text-decoration: none; /* Fjerner den underliggende streg */
        color: inherit; /* Arver farven fra omgivende elementer */ 
    }
    
    .section {
        max-width: 80vw;
        text-align: center;
        line-height: 1.6;
    }
    
    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;
    }
    
    
    .top {
        background-image: linear-gradient(to bottom, transparent 60%, black 100%);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        min-width: 100%; /*skal muligvis ændres */
        min-height: 55vh;
        max-height: 80vh;
        display: flex;
        flex-direction: column; /* Gør det muligt at arrangere børnene lodret */
        align-items: center;
        justify-content: center;
        position: relative;
    }
    
    /* Styling af forsidebillede */
    .forsidelogo {
    position: relative;
    width: 45vw; /* Juster størrelsen på billedet */
    margin-top: 10vh;
    margin-bottom: 5%; /* Afstand mellem billedet og knappen */
    z-index: 1; /* Sørger for, at billedet er foran baggrunden */
    }

    .logo{
        width: 15vw;
    }
    
    /* Styling af knap */
    .button {
        font-size: 1vw;
        font-family: 'Lao Sangam MN', sans-serif;
        border-radius: 5%;
        padding: 2vh 3vw;
        background-color: transparent;
        color: white !important;
        border: 2px solid white;
        transition-duration: 0.4s;
        z-index: 1; /* Sørger for, at knappen er foran baggrunden */
    }

    .button a {
        color: white !important;
    }
    
    .button:hover {
        background-color: rgba(211, 211, 211, 0.318); /* Ændring ved hover */
        color: white;
    }
    
    
    h1, h2{
        font-family: roca;
        padding-bottom: 10px;
        font-size: 4vw;
        color: #DEE2A4;
    }
    
    .sektion1{
        color:#fff;
        background: black;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding-bottom: 100px;
        min-width: 100vw;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
    }
    #sektion1 p{
    font-size: 3vh;
    }
    
    .sektion2{
        color:#fff;
        background: black;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        min-width: 100%;
        padding: 0;
   
    }

    #sektion2 p{
    font-size: 3vh;
    margin: 3vh;
    }
    
    .golfboldbillede{
        height: 65vh;
        padding-left: 0;
        padding-bottom: 0;
    }

    #golfsimulator{
        width: 50vh;
    }
    
    .sektion3{
        color:#fff;
        background: black;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        min-width: 100%;
    }
    
    .socialemedier{
        width:fit-content;
        height: 65vh;
        margin-bottom: 0;
        margin-top: 0;
        margin-right: 0;
        padding-right: 0;
    }
    
    .break {
        display: block; /* Sætter "vigtig besked" på en ny linje */
    }
    .highlight{
        color: #DEE2A4;
        font-weight: bold;
    }
    .lys{
        color: white;
    }
    
    .footer {
        background-color:black; /* Dark background */
        color: white; /* White text color */
        text-align: center; /* Center text horizontally */
        padding: 20px; /* Add some space inside the footer */
        position: relative; /* Optional, for layout control */
        border-top: 1px solid var(--primary-color);
    
    }
    
    .footer p {
        margin: 5px 0; /* Space between footer text lines */
        font-size: 0.9rem; /* Slightly smaller text */
    }
    
    .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 */
    }
}

/*styling til smartphones*/
@media 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 {
        background-image: url(../img/forsidetop\(1\).webp);
        background-position: initial;
        background-size: 100vw !important;
        min-width: 100vw!important;
        background-repeat: no-repeat;

    }

    .top {
        background-image: linear-gradient(to bottom, transparent 1%, black 100%);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        min-width: 100vw; /*skal muligvis ændres */
        height: 45vh;
        display: flex;
        flex-direction: column; /* Gør det muligt at arrangere børnene lodret */
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .button {
        font-size: 2vw;
        font-family: 'Lao Sangam MN', sans-serif;
        border-radius: 5%;
        padding: 2vh 3vw;
        background-color: transparent;
        color: white !important;
        border: 2px solid white;
        transition-duration: 0.4s;
        z-index: 1; /* Sørger for, at knappen er foran baggrunden */
    }

    .button a {
        color: white !important;
    }

    h1, h2{
        font-family: roca;
        padding-bottom: 10px;
        font-size: 5vw;
        color: #DEE2A4;
    }

    p{
        font-size: 2.5rem;
    }
    .forsidelogo {
        position: relative;
        width: 45vw;
        z-index: 1;
        margin-top: 0;
        margin-bottom: 0;
    }



    .sektion1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 100px;
        padding-bottom: 0;
        min-width: 100%;
        color:#fff;
        background: black;
    }

    #sektion1 p{
        font-size: 4vw;
        text-align: center;
        }

    .golfboldbillede {
        height: 700px;
        padding-bottom: 100px;
        padding-left: 0;
    }

    .sektion2 {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        min-width: 100%;
        color:#fff;
        background: black;
    }

    #golfsimulator{
        width: 100vw;
    }

    #sektion2 p{
        font-size: 4vw;
        text-align: center;
        }

    .sektion3{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 100%;
    }

    .socialemedier{
        width:fit-content;
        height: 65vh;
        margin-bottom: 0;
        margin-top: 0;
        margin-right: 0;
        padding-right: 0;
    }
}