body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",sans-serif;
  background: #F0FFF0;
  margin: 0;
}

#wrap {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",sans-serif;
  font-size: 21px;
  line-height: 1.6;
  margin: 0;
  display: flex;
  color: #F0FFF0;
  transition: transform .4s cubic-bezier(.25, .1, .25, 1);
}

#wrap:not(:target) {
  transform: translate3d(-350px, 0, 0);
}

#wrap:target {
  transform: translate3d(0, 0, 0);
}

#open,
#close {
  color: #F0FFF0;
  height: 44px;
  text-align: right;
  display: block;
  margin-right: -25px;
}

#wrap:target #open,
#wrap:not(:target) #close {
  display: none;
}

#wrap:target #open {
  display: none;
}

.nav a {
  color: #CCFFCC;
  text-decoration: none;
  display: block;
}

.header {
  color: #F0FFF0;
  background: #01796F;
  width: 400px;
  padding: 0 20px;
  display:inline-block;
  vertical-align:top;
}

.nav {
  padding: 25px;
}

.main {
  background: #F0FFF0;
  padding: 25px;
  flex: 1;
  display:inline-block;
}

h1 {
color: #01796F;
}

p {
  max-width: 590px;
  color: #01796F;
}