* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

/* PageWra */
div#pageWra {
  display: grid;
  grid-template-areas: "hamburger" "header" "content" "footer" "nav"; }

/* Body */
body {
  font-family: 'Roboto' , sans-serif;
  font-size: 16px;
  margin: 0; }

/* Header */
header {
  grid-area: header;
  padding: .5rem 2vw;
  background-color: rgba(0, 0, 0, 0.3); }

/* Nav */
a.myjump {
  display: block;
  text-decoration: none;
  font-size: 1.7rem;
  width: 60px;
  padding: .5rem 2vw;
  color: white; }

nav {
  grid-area: nav;
  background-color: black;
  height: 100vh; }

nav ul {
  text-decoration: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap; }

nav ul li {
  flex-basis: 100%; }

nav ul li a {
  display: block;
  text-decoration: none;
  font-size: 1.2rem;
  padding: .5rem 2vw;
  background-color: #616161;
  color: #ebebeb; }

nav ul li.active a {
  background-color: #3d3d3d; }

nav ul li a:hover {
  background-color: rgba(24, 24, 24, 0.918); }

/* Main */
main {
  grid-area: content;
  padding: .5rem 2vw;
  min-height: 10rem; }
  main h1 {
    font-size: 1.5rem; }
  main h3 {
    margin-bottom: .4rem; }
  main p {
    font-size: .9rem;
    margin-top: .3rem;
    margin-bottom: 2rem; }

/* Footer */
footer {
  grid-area: footer;
  margin: 0;
  padding: .2rem 0;
  background-color: rgba(0, 0, 0, 0.3);
  color: white; }
  footer p {
    text-align: center; }

/* HamburgerBtn */
div#hamburgerBtn {
  grid-area: hamburger;
  background-color: black; }

@media only screen and (min-width: 35rem) {
  /* PageWra */
  div#pageWra {
    display: grid;
    grid-template-areas: "header header" "nav content" "footer footer";
    grid-template-columns: 150px auto; }

  /* Nav */
  a.myjump {
    display: none; }

  nav {
    height: auto; }

  /* Main */
  main div.right {
    float: right;
    padding-left: .8rem; }

  main div.left {
    float: left;
    padding-right: .8rem; }

  .parent {
    display: grid;
    grid-template-columns: 1fr; }

  figure.one {
    margin: 0; }

  figure.two {
    margin: 0; }

  figure.three {
    margin: 0; } }
@media only screen and (min-width: 60rem) {
  /* PageWra */
  div#pageWra {
    display: grid;
    grid-template-areas: "header" "nav" "content" "footer";
    grid-template-columns: auto;
    max-width: 64rem;
    margin: auto; }

  /* Nav */
  nav ul li {
    flex-basis: auto;
    list-style-type: none; }

  nav ul li a {
    padding: .8rem 2rem; } }