h1 {color:black;
  background:orange;
text-align:center;}

h2 {text-align: center;
background:orange;}

body { 
  background: #2fee7b;
}

a {color:#07045D;
}



.webpage {display: inline-block;
  flex-flow: row nowrap;
  justify-content: space-evenly;
 
}

.image {
  width: 100%;
  height:100%;
}

.link {padding: 1em;
  display: inline-block;
 justify-content: space-evenly;
 flex-flow: row nowrap;
 
}

.picture {
  display: flex;
  flex-direction: column;
  margin:15px;
}

#navitems {
  display: flex;
}

#navitems a {
	flex-grow: 1;
  flex-basis: 0;
  padding: 10px;
  text-decoration: none;
  text-align: center;
}
#navitems a:hover {
	background-color: purple;
  color: white;
}

#nav label,
#hamburger{
  display: none;
}

/*
  #nav {
    background-color: blue;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  #nav a {
    text-decoration: none;
    padding: 1em;
    margin: 0 2em;
  }
  #nav a:hover {
    background-color: blue;
    color: white;
  }
*/


@media (min-width: 700px) {
  .picture {
    max-width: 40vw;
  }
}

@media (min-width: 1100px) {
  .picture {
    max-width: 20vw;
  }
}

@media screen and (max-width: 576px){
  #navitems a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border-top: 1px solid #333;
  }
  #nav label { 
    display: inline-block; 
    color: white;
    background: blue;
    font-style: normal;
    font-size: 1.2em;
    padding: 10px;
    cursor: pointer;
  }
  #navitems { display: none; }
  #nav input:checked ~ #navitems { display: block; }
}