*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.topnav {
    overflow: hidden;
    background-color: #333;
    position: relative;
    width: 100%;
  }
  
  /* Hide the links inside the navigation menu (except for logo/home) */
  .topnav #myLinks {
    display: none;
  }
  
  /* Style navigation menu links */
  .topnav a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
  }
  
  /* Style the hamburger menu */
  .topnav a.icon {
    background: black;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }
  
  /* Add a grey background color on mouse-over */
 
  
  /* Style the active link (or home/logo) */
  #active {
    background-color: #04AA6D;
    color: white;
    text-align: left;
  }

 




nav{
  display: none;
}
  
header{
    text-align: center;
    font-size: x-large;
    display: none;
}
#sec1{
  margin-top: 2px;
  grid-area: sec1;
border: 3px solid grey;
  width: 100%;
 
}
img{
  width: 100%;
 background-color: #BAC8D9;
  margin-top: 3px;
  grid-area: bild1;
  
}

#sec2{
  grid-area: sec2;
  border: 3px solid grey;
  margin-bottom: 0.5vh;
  width: 100%;

}

#Föregående{
  left: 0px;
}
#Nästa{
  position: absolute;
right: 0px;
}
footer{

    font-size: x-large;
    border: 3px solid grey;
    width: 100%;
    text-align: center;
    height: 10vh;
    grid-area: footer;
    
  }
.Länk1, .Länk2, .Länk3{
  border-bottom:white solid 3px;
}





@media only screen and (min-width:600px){

.grid-container{
  display: grid;
  grid-template-columns:50vw auto;
  grid-template-rows:25vh 25vh auto auto ;
  grid-template-areas: "sec1 bild1"
                       "sec1 bild1"
                       "sec2 sec2"
                       "footer footer"
                       
}
img{
  height: 99.5%;
  margin-left: 0.5vw;
  width:99% ;
}
#active{
  text-align: center;
}
.topnav{
  width: 100%;
}
#sec1{
  width: 100%;
  font-size: large
  
}
#Föregående{
  position: absolute;
  left:50.5vw;
  margin-top: 50.5vh;
}
#Nästa{
right: 0%;
margin-top: 50.5vh;

}
#sec2{
  margin-top: 5vh;
  width: 100%;
  font-size: large;

}
footer{
  width: 100%;
  margin-top: 6%;
 
}






}

@media only screen and (min-width:769px){
.grid-container{
  grid-template-columns: 70vw 29.5vw;
  grid-template-rows: 42vh 21vh 5vh;
  grid-template-areas: "sec1 bild1"
                       "sec2 sec2 "
                       "footer footer"
                       ;
}



  .topnav{
  display: none;
}
header{
  display: block;
  height: 5vh;
  padding-bottom:30px ;
  background-color: #04AA6D;
  color:white;
  border: none;
  text-align: center;
 
}
nav{
  display: block;
  text-align: center;
 border: grey 3px solid;
  margin-top: 3px;
  height: 5vh;
  padding-top: 3px;
  
}
a{
  padding: 50px;
  text-decoration: none;
}
#sec1{
  border: white solid 2px;
}
img{
 width: 100%;
 
}

#Föregående{
  margin-top: 43vh;
  margin-left: 20vw;
}
#Nästa{
  margin-top:43vh ;
  right: 0;
}

#sec2{
  width: 100%;
  border: solid 2px white;
}


footer{
  width: 100%;
  position: absolute;
  bottom: 0px; 
  height: 4%;
  font-size: large;
  text-align: center;
 
}

a:hover{
  color: red;
}
}