/* CSS file with gray and beige tones */

body {
    width: 90%;
    margin: auto;
    font-family: Arial, sans-serif;
    background-color: #f7f6f3; /* Lys beige baggrund */
    color: #333; /* Mørk grå tekst */
}

#header {
    
    width: 100%;
    margin: auto;
    padding-top: 5px; /* Tilføj padding, så indholdet har plads */
    padding-bottom: 5px;
    background-image: url(grå.png); /* orange */
    background-size: cover; /* Skaler billedet til at dække hele headeren */
    background-position: center; /* Centrer billedet i headeren */
    background-repeat: no-repeat; /* Forhindre gentagelse */
    color: rgb(47, 47, 47); /* Sørg for tekstfarve står i kontrast */
    text-align: center;
}

#nav {
    width: 100%;
    margin: auto;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: #e4e2df; /* Lys grå/beige */
    text-align: center;
    border-bottom: 1px solid #ccc; /* Diskret skillelinje */
}

#section {
    float: left;
    text-align: left;
    width: 56%;
    margin: 2%;
    background-color: #ffffff; /* Hvid baggrund */
    border: 1px solid #ddd; /* Lys grå kant */
    border-radius: 4px; /* Bløde kanter */
    padding: 10px;
}

#aside {
    float: left;
    text-align: center;
    width: 36%;
    margin: 2%;
    background-color: #f3f2f0; /* Meget lys beige */
    border: 1px solid #ddd; /* Lys grå kant */
    border-radius: 4px; /* Bløde kanter */
    padding: 10px;
}

#footer {
    float: left;
    width: 100%;
    margin: auto;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #d6d2cc; /* Mellem beige */
    color: #333; /* Mørk grå tekst */
    text-align: center;
    border-top: 2px solid #aaa; /* Lys grå skillelinje */
}

#menu {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #bbb; /* Neutral grå */
}

.menuPunkt {
    float: left;
}

.menuPunkt a {
    display: block;
    color: #333; /* Mørk grå tekst */
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    background-color: #d6d2cc; /* Mellem beige */
    border-right: 1px solid #aaa; /* Skillelinje mellem punkter */
}

.menuPunkt a:hover {
    background-color: #aaa; /* Lys grå ved hover */
    color: white; /* Hvid tekst ved hover */
}

/* Mobiloptimeret design */
@media screen and (max-width: 800px) {

    #section {
        width: 100%;
        margin: auto;
    }

    #aside {
        width: 100%;
        margin: auto;
    }
}