*{
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
    font-family: 'Playfair Display', serif;
    scroll-behavior: smooth;
}
* -footer {
    background-color: rgb(241, 241, 241);
}

#backtop {
    display: none;
    text-align: center;
    border-style: outset;
    width: 140px;
    border-width: 4px;
    border-color: rgb(76, 152, 62);
    margin-left: auto;
    margin-right: auto;
}
#backtop a {
    text-decoration: none;
}
#backtop:hover {
    border-style: inset;
}
#nacka {
    font-size: 24px;
    bottom: 7px;
}
#punkter {
    bottom: 7px;
}
a {
    color: black;
}
.margintop {
    margin-top: 10px;
}
nav li {
    display: inline-block;
    position: relative;
}
.dropdown {
    position: absolute;
    z-index: 2;
    display: none;
    background-color: rgb(173, 255, 170);
}
nav li:focus-within ul.dropdown {
    display: block;
}
#footer2 a {
    color: whitesmoke;
    font-size: 22px;
    text-decoration: none;
}
li {
    list-style-type: none;
    margin: 10px;
}
dd {
    margin-bottom: 10px;
}
dt {
    font-size: 20px;
}
h1,h2 {
    text-align: center;
}
main {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 13fr 1fr;
    grid-template-rows: auto 57vw auto;
    grid-template-areas: 
    "na na na"
    "b1 b1 b1"
    ". be ."
    ". b2 ."
    ". lo ."
    ". b3 ."
    ". u1 ."
    ". b4 ."
    ". u2 ."
    ". b5 ."
    ". u3 ."
    "fo fo fo";
}
nav {
    grid-area: na;
    background-color: rgb(173, 255, 170);
    position: sticky;
    top: 0%;
    height: 40px;
    box-shadow: 0 0 20px 3px;
    text-align: center;
    z-index: 3;
}
#beskrivning {
    grid-area: be;
}
#losning {
    grid-area: lo;
}
#under1 {
    grid-area: u1;
}
#under2 {
    grid-area: u2;
}
#under3 {
    grid-area: u3;
}
#bild1 {
    grid-area: b1;
}
#bild2 {
    grid-area: b2;
}
#bild3 {
    grid-area: b3;
    width: 100%;
    height: auto;
}
footer {
    margin-top: 20px;
    background-color:rgb(46, 90, 37);
    grid-area: fo;
}
.foot {
    color: whitesmoke;
}
#footer2 {
    position: relative;
    float: right;
    bottom: 26%;
    right: 13%;
}
#footer1 {
    position: relative;
    left: 15%;
    top: 25%;
    width: 30%;
}
img {
    width: 100%;
    margin-bottom: 10px;
}
p {
    text-align: center;
}
#bild2 img,#bild3 img,#bild4 img,#bild5 img{
    margin-top: 27px;
}
#bild4 {
    grid-area: b4;
}
#bild5 {
    grid-area: b5;
}
@media only screen and (min-width: 600px) {
    main {
        grid-template-columns: 2fr 11fr 2fr 15fr 2fr;
        grid-template-rows: auto 57vw auto;
        grid-template-areas: 
        "na na na na na"
        "b1 b1 b1 b1 b1"
        ". be . lo ."
        ". u2 . lo ." 
        ". u2 . b2 ." 
        ". b4 . u1 ."
        ". u3 . u1 ."
        ". u3 . u1 ."
        ". u3 . b3 ."
        ". u3 . b3 ."
        ". u3 . b3 ."
        ". b5 . b3 ."

        
        "fo fo fo fo fo";
    }
    #bild4,#bild5 {
        display: block;
    }
}

@media only screen and (min-width: 769px) {
    main {
        grid-template-columns: 2fr 11fr 2fr 15fr 2fr;
        grid-template-rows: auto 57vw auto;
        grid-template-areas:
        "na na na na na"
        "b1 b1 b1 b1 b1"
        ". lo . b2 ."
        ". b3 . u1 ."
        ". u2 . b4 ."
        ". b5 . u3 ."
        "fo fo fo fo fo";
    }
    p {
        font-size: 13px;
    }
    #footer1 {
        left: 9%;
    }
    #footer2 {
        right: 8%;
    }
    #bild4,#bild5,#backtop {
        display: block;
    }
    #footer2 {
        bottom: 30%;
    }
    #beskrivning {
        position: absolute;
        width: 360px;
        top: 20vw;
        left: 5vh;
    }
    #beskrivning h1 {
        margin-bottom: 12px;
        font-size: xx-large;
        width: 400px;
        text-align: left;
    }
    #beskrivning p {
        font-size: large;
        text-align: left;
    }
}