body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #935252;
}

header {
    background: #fcbead;
    color: #935252;
    padding: 40px 20px;  /* Minska padding för att minska utrymmet */
    text-align: center;
    font-size: 35px; /* Justera textstorlek */
    display: flex;
    flex-direction: column;
    justify-content: center;  /* Centrera vertikalt */
    align-items: center;  /* Centrera horisontellt */
    height: 250px;  /* Justera höjden om du vill ha en specifik höjd */
}

header h1 {
    margin-bottom: 5px; /* Minska mellanrum mellan header-text och nav */
}

header nav {
    margin-top: 0;  /* Ta bort eventuell automatisk margin från toppen av nav */
}

header nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

header nav ul li {
    display: inline;
    margin: 0 15px;  /* Justera mellanrum mellan navigationslänkar */
}

header nav ul li a {
    color: #935252;
    text-decoration: none;
}

section {
    text-align: center;
    padding: 50px;  /* Öka padding för mer utrymme inom sektionen */
    margin: 20px auto;  /* Öka margin för mer utrymme utanför sektionen, centrera den med auto */
    background-color: #fcbead;
    border-radius: 8px;
    width: 35%;  /* Gör sektionen bredare och justera bredden */
    max-width: 1200px;  /* Sätt ett maxbredd så att sektionen inte blir för bred på stora skärmar */
    color: #7e4848;
}

/* Footer-styling */
footer {
    text-align: center;
    padding: 10px;
    background-color: #fcbead;
    color: #935252;
}

/* Media query för skärmar mindre än 768px (mobiler och små skärmar) */
@media (max-width: 768px) {
    header {
        padding: 20px 20px; /* Minska padding på små skärmar */
        height: auto;  /* Ta bort fast höjd så att headern kan anpassa sig beroende på innehåll */
    }

    header h1 {
        font-size: 28px; /* Justera textstorlek i headern för små skärmar */
    }

    section {
        width: 90%; /* Gör sektionen bredare på små skärmar */
        padding: 15px; /* Justera padding för små skärmar */
    }

    header nav ul li {
        display: block;  /* Gör navigationslänkarna vertikala på mobiler */
        margin: 10px 0;  /* Öka mellanrum mellan navigationslänkar på små skärmar */
    }

    header nav ul li a {
        font-size: 18px;  /* Justera textstorlek på länkar för mobil */
    }
}

/* Media query för skärmar mindre än 480px (mycket små skärmar, t.ex. mobiltelefoner i porträttläge) */
@media (max-width: 480px) {
    header {
        padding: 15px 15px;  /* Ytterligare minskning av padding på mycket små skärmar */
    }

    header h1 {
        font-size: 24px;  /* Minska fontstorleken för mycket små skärmar */
    }

    section {
        width: 95%; /* Gör sektionen ännu bredare på väldigt små skärmar */
    }
}