* {
    margin: 0;
    padding: 0;
}

body {
    background-color: rgb(34, 34, 34);
    font-family: 'Montserrat', sans-serif;
    /* font-family: 'Outfit', sans-serif; */
}


img {
    width: 600px;
    height: 400px;
    z-index: -1;
}


li a {
    text-decoration: none;
    color: rgb(240, 239, 239);
    padding-left: 2rem;
    transition: color 0.2s ease-out 10ms;
}

li a:hover {
    color: orange;
    /* background-color:rgb(209, 209, 209) */
}

.bio {
    font-family: 'Space Mono', monospace;
}

.fa-react, .fa-html5, .fa-python, .fa-js, .fa-swift, .fa-gem {
    transition: color 0.5s ease-out 10ms;
}

.fa-js:hover, .fa-html5:hover, .fa-react:hover, .fa-python:hover, .fa-swift:hover, .fa-gem:hover{
    color: rgb(240, 239, 239);
}


.name {
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 100%;
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    font-size: .75em;
    font-family: League Spartan,Helvetica,Arial,sans-serif;
    opacity: 0;
    transition: opacity .3s,-webkit-transform .3s cubic-bezier(.694,.048,.335,1);
    transition: opacity .3s,transform .3s cubic-bezier(.694,.048,.335,1);
    transition: opacity .3s,transform .3s cubic-bezier(.694,.048,.335,1),-webkit-transform .3s cubic-bezier(.694,.048,.335,1);
}