html {
  max-width: 100%;
  padding: 0;
  margin: 0;
}
body {
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: 10vh 90vh;
  grid-template-areas: 
    "logo menu"
    "main main";
}

#logo {
  grid-area: logo;
  background: #353936;
}

menu {
  grid-area: menu;
  background: #353936;
  margin: 0 auto;
  width:100%;
  height: 100%;
  padding: 0px;
  align-items: center; 
}

menu ul {
  color: #fff;
  font-size: 1.5em;
  list-style-type: none;
  text-align: right;
  margin-right:10%;
  margin-top: 3%;
}

menu ul li {
  cursor: pointer;
  padding: 2px;
}

menu ul li:hover {
  background-color: rgba(255,255,255,0.1);
}


main {
  position: relative;
  padding: 0;
  grid-area: main;
  background: #e5e6e5;
  width: 100%;
}

#graphic {
  width:50%;
  position: absolute; 
  top: 20%;
  left: 25%;
}

path#JDub.start {
  animation: animate 3s cubic-bezier(0,0.23,1,.1);  
}

path#JDub {
  stroke: #333;
  stroke-dasharray: 334;
  stroke-width: 0.1px;
  opacity: 1;
}

@keyframes animate {
  0% {
    opacity: 0;
    fill: none;
    stroke-dashoffset: 334;
  }

  10% {
    opacity: 1;
    fill: none;
    stroke-width: 0.1px;
    stroke-dashoffset: 334;
  }

  55% {
    stroke-width: 0.3px;
  }

  90% {
    fill: rgba(20,20,20,0);
  }

  100% {
    opacity: 1;
    fill: rgba(20,20,20,1);
    stroke-dashoffset: 0;
  }
}