html {
  background-color: black;
}

/* Layout */
body {
  display: flex;
	margin: 0 auto; max-width: 1620px;
  background-color: antiquewhite;
}
.menu-toggle {
  display: none;
}
menu {
  height: 100vh; width: 20%; max-width: 350px; min-width: 250px;
	position: sticky; top: 0; left: 0;
	padding: 0; margin: 0; z-index:5;
	outline:none;  
  background-color: antiquewhite;
  overflow-y: scroll;

  .meta_buttons {
    margin: 0; padding: 0 10%;
  }

  figure {
    margin: 2vh 0 0 0; padding: 0 10%;

    h2 {
      text-align: center;
    }
    img {
      width: 100%;
      max-width: 100%;
    }
  }
  nav {
    margin: 0 0 2vh 0;
    
    ul {
      list-style: none;
      padding: 0 10%;
    }

    li {
      padding: 0.2em 0;
    }
  }
}
main {
  position:relative;
	height:100vh; width: 100%;
  overflow-y: scroll;
}
main article {
  margin: 3vh auto; padding: 0; max-width: 90%;
}
.main-filter {
  display: none;
}
/* Typography */
html {
  font-family: sans-serif;
}
a,a:visited,a:link,a:focus {
  text-decoration: none;
  color: purple;
  transition: color 0.5s;
}
a:hover {
  color: darkorchid;
  transition: color 0.5s;
  text-decoration: underline;
}
figcaption {
  font-size: 1.5rem;
}

footer {
  display: flex; justify-content: space-between;
  position: sticky; bottom: 1vh; left: 1vw; right: 1vw;
  padding: 1em;
  border-top: 1px solid black; border-bottom: 1px solid black;
  background-color: #333; box-shadow: 0 10px 10px grey;

  a,a:visited,a:link,a:focus,a:hover {
    text-decoration: none;
    color: lightgrey;
    transition: color 0.5s;
  }
}

article h1 {}
article h2 {}
article h3 {}
article h4 {}
article h5 {}

/* Responsive */
@media only screen and (max-width: 900px) {
  body {
    overflow-y: hidden;
  }
  .menu-toggle {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3vh;
    z-index: 10;
    background-color: black; color: white;
    text-align: center;

    &:focus + menu,&:active + menu,&:target + menu {
      top: 10vh;
      transition: top 0.7s ease-in-out;
    }
    &:focus ~ .main-filter,&:active ~ .main-filter,&:target ~ .main-filter {
      display: block;
      transition: display 0.3s ease-in-out;
    }
  }
  menu {
    height: 90vh; width: 100vw; max-width: 100%; min-width: 100%;
    position: absolute; top: 100vh; left: 0; right: 0; 
    padding: 0; margin: 0; z-index:5;
    outline:none;  
    background-color: antiquewhite;
    overflow-y: scroll;
    transition: top 1s ease-in-out;
  }
  .main-filter {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: black;
    opacity: 0.5;
    transition: display;
  }
  main {
    padding-top: 3vh;
    height: 97vh;
  }
}