html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: Roboto, serif;
    background: linear-gradient(to right, #8e9eab, #eef2f3);
    
}

header {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700
}

nav {
    height: 5em
}

nav ul li a,
nav ul li a:after,
nav ul li a:before {
    transition: all .5s
}

nav ul li a {
    position: relative;
    transition: all 2s
}

nav ul li a:after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 0%;
    content: '.';
    color: transparent;
    background: #aaa;
    height: 1px
}

nav ul li a:hover {
    color: #000;
    z-index: 1
}

nav ul li a:hover:after {
    z-index: -10;
    animation: fill 1s forwards;
    opacity: 1
}

section:focus {
    outline: 0
}

#home .parallax-container {
    height: 100vh;
    font-family: Montserrat, sans-serif
}

#home .container {
    width: 90%;
    padding-top: 4em
}

#profile-pic {
    width: 100%;
    border-radius: 50%;
    box-shadow: 0 0 3em #295a68;
    transition-property: box-shadow;
    transition-duration: 1s
}

#profile-pic:hover {
    box-shadow: none
}

#about .parallax-container {
    padding-top: 100px;
    height: 100vh
}

#resume .timeline-ico i {
    float: left;
}

.fa {
    padding: .5em;
    font-size: 2em;
    width: 2em;
    text-align: center;
    text-decoration: none;
    margin: .5em 1em 1em 1em;
    border-radius: 50%;
    background-color: #000;
    color: #fff
}

.fa:hover {
    animation: spin .5s linear 1
}

.fa-linkedin:hover {
    background-color: #007bb5;
    color: #fff
}

.fa-github:hover {
    background-color: #999;
    color: #fff
}

.fa-medium:hover {
    background-color: #0eb344;
    color: #fff
}

.fa-free-code-camp:hover {
    background-color: #006402;
    color: #fff
}

#bio-1,
#bio-2 {
    font-size: 1.2em;
    text-align: justify
}

#bio-2 {
    text-indent: 5em
}


#featured-work .row:first-child {
    padding-bottom: 5em
}

#contact {
    position: relative
}

#contact .container {
    position: absolute;
    bottom: -20em;
    left: 25%;
    width: 50%;
    background: linear-gradient(to right, #ffffff, #abbaab);
    z-index: 10;
    opacity: .95
}

.contact-message {
    text-align: justify
}

#submit {
    font-family: Montserrat, sans-serif;
    font-size: 1.5em;
    transition-property: box-shadow;
    transition-duration: 1s
}

#submit:hover {
    box-shadow: .2em .2em .1em #555
}

footer {
    background-color: #1c262f;
    color: #ccc;
    font-family: Montserrat, sans-serif;
    font-size: 1em;
    text-align: center;
    padding: 20em 0 2em 0
}

@keyframes spin {
    100% {
        transform: rotateY(360deg)
    }
}

@keyframes fill {
    0% {
        width: 0%;
        height: 1px
    }

    50% {
        width: 100%;
        height: 1px
    }

    100% {
        width: 100%;
        height: 100%;
        background: #fff
    }
}

@media only screen and (max-width:601px) {
    #home .parallax-container {
        height: 130vh
    }

    #name {
        font-size: 3.5em
    }

    #intro {
        font-size: 2.5em
    }

    #about .parallax-container {
        height: 110vh
    }

    main {
        display: none
    }

    .fa {
        margin: 0;
        background-color: transparent
    }

    #bio-1,
    #bio-2 {
        font-size: 1em
    }

}

@media only screen and (min-width:601px) {
    .social-media {
        display: none
    }
}