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


header {
  background-color: #1f2833;
  color: #c5c6c7;
  width:100%;
  display:flex;
}

h2, h3 {
  text-align: center;
  padding-top: 2vh;
}

h2 {
  background-color: #f5f3ee;
  font-family: 'Montserrat', sans-serif;
}

h1 {
    float:left;
    padding-top: 3vh;
    padding-left:2vh;
    padding-right:1vh;
    padding-bottom:1vh;
    width:95vh;
    font-size: 4vh;
    width:100%;
    margin-bottom: 2vh;
    color:#c5c6c7;
    text-decoration: none;
}

a {
  text-decoration: none;
  color:#c5c6c7;
  font-family: 'Segoe UI', sans-serif;
  font-weight: 700;
}

p {
    padding: 3vh;
    font-size: 3vh;
    text-align: left;
    text-decoration:none;
    background-color: #f5f3ee;
}

body {
  font-family: 'Fira Sans', sans-serif;
  background-color: #fff;
width:100%;
}

.myLinks {
  transform:scaleY(0);
  transform-origin: top;
  transition:0.3s;
}

.nav {
    overflow: hidden;
  border: 1px solid black;
  top:0;
  width:100%;
  background-color: #1f2833;
  color:#c5c6c7;
}

img {
  width:100%;
  margin-left: auto;
  display:block;
  margin-right: auto;
  border-radius: 5px;
  margin-bottom: 3vh;
}

#start {
  display:none;
}

.topnav a.icon {
  background: #1f2833;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}



.nav a {
  width:100%;
  float:left;
  color: #c5c6c7;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 2.5vh;
  display: block;
  justify-content: center;
  margin: 0 auto;
  border: 1px darkgray;
}

.main {
  margin-top: 30px;
}

.nav a.active {
  color: #c5c6c7;
}

.nav a:hover {
    background-color: #161e28;
  color: #c5c6c7;
}

button {
  background-color: #1f2833;
  border: none; 
  color: #c5c6c7; 
  margin-top: 3vh;
  width:5vh;
  float:right;
  font-size: 6vh; 
  cursor: pointer; 
  top:0;
  display:flex;
  margin-left: 1vh;
  margin-right:5vh;
}

a:active {
  color:#696b6e;
}


button:active {
  color:#696b6e;
}

#planer {
  grid-area: 1;
  display:none;
}

#oss {
  grid-area: 2;
  display:none;
}

#varför {
  grid-area: 3;
  display:none;
}

nav {
  display: grid;
    grid-gap:1.5vh;
    width: 100%;
    height: 100vh;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "1"
                          "2"
                          "3"

}

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

  h1 {
    font-size:4.3vh;
  }

  .nav a {
    width:33.33333%;
    font-size:2.5vh;
  }

  .nav {
    top:0;
    position:sticky;
  }
  
  nav {
    display: grid;
      grid-gap:1.5vh;
      width: 33%;
      height: 100vh;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr;
      grid-template-areas: "1" "2" "3"
  
  }
}

@media only screen and (min-width: 769px) {
button {
  display:none;
}

img {
  padding-right:15%;
  padding-left:15%;
  border-radius: 2vw;
}

h1 {
  font-size:4.5vh;
  color:#161e28;
  display:none;
}

#planer {
  grid-area: 1;
  display:grid;
}

#oss {
  grid-area: 2;
  display:grid;
}

#varför {
  grid-area: 3;
  display:grid;
}

.nav a {
  width:25%;
  font-size:2.48vh;
}

#start {
  grid-area:4;
  display:grid;
}

.nav {
  top:0;
  position:sticky;
}

p {
  padding-right:15%;
  padding-left:15%;
}

  nav {
    display: grid;
      grid-gap:1.5vh;
      width: 100vh;
      height: 100vh;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr;
      grid-template-areas: "1 2 3 4" 
  
  }
}