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

}

header {

  grid-area: Header;


}


main {
  height: 100vh;
  font-family: "Kanit", sans-serif;
  font-weight: 200;
  font-style: normal;


}



section {
  text-align: center;



}

#text {
  grid-area: text0;
}

#text1 {
  grid-area: text1;


}

#text2 {
  grid-area: text2;


}

#hus {
  grid-area: bild1;

}

#simmare {
  grid-area: bild2;

}

#arbete{
  grid-area: bild3;
}

#lagenhet{
grid-area: bild4;

}

#bild5{
  grid-area: bild5;
}

header h1 {
  background-color: #020659;
  color: white;
  font-family: "Merriweather", serif;
height: 100px;
text-align: center;

}

img {
  width: 100vw;
  height: 367px;

}


a {
  text-decoration: none;
  color: white;

}

a:hover {
  background-color: #D97B29;
}

#nav1 {
  grid-area: nav;
}

#text3{
  grid-area: text3;
}

a {
  text-decoration: none;
  color: white;
  
  }
  
  a:hover{
      background-color: #D97B29 ;
  }
  

  
  .mobile-container {
   
    margin: auto;
    background-color: #555;
    height: 200px;
    color: white;
    border-radius: 10px;
  }
  
  .topnav {
    overflow: hidden;
    background-color: #333;
 
  }
  
  .topnav #myLinks {
    display: none;
  }
  
  .topnav a {
    float: left;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a.icon {
    float: right;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .active {
    background-color: #048ABF;
    color: white;
  }

#bottom{
  grid-area: fot;
}

main {

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows:100px repeat(11,auto) ;
  grid-template-areas:
    "Header"
    "nav"
    "bild4"
    "text0"
    "bild1"
    "text2"
    "bild2"
    "text1"
    "bild3"
    "text3"
    "bild5"
    "fot"
    ;
}

footer{
  background-color: #020659;
  color: white;
  text-align: center;


}
@media only screen and (min-width: 600px) {
  img {
    width: 50vw;

  }

  main {
 
  
    /* display: grid; */
 
  
    grid-template-columns: 1fr 1fr;
    grid-template-rows:100px repeat(7, auto) ;
    grid-template-areas:
      "Header Header"
      "nav nav"
      "bild1 text0"
      "text2 bild2"
      "bild3 text1"
      "text3 bild4"
      "bild5 bild5"
      "fot fot"
      ;
  }
}





@media only screen and (min-width: 1000px) {
img{
width: 33vw;

}
main{ 
  
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 53px  repeat(6, auto) ;
  grid-template-areas: 
  "Header Header Header"
  "nav nav nav"
  "bild1 bild3 bild2"
  "bild5 text0 bild4"
  ". text2 ."
  ". text1 ." 
   ". text3 ."
  "fot fot fot";
}










}