/* Nav Buttons Drifting in Space */

@keyframes buttonDrift1 {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    25% {
        transform: translate(-6px, 8px) rotate(-.5deg);
    }
    50% {
        transform: translate(-2px, 4px) rotate(-1.5deg);
    }
    75% {
        transform: translate(8px, -5px) rotate(2deg);
    }
    100% {
        transform: translate(0px, 0px) rotate(0deg);
    }
}

@keyframes buttonDrift2 {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    25% {
        transform: translate(8px, 3px) rotate(-.5deg);
    }
    50% {
        transform: translate(-5px, -8px) rotate(2deg);
    }
    75% {
        transform: translate(5px, -6px) rotate(-1deg);
    }
    100% {
        transform: translate(0px, 0px) rotate(0deg);
    }
}

@keyframes buttonDrift3 {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    25% {
        transform: translate(-6px, -2px) rotate(2deg);
    }
    50% {
        transform: translate(-1px, 8px) rotate(-2deg);
    }
    75% {
        transform: translate(3px, -6px) rotate(-1.5deg);
    }
    100% {
        transform: translate(0px, 0px) rotate(0deg);
    }
}

@keyframes buttonDrift4 {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    25% {
        transform: translate(3px, -6px) rotate(-1.5deg);
    }
    50% {
        transform: translate(-8px, -1px) rotate(2deg);
    }
    75% {
        transform: translate(-2px, 4px) rotate(-1.5deg);
    }
    100% {
        transform: translate(0px, 0px) rotate(0deg);
    }
}

@keyframes buttonDrift5 {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    25% {
        transform: translate(-5px, 8px) rotate(-.5deg);
    }
    50% {
        transform: translate(-2px, 5px) rotate(-1.5deg);
    }
    75% {
        transform: translate(3px, -7px) rotate(-1.5deg);
    }
    100% {
        transform: translate(0px, 0px) rotate(0deg);
    }
}

/* Page Sliding */

@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        left: -250px;
    }
    100% {
        opacity: 1;
        left: 0px;
    }
}

@keyframes slideInFromRight {
    0% {
        opacity: 0;
        right: -250px;
    }
    100% {
        opacity: 1;
        right: 0px;
    }
}

/* Articles Slide-In */
@keyframes newArticle {
    0% {
        opacity: 0;
        top: 50px;
    }
    100% {
        opacity: 1;
        top: 0px;
    }
}