angularProject/content/css/styles.css

@font-face {
  font-family: "Helvetica Neue";
  src: url('../fonts/helveticaneuecyr-light.otf');
}

@font-face {
  font-family: "AvenirNextLTPro-Demi";
  src: url('../fonts/AvenirNextLTPro-Demi.otf');
}

body{
  font-family: Helvetica;
  margin: 0;
}

h1,h2,h3{
  margin: 0;
}

ul,li {
  margin: 0;
  padding: 0;
}

body * {
  box-sizing: border-box;
}

/* navbar */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  background-color: #F3F3F5;
}

.navbar .fa-bars {
  display: inline-block;
  cursor: pointer;
  color: #010101;
  width: 10%;
  padding-left: 25px;
  padding-top: 15px;
  text-align: left;
  font-size: 22px;
}

.navbar .logo {
  display: inline-block;
  font-family: "Helvetica Neue",Arial,sans-serif;
  font-weight: bold;
  font-size: 25px;
  letter-spacing: 0.1em;
  width: 80%;
  text-align: center;
}

.navbar .undefined-btn {
  width: 80%;
  display: inline-block;
}
/* navbar */


/* navmenu */
.nav-menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 281px;
  background-color: #1D1D1F;
  padding: 50px;
  padding-top: 100px;
  transform: translateX(-281px);
}

.nav-menu li {
  list-style-type: none;
  padding: 15px 0;
}

.nav-menu li a {
  font-family: "AvenirNextLTPro-Demi", Arial, sans-serif;

  color: #fff;
  text-decoration: none;
}
/* navmenu */

.open-menu {
  transition: all 1s cubic-bezier(.645,.045,.355,1);
  transform: translateX(281px);
}

.close-menu {
  transition: all 1s cubic-bezier(.645,.045,.355,1);
  transform: translateX(0px);
}