@keyframes navSlide{
    0%{
        opacity: 0;
        transform: translateY(-100%);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

.header-main{
    width: 100%;
    height:60px;
    background-color: transparent;
    display:flex;
    justify-content: space-between;
}

.header-main-logo{
    width: fit-content;
    height: 100%;
    display:flex;
    padding-left:10px;
}
.header-main-logo img{
    height: 30px;
    align-self:center;
}

.header-main-nav{
    animation:navSlide 1s ease-out forwards;
    width: fit-content;
    height: 100%;
    color:white;
    text-decoration: none;
    padding-left:1rem;
    padding-top:2rem;
}

.header-main-nav ul{
    list-style: none;
}

.header-main-nav ul li{
    display:inline;
    float:left;
    
}

.header-main-nav ul li a{
    color:white;
    text-decoration: none;
    padding:0 10px;
    line-height:25px;
    display:block;
    height: 100%;
    transition: all 200ms ease-in-out;
}

.header-main-nav ul li a:hover{
    border:1px solid var(--main-color);
    transform: translateY(-5px) scale(1.03);
    cursor:pointer;
    color:gold;
}

.header-main-sm{
    animation:navSlide 1s ease-out forwards;
    width: fit-content;
    height: 100%;
    padding-right:30px;
    display:flex;
    align-items:center;
    column-gap:10px;
    padding-top:2rem;
}

.header-main-sm-ln{
    width:65px;
    height: 65px;
    background-image: url(../images/linkedin.png);
    background-repeat: no-repeat;
    background-size:cover;
}

.header-main-sm-ln:hover{
    cursor:pointer;
    transition: all 200ms ease-in-out;
    transform: translateY(-5px) scale(1.03);
}

.header-main-sm-in{
    width:40px;
    height: 40px;
    background-image: url(../images/instagram.png);
    background-repeat: no-repeat;
    background-size:cover;
}

.header-main-sm-in:hover{
    cursor:pointer;
    transition: all 200ms ease-in-out;
    transform: translateY(-5px) scale(1.03);
}

.header-main-sm-gh{
    width:40px;
    height: 40px;
    background-image: url(../images/github.png);
    background-repeat: no-repeat;
    background-size:cover;
}

.header-main-sm-gh:hover{
    cursor:pointer;
    transition: all 200ms ease-in-out;
    transform: translateY(-5px) scale(1.03);
}