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

body{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 155px 50px 0.5fr 0.2fr 0.45fr 0.5fr 0.2fr 0.5fr;
    grid-template-areas: "header"
                         "nav"
                         "dis1"
                         "bild1"
                         "dis2"
                         "dis3"
                         "bild2"
                         "footer"
                         ;
     background-color: #425214;  
}

section {
    margin: 20px;
    background-color: #333;
    color: rgb(255, 255, 255);

    
}



img {
    max-width: 100%;
    height: auto;
  }

p {
color: #ffffff;
    font-family: "Open Sans", serif;
    font-weight: 300;
    font-variation-settings:
      "wdth" 100;

    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px ;
}

h1 {
    padding: 20px;
    font-size: 48px;

    font-family: "Anton", serif;
    font-weight: 400;
    font-style: normal;
    color: rgb(255, 255, 255);
}

h2 {
    color: #ffffff;
    padding: 20px;
    font-family: "Open Sans", serif;
    font-weight: 300;
    font-variation-settings:
      "wdth" 100;
}



header {
    grid-area: header;

    background-image: url(../bilder/växt5.jpeg);
    background-size: cover;
}



nav{
    grid-area: nav;
    font-family: "Open Sans", serif;
    font-weight: 300;
    font-variation-settings:
      "wdth" 100;

}

#dis1 {
    grid-area: dis1;
    overflow: auto;
}

#dis2 {
    grid-area: dis2;
}
#dis3 {
    grid-area: dis3;
}



#bild1 {
    grid-area: bild1;
    margin: 20px;
    background-color: white;
}

#bild2 {
    grid-area: bild2;
    margin: 20px;
    background-color: white;
}

footer {
    grid-area: footer;
    background-color: #333;
    padding-left: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.5fr 1fr;
    grid-template-areas: "vanster mitten hoger"
    "nerevanster mitten nerehoger";
    
}

.vanster{
grid-area: vanster ;
}

.nerevanster {
    grid-area: nerevanster;
    padding-bottom: 3px;
}


.mitten{
grid-area: mitten;
}

.hoger {
grid-area: hoger;
padding-top: 25px;

}

.nerehoger {
grid-area: nerehoger;
padding-bottom: 3px;
}

.nerehoger a {

color: rgb(255, 255, 255);
font-family: "Open Sans", serif;
font-weight: 300;
font-variation-settings:
"wdth" 100;

}

.topnav {
    overflow: hidden;
    background-color: #333;
    grid-area: nav;
}

.topnav a {
    float: left;
    display: block;
    color:  #7c9926;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: #000000;
    color: #7c9926;
}

.topnav a.active {
    background-color:  #425214;
    color: white;
}

.topnav .icon {
    display: none;
}


@media only screen and (min-width: 600px){
body {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 150px 50px 1fr 0.5fr 0.7fr 0.5fr 0.7fr 0.5fr;
    grid-template-areas: "header header"
                          "nav nav"
                          "dis1 dis1"
                          "dis2 dis2"
                          "bild1 bild1"
                          "dis3 dis3"
                          "bild2 bild2"
                          "footer footer";
}
h1 {
    font-size: 60px;
}   

}

/*850 passade bäst med designen*/
@media only screen and (min-width: 850px){
body {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 150px 50px 0.6fr 1fr 1fr 1fr;
    grid-template-areas: "header header"
                         " nav nav"
                         "dis1 bild1"
                         "dis1 bild2"
                         "dis2 dis3"
                         "footer footer";
}
h1{
    font-size: 75px;
}   

}





@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {
        display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }