/**/
body{
    margin: 0;
    background-color: #000;
    
}

.nav{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    z-index: 30;
    width: 80px;
    height: 200px;
    position: fixed;
    top: 30px;
    backdrop-filter: blur(2px);
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: rgba(95, 100, 105, 0.267);
    animation: NavIn ease-out 1.2s;
}

.nav img{
    width: 24px;
    object-fit: cover;
    opacity: 1;
    
}
.nav img:hover{
    opacity: 0.65;
    scale: 1.16;
    transform: translateY(-2px);
    transition:all ease-in 0.11s;
    cursor: pointer;
}

/*Animation*/

@keyframes NavIn {
    from{
        opacity: 0;
        transform:translate(-50px,0px) ;
    }
    to{
        opacity: 1;
        transform: translate(0,0);
    }
}

@keyframes NavLowerIn {
    from{
        opacity: 0;
        transform:translate(0px,60px) ;
    }
    to{
        opacity: 1;
        transform: translate(0,0);
    }
}