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

body{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 155px 50px 0.45fr 0.2fr 0.5fr 0.2fr 0.4fr 0.3fr 0.5fr;
    grid-template-areas: "header"
                          "nav"
                          "prob1"
                          "bild1"
                          "prob2"
                          "bild2"
                          "prob3"
                          "bild3"
                          "footer"
                          ;
                          
    background-color: #425214;    

}

section {
    margin: 20px;
    background-color: #333;
  
}

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

p {
    color: rgb(255, 255, 255);
    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;
}

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

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

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

#bild1 {
    grid-area: bild1;
    margin: 20px;

 
}

#bild2 {
    grid-area: bild2;
    margin: 20px;
 

}

#bild3 {
    grid-area: bild3;
    margin: 20px;

  
}

footer {
    grid-area: footer;
    background-color: #333;
    padding-left: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.3fr 0.5fr;
    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;

}

.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 0.2fr 0.2fr 0.2fr 0.3fr;
    grid-template-areas: "header header"
                         "nav nav"
                         "prob1 bild1"
                         "prob2 bild2"
                         "prob3 bild3"
                         "footer footer";
}
h1 {
    font-size: 60px;
}   

}

/*även här passade 850 bäst med designen */
@media only screen and (min-width: 850px) {
body{
    grid-template-columns: 1fr 1fr 1fr ;
    grid-template-rows: 150px 50px 0.5fr 0.2fr 0.3fr;
    grid-template-areas: "header header header"
                         "nav nav nav"
                         "prob1 prob2 prob3"
                         "bild1 bild2 bild3"
                         "footer 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;
    }
  }