body
{ background-color: #ECBE71;}


/* Fonten bliver den samme på hele brødteksten og teksten bliver centreret i midten*/
h1,h2,h3,h4,h5,h6, p
{
    font-family: 'Roboto Mono', monospace;
    text-align: center;
}



h1 {
    font-size: 50px;
    font-weight: bold;
    text-align: center;
}
h2 {
    font-size: 30px;
    text-align: center;
}

h3 {font-size: 30px;
    margin-top: 20px;}

h4 {margin-top: 30px;
    font-size: 20px;}

.forside-billeder-container1,
.forside-billeder-container2,
.forside-billeder-container3,
.Seværdigheder-billeder-container2
{
    margin: 0; /* Fjern margin fra containerne */
    padding: 0; /* Fjern padding fra containerne */
    flex: 1;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.forside-billeder-container1 {
    display: flex;
    justify-content: space-between; /* Fordeler billederne jævnt */
    align-items: stretch; /* Gør billederne lige høje */
    gap: 10px; /* Lidt afstand mellem billederne */
    width: 100%; /* Container fylder hele bredden */

}

.forside-billeder-container1 img {
    flex: 1; /* Gør billederne lige store */
    width: 100%; /* Billedet fylder kun 100% af containeren */
    height: auto; /* Billedet får sin naturlige højde baseret på bredden */
    object-fit: contain; /* Sikrer at hele billedet er synligt uden at blive beskåret */
    margin-top: 40px;
}

.forside-billeder-container2 {
    display: flex;
    justify-content: space-between; /* Fordeler billederne jævnt */
    align-items: stretch; /* Gør billederne lige høje */
    gap: 10px; /* Lidt afstand mellem billederne */
    width: 100%; /* Container fylder hele bredden */
}

.forside-billeder-container2 img {
    flex: 1; /* Gør billederne lige store */
    width: 100%; /* Billedet fylder kun 100% af containeren */
    height: auto; /* Billedet får sin naturlige højde baseret på bredden */
    object-fit: contain; /* Sikrer at hele billedet er synligt uden at blive beskåret */
}


.forside-billeder-container3 {
    display: flex;
    justify-content: space-between; /* Fordeler billederne jævnt */
    align-items: stretch; /* Gør billederne lige høje */
    gap: 10px; /* Lidt afstand mellem billederne */
    width: 100%; /* Container fylder hele bredden */

}

.forside-billeder-container3 img {
    flex: 1; /* Gør billederne lige store */
    width: 100%; /* Billedet fylder kun 100% af containeren */
    height: auto; /* Billedet får sin naturlige højde baseret på bredden */
    object-fit: contain; /* Sikrer at hele billedet er synligt uden at blive beskåret */
}

.forside-billeder-container4 {
    display: flex;
    justify-content: space-between; /* Fordeler billederne jævnt */
    align-items: stretch; /* Gør billederne lige høje */
    gap: 10px; /* Lidt afstand mellem billederne */
    width: 100%; /* Container fylder hele bredden */

}

.forside-billeder-container4 img {
    flex: 1; /* Gør billederne lige store */
    width: 100%; /* Billedet fylder kun 100% af containeren */
    height: auto; /* Billedet får sin naturlige højde baseret på bredden */
    object-fit: contain; /* Sikrer at hele billedet er synligt uden at blive beskåret */
}

.Seværdigheder-billeder-container1 {
display: flex;
justify-content: space-between; /* Fordeler billederne jævnt */
align-items: stretch; /* Gør billederne lige høje */
gap: 10px; /* Lidt afstand mellem billederne */
width: 100%; /* Container fylder hele bredden */
}

.Seværdigheder-billeder-container1 img {
    flex: 1; /* Gør billederne lige store */
    width: 100%; /* Billedet fylder kun 100% af containeren */
    height: auto; /* Billedet får sin naturlige højde baseret på bredden */
    object-fit: contain; /* Sikrer at hele billedet er synligt uden at blive beskåret */
}

.Seværdigheder-billeder-container2, .Seværdigheder-billeder-container3 {
    display: flex;
    justify-content: space-between; /* Fordeler billederne jævnt */
    align-items: stretch; /* Gør billederne lige høje */
    gap: 10px; /* Lidt afstand mellem billederne */
    width: 100%; /* Container fylder hele bredden */
}

.Seværdigheder-billeder-container2 img, .Seværdigheder-billeder-container3 img {
    flex: 1; /* Gør billederne lige store */
    width: 100%; /* Billedet fylder kun 100% af containeren */
    height: auto; /* Billedet får sin naturlige højde baseret på bredden */
    object-fit: contain; /* Sikrer at hele billedet er synligt uden at blive beskåret */
}
/*********************************************** KOPIER HERFRA /*********************************************
/* Navigationsbar*/

.Mad-drikke-billeder-container1, .Mad-drikke-billeder-container2, .Mad-drikke-billeder-container3 {
    display: flex;
    justify-content: space-between; /* Fordeler billederne jævnt */
    align-items: stretch; /* Gør billederne lige høje */
    gap: 10px; /* Lidt afstand mellem billederne */
    width: 100%; /* Container fylder hele bredden */
}

.Mad-drikke-billeder-container1 img, .Mad-drikke-billeder-container2 img, .Mad-drikke-billeder-container3 img {
    flex: 1; /* Gør billederne lige store */
    width: 100%; /* Billedet fylder kun 100% af containeren */
    height: auto; /* Billedet får sin naturlige højde baseret på bredden */
    object-fit: contain; /* Sikrer at hele billedet er synligt uden at blive beskåret */
}

.navbar {
    background-color: #e9a949 !important;
}

.navbar .nav-link,
.navbar-brand {
    color: #ffffff !important; /* Hvid tekst */
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: #f0f0f0 !important; /* Lidt lysere hvid – for fin effekt */
}

/*FOOTER*/
.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background-color: #e9a949; /* varmere og mørkere end siden, men i samme tonefamilie */
    color: #2c2c2c;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-top: 100px;
}

.footer-left h2 {
    margin: 0;
    font-size: 20px;
    color: #2c2c2c;
}

.footer-left p {
    margin: 4px 0 0;
    font-size: 14px;
    color: #2c2c2c;
}

.footer-right img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1); /* gør hvide ikoner lidt blødere */
    transition: transform 0.2s ease;
}

.footer-right img:hover {
    transform: scale(1.1);
}
.navbar {
    background-color: #e9a949 !important;
}

.navbar .nav-link,
.navbar-brand {
    color: #ffffff !important; /* Hvid tekst */
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: #f0f0f0 !important; /* Lidt lysere hvid – for fin effekt */
}

    /*FOOTER*/
    .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 40px;
        background-color: #e9a949; /* varmere og mørkere end siden, men i samme tonefamilie */
        color: #2c2c2c;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin-top: 100px;
    }

    .footer-left h2 {
        margin: 0;
        font-size: 20px;
        color: #2c2c2c;
    }

    .footer-left p {
        margin: 4px 0 0;
        font-size: 14px;
        color: #2c2c2c;
    }

    .footer-right img {
        width: 24px;
        height: 24px;
        filter: brightness(0) invert(1); /* gør hvide ikoner lidt blødere */
        transition: transform 0.2s ease;
    }

    .footer-right img:hover
    {
        transform: scale(1.1);
    }

/*********************************************** KOPIER HERTIL /*********************************************
 */