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

body{
  display: flex;
  background-color: #EEF5FF;
  margin-bottom: 20vh;
}

header{
  width: 80%;
  height: 15%;
  text-align: center;
  position: absolute;
  background-color: #176B87;
  margin-left: 10%;
  color: #EEF5FF;
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

#huvud{
  margin-top: 3vh;
  font-size: 30px;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

#navigering {
  background-color: rgba(160, 160, 250, 0.5);
  backdrop-filter: blur(10px);
  padding: 1rem;
  border-radius: 2rem;
z-index: 100;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  height: fit-content;
  width: 60vw;
  min-width: max-content;
  max-width: max-content;
  position: fixed;
  bottom: 1.5rem;
  right: 10vw;
  display: flex;
  justify-content: space-between;
  text-decoration: none;
  list-style: none;
  display: inline;
}

li{display: inline;}
a{
  font-size: smaller;
padding: 0.75rem;
text-decoration: none;}


#relevant{
  background-color: #176B87;
  color:#EEF5FF;
  border-radius: 6rem;  
}

#enhetsbild{
  top: 0;
  left: 0;
  position: fixed;
  z-index: 2;
  width: 10%;
  height: auto;
}

.sections{
  border-radius: 2rem;
  padding: 30px;
}

.sectionbread{
z-index: 1;
margin-top: 7.5px;
background-color:#EEF5FF;
padding: 10px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border-radius: 0.5rem;
}

.sectionheaders{
  margin-bottom: 5vh;
  background-color: #86B6F6;
  border-radius: 1rem;
  padding: 10px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  z-index: 1;
  color:#EEF5FF
}

#bildspel1{
  height: 30vh;
  width: 100%;
  border-radius: 2rem;
}
#bildspel2{
  height: 30vh;
  width: 100%;
  border-radius: 2rem;
}
#amnebild{
  width: 100%;
  border-radius: 2rem;
  max-height: 50vh;
}

.modal{
    background-color: rgba(130, 130, 130, 0.5);
    display: none;
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
  /*   https://www.w3schools.com/howto/howto_css_modals.asp */
}
.modal-content{
  background-color: #176B87;
  margin: 10%;
  width: 80%;
  height: 75%;
  text-align: center;
  /* gridda */
  color: white;
  font-size: large;
  border-radius: 0.5rem;
  border: double;
  border-color:#86B6F6
}

.close{
color: black;
font-size: 30px;
}

#myBtn{
  background-color: #176B87;
  border: double;
  border-top-left-radius:   2rem;
  color: white;
  width: 100px;
  height: 100px;
  z-index: 4;
  position: fixed;
  right: 0;
  bottom: 10vh;
  border-bottom-left-radius: 2rem;
}

.namn{
  margin-top: 10px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

@media only screen and (max-width: 600px){
  
.sectionbread{
  background-color: rgba(250, 250, 255, 0.7);
  color: black;
}

  #imgsection{
    z-index: -1;
    position: absolute;
    top: 20vh;
    padding: 10px;
  }
  #imgsection2{
    z-index: -1;
    position: absolute;
    top: 70vh;
    width: 100vw;
    padding: 10px;
  }
  #imgsection3{
    z-index: -1;
    position: absolute;
    top: 102vh;
    padding: 10px;
  }

  #sec1{
    margin-top: 15vh;
  }
  #amnebild{
    max-height: 30vh;
  }
}
@media only screen and (min-width: 600px) {
  
#sec1{
grid-area: sec1;
background-color: #B4D4FF;
}
#sec2{
  grid-area: sec2;
background-color: #B4D4FF;
}
#sec3{
  grid-area: sec3;
background-color: #B4D4FF;
}
#imgsection{
  width: 100%;
  grid-area: img1;
  padding: 10px;
}
#imgsection2{
  grid-area: img2;
  padding: 10px;
  width: 100%;
}
#imgsection3{
  width: 100%;
  grid-area: img3;
  padding: 10px;
}
  main{
    margin-right: 10vw;
    margin-left: 10vw;
    margin-top: 20vh;
    z-index: 4;
     height: 100vh; /*10px 1fr 20px 1fr */ /* 3fr 60px 2fr 20px */
  display: grid;
  grid-template-columns:  3.5fr 3fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:"sec1 img1"
  "img2 sec2"
  "sec3 img3";
  margin-bottom: 800px;
  }
#myBtn{
  width: 250px;
  font-size: larger;
}
#navigering{
  padding: 2rem;
  right: 32vw
}
#relevant{
  padding: 1rem;
}
a{
  font-size: smaller;
}
}
@media only screen and (min-width: 769px) {
  .modal-content{
    width: 60%;
    height: 45%;
    transition: width 2s, height 2s;
  }

  .modal-content:hover{
    width: 80%;
    height: 60%;
  }

.close{
  color: darkgrey;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin-right: 5px;
}

  .close:hover {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#navigering{
  right: 40vw;

}
a{
  font-size: large;
}

}