body {
  background-color: #e74c3c;
  animation: bg-color 10s infinite;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

@keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}

#menu {
      height: 100%;
      position: fixed;
      background-color: #FED057;
      width: 300px;
      transition: 1000ms all cubic-bezier(0.19, 1, 0.22, 1);
      transform: translateX(-100%);
      left: 60px;    
    }

    #menu.expanded {
      transform: translateX(0%);
      left: 0px;
    }

    .menu-inner {
      width: 100%;
      height: 100%;
      position: relative;
    }

    #blob {
      top: 0;
      z-index: -1;
      right: 60px;
      transform: translateX(100%);
      height: 100%;
      position: absolute;
    }

    #blob-path {
      height: 100%;
      fill:  #FED057;
    }

    .hamburger {
      right: 20px;
      position: absolute;
      width: 20px;
      height: 20px;
      margin-top: -10px;  
    }

    .hamburger .line {
      width: 100%;
      height: 4px;
      background-color: #fff;
      position: absolute;
    }

    .hamburger .line:nth-child(2) {
      top: 50%;
      margin-top: -2px;
    }

    .hamburger .line:nth-child(3) {
      bottom: 0;
    }

    h1 {
      position: fixed;
      right: 0;
      margin: 0;
    }

    ul {
      padding: 0;
      list-style: none;
      width: 80%;
      margin-left: 10%;
      position: absolute;
      top: 10px;
    }

    ul li {
      padding: 15px 0;
    }

    ul li a {
      color: #fff;
      font-family: sans-serif;
      font-weight: bolder;
      font-size: large;
      padding: 20px 0;
      text-decoration: none;
    }

    ul li a:hover {
      color: #191970;

    }

    h2 {
      position: absolute;
       left: 40%;
      margin: 0;
    }

    h2 .logo {
      width: 30vw;
    }