body {
  font-family: 'Quicksand';
  height: 100vh;
  background:url('../img/bg.jpg') center/cover;
  margin:0;
}
body::before {
  content:'';
  background:rgba(0,0,0,0.35);
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
}
nav {
  position: absolute;
  top:50px;
  right:50px;
  display: flex;
  align-items: center;
  transition:.3s all ease-in-out;
}
nav a {
  color:#fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 25px;
  margin-left: 30px;
  transition:.3s all ease-in-out;
}
nav a:hover {
  color:skyblue;
  transform:scale(1.1)
}

@media screen and (max-width:1024px) {
  nav {
    top:auto;
    right:auto;
    flex-direction: column;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    transform:translateX(-100%);
  }
  nav.active {
    transform:translateX(0);
  }
  .burger-menu {
    width: 40px;
    height: 40px;
    border:3px solid #fff;
    position: absolute;
    z-index:1;
    top:20px;
    right:20px;
    border-radius:8px;
    cursor:pointer;
    transition:.3s all ease-in-out;
    display: flex;
    flex-direction:column;
    justify-content: space-evenly;
    align-items:center;
  }
  .burger-menu.active, .burger-menu:hover {
    border-color:yellowgreen;
    transform:rotate(180deg);
  }
  .burger-menu.active div:nth-of-type(1), .burger-menu:hover div:nth-of-type(1)  {
    width: 20%;
  }
  .burger-menu.active div:nth-of-type(2), .burger-menu:hover div:nth-of-type(2) {
    width: 50%;
  }
  .burger-menu.active div:nth-of-type(3), .burger-menu:hover div:nth-of-type(3) {
    width: 20%;
  }
  .burger-menu div {
    height: 3px;
    background:#fff;
    border-radius:5px;
    width: 70%;
    transition:.3s all ease-in-out;
  }
}