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

body {
  font-size: 1.5vh;
  font-family: 'GFS Didot', serif;
 overflow-x: hidden;
 
 
}

header {
  width: 100vw;
  height: 10vh;
  background-color: rgb(0, 145, 194);
  display: grid;
  grid-template-columns: 1fr 0.5fr 6fr;
  grid-template-areas: "meny . title ";
  font-size: 1.5vh;
}

nav {
  display: none;
  flex-direction: column;
  background-color: rgb(0, 145, 194);
  border-style: solid;
  border-radius: 10px;
  position: absolute;
  z-index: 5;
  width: 20vw;
  height: 30vh;
  line-height: 4.5vh;
  top: 5vh;
  text-align: left;
}


#title {
  grid-area: title;

}

#meny {
  grid-area: meny;
  border-style: solid;
  border-radius: 10px;
  width: 20vw;
  height: 5vh;
  text-align: center;

}

#imgdesign {
  padding-top: 20px;
  height: 200px;
  width: 100vw;
  display: grid;
  grid-template-columns: 3vw 300px 3vw;
  grid-template-areas:
  "but0 pic but1" 
 
}
#sinlepic {padding-left: 2vw;}
#pic {
  grid-area: pic;
}
button {
  display: none;
}

#button0 {
  grid-area: but0;

}


#button1 {
  grid-area: but1;

}
#singlepic { 
  padding: 0px 0vw 0px 5vw;
}
main {
  height: 107vh;
  width: 100vw;
  flex-direction: column;
  justify-content: center;
}

.sec {
  padding: 0px 0vw 0px 5vw;
  width: 80vw;
}
#fot3 {margin: 0%;}




footer {
 
bottom: 0;
  margin-top: 15vh;
  background-color: rgb(0, 145, 194);
  font-size: 1.5vh;
  width: 100vw;
  height: 5vh;
 
}
.cadb {background-color: #85C384;
}
.sida3 {background-color: #444b43;
  color: 
  #e8e7e8;
}


.darkmode {
  color: white;
  background-color: black;
}

.lidarkmode {
  color: white;
}

.switch {
  position: relative;
  display: inline;
  width: 30px;
  height: 34px;
  border-radius: 25px;
  background-color: white;

}

.darktoggle {
  position: absolute;
  width: 45px;
  top: 0;
  left: 0;
  right: 0;
  bottom: -5px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  z-index: 2;
  border-radius: 25px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;

}

.darktoggle:before {

  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  left: 4px;
  bottom: 2px;
  background-color: black;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
  z-index: 2;
}

input:checked+.darktoggle {
  background-color: white;
}

input:focus+.darktoggle {
  box-shadow: 0 0 1px black;
}

input:checked+.darktoggle:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
  
  
}

a:hover {
  text-decoration: underline;
  
}

a:active {
  text-decoration: underline;
  
}
@media only screen and (min-width: 400px) {#fot4 {top:150vh} }
@media only screen and (min-width: 600px) {
  #imgdesign {
    height: 350px;
    grid-template-columns:5vw 3vw 500px 3vw;
    grid-template-areas: ". but0 pic but1";

  }
 

  button {
    display: block;
    width: 3vw;
    height: 270px;

  }
 #singlepic { padding-left: 8vw;}
 main { height:80vh;}
}

@media only screen and (min-width: 769px) {
  #imgdesign {
    height: 400px;
    grid-template-columns:5vw 3vw 600px 3vw
  }
 button { height: 324px;}

 

}