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

body {
    background-color: #CEE1F2;
}

main {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 25vh 7vh 100vh 60vh 70vh 80vh 130vh 15vh;
    grid-template-areas: "head"
        "nav1"
        "text1"
        "text2"
        "text3"
        "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: medium;
    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;
}

#text1 {
    grid-area: text1;
}

#text2 {
    grid-area: text2;
}

#text3 {
    grid-area: text3;
}


#text4 {
    grid-area: text4;
}

#text5 {
    grid-area: text5;
}


h2{
    font-family: "PT Serif", serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    padding: 1%;
}

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;
    font-size: small;
    padding: 0% 3% 0% 3%;
}

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: 10vw 40vw 40vw 10vw;
        grid-template-rows: 25vh 10vh 55vh 40vh 45vh 50vh 75vh 15vh;
        grid-template-areas: "head head head head"
            "nav1 nav1 nav1 nav1"
            ". text1 text1 ."
            ". text2 text2 ."
            ". text3 text3 ."
            ". text4 text4 ."
            ". text5 text5 ."
            "foot foot foot foot"
        ;
    }

    header{
        line-height: 25vh;
    }

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

    ul{
        line-height: 10vh;
    }
}

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

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

    }

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

    section p{
        font-size: large;
    }

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

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

}