/*Black #1c1c1c*/
/*Blue 00ddff*/
/*Silver #e5e5e5*/

@keyframes headerDropDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0%);
    }
}

@keyframes showHeader {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes activeHighlight {
    from {
        color: #e5e5e5;
    }
    to {
        color: #00ddff;
    }
}

@keyframes inactiveHighlight {
    from {
        color: #00ddff;
    }
    to {
        color: #e5e5e5;
    }
}

@media screen and (width > 980px) {
    @keyframes showSocials {
        from {
            opacity: 0;
            transform: translate(100%, 65%);
        }
        to {
            opacity: 1;
            transform: translate(95%, 65%);
        }
    }
}

@keyframes fadeInHome {
    from {
        opacity: 0;
        transform: translateX(-25%);
    }
    to {
        opacity: 1;
        transform: translateX(0%);
    }
}


@keyframes moveHomeLeft {
    from {
        z-index: 2;
        opacity: 1;
        transform: translateX(0%);
    }
    to {
        z-index: 1;
        opacity: 0;
        transform: translateX(-25%);
    }
}

@keyframes moveHomeRight {
    from {
        z-index: 1;
        opacity: 0;
        transform: translateX(-25%);
    }
    to {
        z-index: 2;
        opacity: 1;
        transform: translateX(0%);
    }
}

@keyframes moveProjectsLeft {
    from {
        z-index: 1;
        opacity: 0;
        transform: translateX(25%);
    }
    to {
        z-index: 2;
        opacity: 1;
        transform: translateX(0%);
    }
}

@keyframes moveProjectsRight {
    from {
        z-index: 2;
        opacity: 1;
        transform: translateX(0%);
    }
    to {
        z-index: 1;
        opacity: 0;
        transform: translateX(25%);
    }
}

@keyframes rotateReact {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes lightenQuickJump {
    from {
        color: #1c1c1c;
    }
    to {
        color: rgb(1, 1, 1, 0.4);
    }
}

@keyframes darkenQuickJump {
    from {
        color: rgb(1, 1, 1, 0.4);
    }
    to {
        color: #1c1c1c;
    }
}

header {
    animation-name: headerDropDown;
    animation-duration: 2s;
    animation-delay: 0.75s;
    animation-fill-mode: forwards;
}

nav {
    animation-name: showHeader;
    animation-duration: 1.5s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}

#home-btn.highlight {
    animation-name: activeHighlight;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

#projects-btn.highlight {
    animation-name: activeHighlight;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

#home-btn.unhighlight {
    animation-name: inactiveHighlight;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

#projects-btn.unhighlight {
    animation-name: inactiveHighlight;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

#socials {
    animation-name: showSocials;
    animation-duration: 2s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
}

#home.move-home-left {
    animation-name: moveHomeLeft;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

#home.move-home-right {
    animation-name: moveHomeRight;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}

#project-screen.move-projects-left {
    animation-name: moveProjectsLeft;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}

#project-screen.move-projects-right {
    animation-name: moveProjectsRight;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

#reactjs {
    animation-name: rotateReact;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.lighten {
    animation-name: lightenQuickJump;
    animation-duration: 0.55s;
    animation-fill-mode: forwards;
}

.darken {
    animation-name: darkenQuickJump;
    animation-duration: 0.55s;
    animation-fill-mode: forwards;
}