.off-screen-menu{
    background-color: rgb(34,37,49);
    height:100vh;
    width:100%;
    max-width: 450px;
    position: fixed;
    top:0;
    right:-450px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    font-size: 3rem;
    transition:.3s ease
}
.off-screen-menu.active{
    right:0
}
nav{
    padding:1rem;
    display:flex;
    background-color: rgb(34,37,49);
}

.hamburger-menu{
    height:50px;
    width:50px;
    margin-left:auto;
    position:relative;
}
.hamburger-menu span{
    height:5px;
    width:100%;
    background-color:#6F86ff;
    border-radius:25px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    transition:.3s ease
}
.hamburger-menu span:nth-child(1){
    top:25%;
}
.hamburger-menu span:nth-child(3){
    top:75%;
}
.hamburger-menu.active span:nth-child(1){
    top:50%;
    transform:translate(-50%,-50%) rotate(45 deg);
}
.hamburger-menu.active span:nth-child(2){
opacity:0;
}
.hamburger-menu.active span:nth-child(3){
    top:50%;
    transform:translate(-50%,50%) rotate(-45 deg);
}