@import url("font/web/inter.css");

body {
    font-family: "Inter";
    overflow-y: scroll;


}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 20vh;
    scrollbar-width: none;
}
html.no-smooth{
    scroll-behavior: auto;
}
#projects{
    scroll-behavior:unset;
}

::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}
.fa-arrow-up{
    transform:rotate(45deg);
}

#role {
    font-family: monospace;

    overflow: hidden;
    
}
#role::after{
    content: "";

    overflow: hidden;
    border-right: 3px solid black;
    animation: blink 0.7s infinite;
}

#nav nav {
    transform: translateX(-100px);
    transition: transform .3s ease-out;
}

#nav:hover nav {
    transform: translateX(0px);
    transition: transform .3s ease-out;
}

#nav:hover div {
    transform: translateX(-100px);
    transition: transform .3s ease-out;
}

#nav div {
    transform: translateX(0px);
    transition: transform .3s ease-out;
}


@keyframes blink {
    0% {
        border-color: transparent;
    }

    50% {
        border-color: black;
    }

    100% {
        border-color: transparent;
    }
}

img.rounded-full:hover {
    transform: translateY(-5px);
    transition: transform ease-out .2s
}

img.rounded-full {
    transition: transform ease-out .2s
}

.shown {
    opacity: 1;
    transition: all .6s ease-out;
}

.hidden-b {
    opacity: 0;
    transform: translateY(30px);
    transition: all .6s ease-out;
}

.hidden-t {
    opacity: 0;
    transform: translateY(-30px);
    transition: all .6s ease-out;
}

.hidden-r {
    opacity: 0;
    transform: translateX(30px);
    transition: all .6s ease-out;
}

.hidden-l {
    opacity: 0;
    transform: translateX(-30px);
    transition: all .6s ease-out;
}

.jump:hover {
    transform: translateY(-5px);
    transition: transform .3s;
}

.jump {
    transform: translateY(0px);
    transition: transform .3s;
}

#projects {
    margin-bottom: 100px;
    transition: max-height .8s ease-out;
}
li a{
    color: #0066cc;

}
a:hover{
    text-decoration: underline;
}