* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;;
    color: #202022;
    text-align: center;
    user-select: none;
}

body {
    background-image: url(../bilder/Nackastorbild.jpg);
    background-repeat: no-repeat;
    overflow-x: hidden;
    background-color: #CACACA;
    background-repeat: no-repeat;
    background-size: 100vw 900px;
    text-shadow: -1px 1px 0 #ffffff,
        1px 1px 0 #ffffff,
        1px -1px 0 #ffffff,
        -1px -1px 0 #ffffff;
}

#titel {
    font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
    display: flex;
    align-items: center;
    grid-area: til;
    justify-content: center;
}

h1 {
    font-size: 55px;
}

section {
    font-size: 20px;
    font-family: 'Oswald', sans-serif;
}

nav {
    text-align: left;
    grid-area: nav;
    display: flex;
    justify-content: left;
    align-items: center;
}

nav img {
    position: relative;
    width: 70px;
    height: 70px;
}
nav img:hover {
    box-shadow: 0 0 10px 5px #00747C;
}

#footer {
    height: 100px;
    grid-area: fot;
    background-image: linear-gradient( to top ,#00747c94 65%, rgba(255, 255, 255, 0));
    display: flex;
    justify-content: space-around;
    align-items: center;
}

img {
    width: 350px;
    height: 250px;
    box-shadow: 0 0 10px 5px #878787;
}

.arrow {
    z-index: 100;
    position: absolute;
    border: none;
    outline: none;
}

.arrow img {
    width: 45px;
    height: 45px;
    box-shadow: 0 0 10px 5px black;
}
#arrowl{
    width: 45px;
    left: 0;
    top:18vw;
}
#arrowr{
    width: 45px;
    right: 17px;
    top:18vw;
}
#grid {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 80px 520px auto auto auto auto 100px;
    grid-template-areas:
        "nav . "
        "til til"
        "int int"
        "lik lik"
        "abp abp"
        "abo abo"
        "fot fot";
    width: 100vw;
}

#links {
    position: relative;
    grid-area: lik;
}

#intro {
    grid-area: int;
    background-image: linear-gradient(rgba(0, 0, 0, 0), #CACACA 70%);
}

#arrowl {
    right: 10px;
}

#pictures {
    grid-area: pic;
    position: relative;
    height: 18vw;
    width: 200vw;
    transition: left 0.5s ease;
    display: flex;
    background-color: #CACACA;
}

.picture-container {
    display: flex;
}

.bildlink {
    width: 18vw;
    height: 18vw;
    margin-left: 1vw;
    margin-right: 1vw;
}

#abo {
    grid-area: abo;
}

#abo img {
    width: 80%;
    height: 170px;
}

#abp {
    grid-area: abp;
}

#abp img {
    width: 80%;
    height: 170px;
}

a:hover {
    text-shadow: -1px 1px 0 #00BBC9,
        1px 1px 0 #00BBC9,
        1px -1px 0 #00BBC9,
        -1px -1px 0 #00BBC9;
    box-shadow: 0 0 10px 5px #00BBC9;
}

@media only screen and (min-width: 600px) {
    #grid{
    grid-template-columns: 1fr 3fr 2fr 3fr 1fr;
    grid-template-rows: 80px 500px auto auto auto auto 100px;
    grid-template-areas:
        "nav . . . ."
        ". til til til ."
        "int int int int int"
        "lik lik lik lik lik"
        ". abp abp abp ."
        ". abo abo abo ."
        "fot fot fot fot fot";
    }
    body{
        background-size: 100vw 80vh;
    }
    #arrowl{
        width: 65px;
        top:18vw;
    }
    #arrowr{
        width: 65px;
        top:18vw;
    }
    .arrow img {
        width: 65px;
        height: 65px;
    }
}
@media only screen and (min-width: 769px) {
    #grid{
        grid-template-columns: 1fr 3fr 2fr 3fr 1fr;
        grid-template-rows: 80px 700px auto auto auto auto 100px;
        grid-template-areas:
            "nav . . . ."
            ". til til til ."
            "int int int int int"
            "lik lik lik lik lik"
            ". abp abp abp ."
            ". abo abo abo ."
            "fot fot fot fot fot";
    }
    body{
        background-size: 100vw 1000px;
    }
    #arrowl{
        width: 75px;
        top:7.5vw;
    }
    #arrowr{
        width: 75px;
        top:7.5vw;
    }
    .arrow img {
        width: 75px;
        height: 75px;
    }
    #intro {
        padding-left: 100px;
        padding-right: 100px;
    }

}