*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
::-webkit-scrollbar{
    display: none;
}
li{
    list-style-type: none;
}
.nav-bar{
    height:7vh;
    background: rgb(0, 38, 26);
}
.bg{
    width: 100%;
    height: 94vh;
    background-image: url(https://images.unsplash.com/photo-1476231682828-37e571bc172f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.link{
    width: 100%;
    height: 94vh;
    position: absolute;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0,.7);
    left: -2540px;
    transition: .4s left;
    transition-delay: .2s;
}
.active {
    left: 0px;
}

.link li{
    font-size: 2.5rem;
    text-align: center;
    font-weight: 500;
    cursor: pointer;
    padding: .5em 1em;
    transition: .3s all;
    margin-block:.5em;
    transition: .5s opacity;
}
.link li:hover{
    border-radius: 15px;
    background: darkolivegreen;
    color: rgb(255, 219, 219);
}
.line{
    outline: none;
    transition: .4s all;
    opacity: .8;
}
.ham{
    width: 3%;
    height: 2.7rem;
    position: relative;
    top: 5px;
    left:3rem ;
    transition: .5s all;
    cursor: pointer;
}
.ham.active:hover{
    scale: 1.1;
}
.ham.active .one{
    top: 30px;
    rotate: 45deg;
}
.ham.active .two{
    margin-left: -10px;
    opacity: 0;
} 
.ham.active .three{
    rotate: -45deg;
    bottom: 10px;
}
.nav-bar .ham .line{
    position: absolute;
    height: 4px;
    width:1.7rem;
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
    left: 3px;
    display: block;
}
.ham .one{
    top: 13px;
}
.ham .two{
    top: 22px;
}
.ham .three{
    bottom:9px;
}