a {
    text-decoration: none;
    color: #090909;
}

a:hover {
    cursor: pointer;
}

.innehall {
    background-color: white;
    position: relative;
    top: -10rem;
    padding-bottom: 5rem;
    overflow: clip;
}

.behallare {
    background-color: rgba(0, 0, 0, 0.8);
}

body {
    margin: 0 auto;
    background-color: black;
    color: #090909;
}

html {
    max-width: 100%;
    height: fit-content;
}

header {
    width: 100%;
    margin: 0;

    position: sticky;
    top: 0;
    z-index: 5;
}

.ljus_text {
    color: white;
}

.bakgrunder {
    width: 100%;
    overflow: hidden;
}

#minigalleri_container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 30vw 30vw;
    column-gap: 3rem;
    row-gap: 3rem;
    margin: 5rem 2rem 0 2rem;

    grid-template-areas:
        "a a b"
        "c d d";
}

.minigalleri_bild {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.minigalleri_bild_1 {
    grid-area: a;
}

.minigalleri_bild_2 {
    grid-area: b;
}

.minigalleri_bild_3 {
    grid-area: c;
}

.minigalleri_bild_4 {
    grid-area: d;
}

.bildcred {
    background-color: #FCFDEB;
    opacity: .8;
    color: black;
    display: inline-block;
    padding: 8px 32px 8px 14px;
    border-radius: 200px;

    background-image: url(../bilder/symboler/kamera.svg);
    background-repeat: no-repeat;
    background-position: right 8px center;

    position: absolute;
    top: .5rem;
    left: .5rem;
    margin: 0;
}

@media screen and (min-width: 1001px) {
    #bakgrundsellips1 {
        width: 100%;
        height: 0;
        padding: 100%;
        flex-shrink: 0;
        border-radius: 1266.93px;
        background: #00EBAC;

        filter: blur(750px);
        opacity: .2;

        position: absolute;
        margin-left: 75%;
    }

    #bakgrundsellips2 {
        width: 75%;
        height: 0;
        padding: 100%;
        flex-shrink: 0;
        border-radius: 917.432px;
        background: #7EF3FF;

        filter: blur(500px);
        opacity: .2;

        position: absolute;
        margin-top: 704px;
        margin-left: 25%;
    }

    #bakgrundsellips3 {
        width: 75%;
        height: 0;
        padding: 100%;
        flex-shrink: 0;
        border-radius: 917.432px;
        background: #FE5AE4;

        filter: blur(500px);
        opacity: .2;

        position: absolute;
        margin-top: 1678px;
        margin-left: 90%;
    }

    #bakgrundsellips4 {
        width: 60%;
        height: 0;
        padding: 100%;
        flex-shrink: 0;
        border-radius: 1266.93px;
        background: #F00;

        filter: blur(1000px);
        opacity: .2;

        position: absolute;
        margin-top: 2416px;
    }

    #bakgrundsellips5 {
        width: 60%;
        height: 0;
        padding: 100%;
        flex-shrink: 0;
        border-radius: 1156.032px;
        background: #FFC700;

        filter: blur(1000px);
        opacity: .2;

        position: absolute;
        margin-top: 2837px;
        margin-left: 90%;
    }
}

@media screen and (max-width: 1000px) {

    header {

        height: 10rem;
    }

    #bakgrundsellips1 {
        width: 376vw;
        height: 376vw;
        flex-shrink: 0;
        border-radius: 376vw;
        background: #00EBAC;

        filter: blur(500px);
        opacity: .3;

        position: absolute;
        margin-top: -5vw;
        margin-left: 5vw;
    }

    #bakgrundsellips2 {
        width: 245vw;
        height: 245vw;
        flex-shrink: 0;
        border-radius: 245vw;
        background: #7EF3FF;

        filter: blur(750px);
        opacity: .3;

        position: absolute;
        margin-left: -25vw;
        margin-top: 473vw;

    }

    #bakgrundsellips3 {
        width: 244vw;
        height: 230vw;
        flex-shrink: 0;
        border-radius: 244vw;
        background: #FE5AE4;

        filter: blur(500px);
        opacity: .3;

        position: absolute;
        margin-top: 631vw;
        margin-left: 10vw;
    }


    #bakgrundsellips4 {
        width: 338vw;
        height: 315vw;
        flex-shrink: 0;
        border-radius: 338vw;
        background: #F00;

        filter: blur(1000px);
        opacity: .3;

        position: absolute;
        margin-top: 965vw;
        margin-left: -100vw;
    }

    #bakgrundsellips5 {
        width: 300vw;
        height: 288vw;
        flex-shrink: 0;
        border-radius: 300vw;
        background: #FFC700;

        filter: blur(1000px);
        opacity: .3;

        position: absolute;
        margin-top: 1400vw;
        margin-left: -10vw;
    }

    #minigalleri_container {
        position: relative;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 70vw;
        column-gap: 3rem;
        row-gap: 3rem;
        margin: 5rem 2rem 0 2rem;

        grid-template-areas:
            "a"
            "b"
            "c"
            "d";
    }
}