html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Sikrer at body tar minst hele skjermhøyden */
    margin: 0; /* Fjerner standardmarg */
    font-family: Arial, sans-serif;
    color: white;
    background: radial-gradient(circle, #434343, #000000);
}

.content-wrapper {
    flex: 1; /* Denne linjen får innholdet til å fylle tilgjengelig plass, skyver foten ned */
    display: flex;
    flex-direction: column; /* Holder den originale retningen for barna dine */
    justify-content: center;
    align-items: center;
}

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

.logo img {
    width: 100px; /* Adjust based on your actual logo size */
    height: auto;
}

header {
    display: flex;
    justify-content: space-between; /* This aligns the logo to the left and nav to the right */
    padding: 10px 20px;
    max-width: 1800px; /* Or whatever max width you prefer */
    margin: 0 auto; /* This centers the header content */
}

nav {
    /* Adjust the space between navigation links */
    display: flex;
    gap: 20px; /* You can adjust this value */
}

nav a {
    color: white;
    text-decoration: none;
    padding: 10px; /* Adjust padding to increase or decrease space around links */
    white-space: nowrap; /* Prevents the text from wrapping */
}

main {
    text-align: center;
}

.graphic {
    /* Updated graphic background */
    background-position: center center;
    background: url('/images/bakrund_600X200.png') no-repeat center center;
    background-size: contain;
    max-width: 100%; /* Gjør at bredden tilpasser seg containerens bredde */
    height: 400px; /* Beholder bildets aspektforhold */
}

h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

.sektor-main {
    display: flex;
    justify-content: center; /* Sentrerer seksjonene horisontalt */
    gap: 20px; /* Legger til litt plass mellom de to seksjonene */
    background: radial-gradient(circle, #2b2b2b, #000000);
    border-radius: 300px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
    font-size: small;
    font-style: initial;
}

.sektor1 {
    width: 35%; /* Bestemmer bredden på hver seksjon */
}

.sektor2 {
    width: 35%; /* Bestemmer bredden på hver seksjon */
}

.sektor1 img {
    width: 50%; /* Juster etter behov */
    height: auto; /* Beholder aspektforholdet til bildet */
    margin-top: 20px; /* Legger til plass over bildet */
    margin-bottom: 20px; /* Legger til plass over bildet */
}

.sektor2 img {
    width: 53%; /* Juster etter behov */
    height: auto; /* Beholder aspektforholdet til bildet */
    margin-top: 20px; /* Legger til plass over bildet */
    margin-bottom: 20px; /* Legger til plass over bildet */
}

.info {
    display: flex;
    justify-content: center; /* Sentrerer seksjonene horisontalt */
    gap: 20px; /* Legger til litt plass mellom de to seksjonene */
    background-color: #000000;
    border-radius: 300px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
    font-size: small;
    font-style: initial;
}

footer {
    width: 100%; /* Sikrer at foten strekker seg over hele bredden av skjermen */
    position: fixed; /* Holder foten fast nederst på siden */
    bottom: 0; /* Justerer foten til bunnen av siden */
    background-color: #222; /* Dine eksisterende stiler */
    color: white;
    text-align: center;
    padding: 20px 10px;
    font-size: 0.9em;
}

footer .footer-content {
    margin: 0 auto; /* Sentrerer footer-innholdet */
    max-width: 1200px; /* Maks bredde på innholdet */
}

footer a {
    color: #00a2ff; /* Lyseblå farge for lenker for å skille dem fra vanlig tekst */
    text-decoration: none; /* Fjerner understreking fra lenker */
}

footer a:hover {
    text-decoration: underline; /* Understreker lenker når musen er over for bedre tilgjengelighet */
}

footer button {
    background-color: #ffd000;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    cursor: pointer;
    outline: none;
}

footer button:hover {
    background-color: #00a2ff;
}

.ending {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: white;
}