body {
  font-family: 'Quicksand', sans-serif;
  background:url('../img/marvel-snap.jpg') no-repeat center/cover;
  height: 100vh;
}
.main-nav {
  font-weight: bold;
  position: fixed;
  right:50px;
  top:25px;
}
.main-nav a {
  text-decoration: none;
  color:#fff;
  font-size: 22px;
  margin-left: 30px;
  transition:.2s all ease-in-out;
  display: inline-block;
}
.main-nav a:hover {
  color:#ea32f0;
  transform:scale(1.2);
}


/* Burger-menu */
.burger-menu {
  position: fixed;
  top:20px;
  right:20px;
  border-radius:7px;
  border:2px solid #2bd6e0;
  width: 40px;
  height: 40px;
  cursor:pointer;
  transition:.5s all cubic-bezier(.68,-.55,.265,1.55);
  display: none;
}
.burger-menu div {
  width: 65%;
  height: 3px;
  background:#fff;
  border-radius:5px;
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  transition:.2s all ease-in-out .5s;
}
.burger-menu div:nth-of-type(1) {
  top:30%;
}
.burger-menu div:nth-of-type(3) {
  top:70%;
}
.burger-menu:hover {
  border-color:#ea32f0;
  transform:rotate(180deg);
}
.burger-menu:hover div {
  background:#2bd6e0;
}
.burger-menu:hover div:nth-of-type(1) {
  width: 30%;
}
.burger-menu:hover div:nth-of-type(3) {
  width: 40%;
}

@media screen and (max-width:1024px) {
  .main-nav {
    width: 100vw;
    height: 100vh;
    background:#ea32f059;
    top:0;
    left:0;
    text-align: center;
    transform:translateX(-100%);
    transition:.2s all ease-in-out;
  }
  .main-nav a {
    display: block;
    margin: 15px 0;
  }
  .main-nav div {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
  }
  .burger-menu {
    display: block;
  }
  body:hover .main-nav {
    transform:translateX(0);
  }
}