@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
body{
    background-image: url('https://images.unsplash.com/photo-1673901736420-0bf90fcf1b27?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzYyNzMwMTk&ixlib=rb-4.0.3&q=80');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}
header{
    position: sticky;
    top: 0;
    display: flex;
    justify-content: flex-end;
    padding-right: 15px;
    height: 50px;
}
#menu{
    display: flex;
    justify-content: space-evenly;
    background-color: black;
    top:0;
    position: sticky;
    color: white;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    visibility: hidden;
}
#nav{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    fill:black;
    transition: fill 1s, background 1s, width .7s,height .7s;

}
#nav:hover{
    background: black;
    fill: white;
    width: 50px;
    height: 50px;
}
#nav:active{
    width: 50px;
    height: 50px;
}
.navbar{
    display: flex;
    fill: white;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    transition: background-color 1s,fill 2s;
    
}
.icons{
    width: 100%;
}
.navTextLeft{
    color: black;
    text-align: right;
    width: 100%;
    font-size: 40px;
    font-weight: bolder;
    font-family: 'Righteous', cursive;
}
.navTextRight{
    color: black;
    text-align: left;
    width: 100%;
    font-size: 40px;
    font-weight: bolder;
    font-family: 'Righteous', cursive;
}
.navbar:hover{
    background-color: white;
    fill: black;
}
#careerSkill{

    /*display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: beige;
    */
}
#projects{

    /*display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    */
}
#bodyDiv{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    font-family: 'Righteous', cursive;
    font-size: 100px;
    font-weight: bold;
}
@keyframes navselect{
    from{opacity: 0%;
        visibility: hidden;
        height: 80%;

    }
    to{
        opacity: 100%;
        visibility: visible;
        height: 100%;
    }
}

@keyframes unselect{
    from{ opacity: 100%;
        visibility: visible;
        height: 100%;

    }
    to{
        opacity: 0%;
        visibility: hidden;
        height: 80%;
    }
}