* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #CEE1F2;
}

main {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 25vh 7vh 40vh 25vh 40vh 25vh 40vh 25vh 40vh 30vh 40vh 15vh;
    grid-template-areas: "head"
        "nav1"
        "bit1"
        "text1"
        "bit2"
        "text2"
        "bit3"
        "text3"
        "bit4"
        "text4"
        "text5"
        "foot"
    ;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

header {
    grid-area: head;
    line-height: 25vh;
    background-image: url(../bilder/stad1.jpg);
    background-size: cover;
    font-family: "PT Serif", serif;
    font-weight: 400;
    font-style: normal;
    font-size: large;
    z-index: 99;

}

h1 {
    height: 60%;
    color: #CEE1F2;
    text-shadow: 0 0 10px black;
    margin-left: 2vw;
}

#hamburger-container {
    width: 8vw;
    height: 5vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-right: 0.5vh;
    float: right;
    transform: translateY(-100%);

}

.hamburger {
    width: 100%;
    height: 15%;
    background-color: white;
    border-radius: 25px;

}

nav {
    background-color: #BFA084;
    grid-area: nav1;
    transition: transform 0.5s;
}

ul {
    list-style-type: none;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    line-height: 7vh;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: small;
}

a:link {
    text-decoration: none;
    color: #8191A6;
}

a:visited {
    color: #CEE1F2;
}

a:hover {
    background-color: #8C6F5E;
}

#bit1 {
    grid-area: bit1;
}

#text1 {
    grid-area: text1;
}

#bit2 {
    grid-area: bit2;
}

#text2 {
    grid-area: text2;
}

#bit3 {
    grid-area: bit3;
}

#text3 {
    grid-area: text3;
}

#bit4 {
    grid-area: bit4;
}

#text4 {
    grid-area: text4;
}

#text5{
    grid-area: text5;
    margin-top: 10%;
}

h2{
    font-family: "PT Serif", serif;
    font-weight: 400;
    font-style: normal;
}

section {
    background-color: #D9BBA0;
    box-shadow: 10px 10px #8191A6;
    margin: 2% 10% 2% 10%;
    overflow: scroll;
}

section p {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-style: normal;
    padding: 3%;
    font-size: small;

}

h2 {
    text-align: center;
    padding: 1%;
    font-size: medium;
}

img {
    width: 60vw;
    margin: 5%;
}

picture {
    display: flex;
    justify-content: center;
}

footer {
    grid-area: foot;
    background-color: #BFA084;
    text-align: center;
    line-height: 15vh;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: small;

}

@media only screen and (min-width: 600px) {
    main {
        grid-template-columns: 50vw 50vw;
        grid-template-rows: 25vh 10vh 60vh 60vh 60vh 60vh 40vh 15vh;
        grid-template-areas: "head head"
            "nav1 nav1"
            "bit1 text1"
            "text2 bit2"
            "bit3 text3"
            "text4 bit4"
            "text5 text5"
            "foot foot"
        ;
    }

    header{
        line-height: 25vh;
    }

    #hamburger-container{
        width: 5vw;
        height: 5vh;
    }

    ul{
        line-height: 10vh;
    }

    section{
        height: 25vh;
        margin-top: 15vh;
    }
}

@media only screen and (min-width: 769px) {
    main {
        grid-template-columns: 20vw 30vw 30vw 20vw;
        grid-template-rows: 40vh 10vh 30vh 25vh 30vh 20vh 40vh 20vh;
        grid-template-areas: "head head head head"
            "nav1 nav1 nav1 nav1"
            "text1 bit1 bit2 text2"
            ". bit1 bit2 ."
            "text3 bit3 bit4 text4"
            ". bit3 bit4 ."
            ". text5 text5 ."
            "foot foot foot foot"
        ;
    }

    header {
        line-height: 40vh;
        text-align: center;
        font-size: xx-large;

    }

    section{
        height: 40vh;

    }

    section p{
        font-size: medium;
    }

    h2{
        font-size: large;
    }

    ul {
        line-height: 10vh;
        font-size: large;
    }

    #hamburger-container {
        width: 4vw;
        height: 6vh;
    }

    footer{
        line-height: 20vh;
        font-size: large;
    }
}