<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  

<div id="navbar-container" class="navbar">
   <nav>
     <h1>Portfolio</h1>
       <ul>
         <li><a href="#">home</a></li>
         <li><a href="#">about</a></li>
          <li><a href="#">skills</a></li>
          <li><a href="#">projects</a></li>
         <li><a href="#">contact</a></li>
       </ul>
        <a href="javascript:void(0);" class="hamburger-menu" onclick="toggleNav()">
          <i class="fa fa-bars"></i>
        </a>
   </nav>
  </div>

@import url('https://fonts.googleapis.com/css?family=Handlee');

@import url('https://fonts.googleapis.com/css?family=Lato');

* {
  padding: 0;
  margin: 0;
}

/*
====================
  Navbar
====================
*/

#navbar-container {
  position: fixed;
  width: 100%;
  overflow: hidden;
  height: 80px;
  background-color: black;
  box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.3);
}

#navbar-container nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

#navbar-container nav h1 {
  font-family: 'Handlee', cursive;
  font-size: 35px;
  color: white;
  text-align: left;
  padding: 10px 10px 10px 30px;
}

#navbar-container nav ul {
  display: flex;
  list-style: none;
  align-items: center;
  padding-bottom: 10px;
}

#navbar-container nav ul li {
  font-size: 20px;
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  color: white;
  padding: 0px 15px 0px 15px;
}

#navbar-container nav ul li:last-child {
  padding-right: 50px;
}

#navbar-container nav a {
  text-decoration: none;
  color: white;
}

#navbar-container nav a:hover {
  color: rgba(0,212,255,1);
}

#navbar-container .hamburger-menu {
  display: none;
}

/*
====================
  Landing Page
====================
*/

#landing-page-container {
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(64,221,196,1) 0%, rgba(0,212,255,1) 100%);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow-x: hidden;
}

#landing-page-container h1 {
  text-align: center;
  font-family: 'Handlee', cursive;
  color: black;
  font-size: 50px;
}

#landing-page-container h3 {
  text-align: center;
  font-family: 'Handlee', cursive;
  color: black;
  font-size: 30px;
}

/*
====================
  About
====================
*/

#about-container {
  background: #fff;
/*   width: 100vw;
  height: 100vh; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
}

#about-container h1 {
  text-align: center;
  font-family: 'Handlee', cursive;
  color: black;
  font-size: 50px;
  margin-top: 100px;
}

#about-container p {
  text-align: justify;
  font-family: 'Lato', cursive;
  color: black;
  font-size: 15px;
  padding: 50px;
}

/*
====================
  Media Queries
====================
*/

@media screen and (max-width: 700px) {
  #navbar-container ul li {
    display: none;
  }
  #navbar-container .hamburger-menu {
    float: right;
    display: block;
    font-size: 30px;
    padding-right: 20px;
  }
}

@media screen and (max-width: 600px) {
  #navbar-container .responsive {
    position: relative;
  }
  #navbar-container .responsive .hamburger-menu {
    position: absolute;
    right: 0;
    top: 0;
  }
  #navbar-container .responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

function toggleNav {
  var x = document.getElementById("navbar-container");
  if (x.className === "navbar") {
    x.className += " responsive";
  }
  else {
    x.className = "navbar";
  }
}