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

body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 150px 50px 0.3fr 0.3fr 0.4fr 0.2fr 0.4fr 0.3fr 0.3fr;
    grid-template-areas: "header"
                          "nav"
                          "los1"
                          "bild1"
                          "los2"
                          "bild2"
                          "los3" 
                          "bild3"
                          "footer"
                           ;

            background-color: #425214;    
}

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

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

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

h2 {
    padding: 20px;
    color: rgb(255, 255, 255);
    font-family: "Open Sans", serif;
    font-weight: 300;
    font-variation-settings:
      "wdth" 100;
}

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 ;
}



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;
}

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

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

}

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

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

}

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

#losbild3 {
    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.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;
    
}

.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: 601px) {
body{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 150px 50px 0.3fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr;
    grid-template-areas: "header header"
                         "nav nav"
                         "los1 bild1"
                         "los2 los2"
                         "bild2 bild2"
                         "los3 los3"
                         "bild3 bild3"
                         "footer footer"
                         ;
}
h1 {
    font-size: 60px;
}   


}


/*här använda jag min-width 850 istället för 750 då det passade bättre med designen */
@media only screen and (min-width: 850px) {
    body{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 155px 50px 0.3fr 0.6fr 0.5fr 0.6fr 0.3fr;
        grid-template-areas: "header header"
                              "nav nav"
                              "los1 bild1"
                              "los2 los2"
                              "bild2 bild3"
                              "los3 los3"
                              "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;
    }
  }