body {
  font-family: 'Quicksand', sans-serif;
  background:url('../img/marvel-snap.jpg') no-repeat center/cover;
  height: 100vh;
}
.main-nav {
  font-weight: bold;
  text-align: right;
  padding:20px 50px;
}
.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);
}

@media screen and (max-width:960px) {
  .main-nav {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background:#ea32f059;
    text-align: center;
    translate:-100% 0;
    transition:.2s all ease-in-out;
  }
  body:hover .main-nav {
    translate:0;
  }
  .main-nav div {
    position: absolute;
    top:50%;
    left:50%;
    translate: -50% -50%;
  }
  .main-nav a {
    display: block;
    margin:20px 0;
  }
  .burger-menu {
    height: 40px;
    width: 40px;
    border:2px solid #2bd6e0;
    border-radius:8px;
    position: fixed;
    top:20px;
    right: 20px;
    transition:.5s all cubic-bezier(0.68, -0.55, 0.27, 1.55)
  }
  .burger-menu:hover {
    border-color:#ea32f0;
    rotate:180deg;
  }
  .burger-menu div {
    width: 65%;
    height: 3px;
    background:#fff;
    border-radius:5px;
    top:50%;
    left:50%;
    translate:-50% -50%;
    position: absolute;
    transition:.3s all ease-in-out .5s;
  }
  .burger-menu:hover div {
    background:#2bd6e0;
  }
  .burger-menu div:nth-of-type(1) {
    top:30%;
  }
  .burger-menu:hover div:nth-of-type(1) {
    width:30%;
  }
  .burger-menu div:nth-of-type(3) {
    top:70%;
  }
  .burger-menu:hover div:nth-of-type(3) {
    width:40%;
  }

}