/*** TECHSTACK SLIDE ***/
@-webkit-keyframes bgSlide {
    0% {
        opacity: 0;
    }
    3.33% {
        opacity: 0.35;
    }

    46.67% {
        opacity: 0.35;
    }

    50% {
        opacity: 0;
        margin-top: -136px;  /* hello sir good morning. do you happen to know about translate? 💀 */
     
    }

    53.33% {
        opacity: 0.35;
    }

    96.67% {
        opacity: 0.35;
        color: #333;
    }

    100% {
        opacity: 0;
        margin-top: 0px;
    }
}
@keyframes bgSlide {
    0% {
        opacity: 0;
    }
    3.33% {
        opacity: 0.35;
    }

    46.67% {
        opacity: 0.35;
    }

    50% {
        opacity: 0;
        margin-top: -136px;
    }

    53.33% {
        opacity: 0.35;
    }

    96.67% {
        opacity: 0.35;
    }

    100% {
        opacity: 0;
        margin-top: 0px;
    }
}

/*** HARDWARE TRACE #1 ***/
@-webkit-keyframes traceOne {
    12.5% {
        margin-left: 0px;
        margin-top: 0px;
        opacity: 1;
    }

    25% {
        margin-left: 24px;
        margin-top: 0px;
    }

    43.75% {
        margin-left: 64px;
        margin-top: 38px;
    }

    62.5% {
        margin-left: 64px;
        margin-top: 96px;
    }

    87.5% {
        opacity: 1;
        margin-left: 176px;
        margin-top: 96px;
    }
    100% {
        opacity: 0;
        margin-left: 176px;
        margin-top: 96px;
    }
}
@keyframes traceOne {
    12.5% {
        margin-left: 0px;
        margin-top: 0px;
        opacity: 1;
    }

    25% {
        margin-left: 24px;
        margin-top: 0px;
    }

    43.75% {
        margin-left: 64px;
        margin-top: 38px;
    }

    62.5% {
        margin-left: 64px;
        margin-top: 96px;
    }

    87.5% {
        opacity: 1;
        margin-left: 176px;
        margin-top: 96px;
    }
    100% {
        opacity: 0;
        margin-left: 176px;
        margin-top: 96px;
    }
}

/*** HARDWARE TRACE #2 ***/
@-webkit-keyframes traceTwo {
    0% {
        margin-top: -176px;
        margin-left: 208px;
    }
    10% {
        opacity: 1;
        margin-top: -176px;
        margin-left: 208px;
    }

    35% {
        margin-top: -176px;
        margin-left: 80px;
    }

    55% {
        margin-top: -113px;
        margin-left: 80px;
    }

    65% {
        margin-top: -113px;
        margin-left: 47px;
    }

    75% {
        margin-top: -56px;
        margin-left: 47px;
    }

    85% {
        margin-left: -1px;
        margin-top: -8px;
    }

    90% {
        opacity: 1;
        margin-top: 2px;
    }

    100% {
        opacity: 0;
    }
}
@keyframes traceTwo {
    0% {
        margin-top: -176px;
        margin-left: 208px;
    }
    10% {
        opacity: 1;
        margin-top: -176px;
        margin-left: 208px;
    }

    35% {
        margin-top: -176px;
        margin-left: 80px;
    }

    55% {
        margin-top: -113px;
        margin-left: 80px;
    }

    65% {
        margin-top: -113px;
        margin-left: 47px;
    }

    75% {
        margin-top: -56px;
        margin-left: 47px;
    }

    85% {
        margin-left: -1px;
        margin-top: -8px;
    }

    90% {
        opacity: 1;
        margin-top: 2px;
    }

    100% {
        opacity: 0;
    }
}

/*** HARDWARE TRACE #3 ***/
@-webkit-keyframes traceThree {
    15% {
        margin-left: 0px;
        opacity: 1;
    }

    30% {
        margin-top: 0px;
        margin-left: 33px;
    }

    50% {
        margin-top: 32px;
        margin-left: 63px;
    }

    70% {
        margin-top: 80px;
        margin-left: 63px;
    }

    85% {
        opacity: 1;
        margin-left: 33px;
    }

    100% {
        opacity: 0;
        margin-top: 80px;
        margin-left: 33px;
    }
}
@keyframes traceThree {
    15% {
        margin-left: 0px;
        opacity: 1;
    }

    30% {
        margin-top: 0px;
        margin-left: 33px;
    }

    50% {
        margin-top: 32px;
        margin-left: 63px;
    }

    70% {
        margin-top: 80px;
        margin-left: 63px;
    }

    85% {
        opacity: 1;
        margin-left: 33px;
    }

    100% {
        opacity: 0;
        margin-top: 80px;
        margin-left: 33px;
    }
}

/*** HARDWARE TRACE #4 ***/
@-webkit-keyframes traceFour {
    8% {
        opacity: 0;
        margin-top: 160px;
        margin-left: 64px;
    }

    15% {
        opacity: 1;
        margin-top: 160px;
        margin-left: 64px;
    }

    22% {
        margin-top: 112px;
        margin-left: 64px;
    }

    29% {
        margin-top: 112px;
        margin-left: 80px;
    }

    36% {
        margin-top: 175px;
        margin-left: 80px;
    }

    43% {
        margin-top: 175px;
        margin-left: 48px;
    }

    50% {
        margin-top: 112px;
        margin-left: 48px;
    }
    57% {
        margin-top: 112px;
        margin-left: 0px;
    }
    64% {
        margin-top: 48px;
        margin-left: 0px;
    }
    71% {
        margin-top: 48px;
        margin-left: 16px;
    }
    78% {
        margin-top: 16px;
        margin-left: 16px;
    }
    85% {
        margin-top: 16px;
        margin-left: 0px;
    }

    90% {
        margin-top: 0px;
        opacity: 1;
    }
}
@keyframes traceFour {
    8% {
        opacity: 0;
        margin-top: 160px;
        margin-left: 64px;
    }

    15% {
        opacity: 1;
        margin-top: 160px;
        margin-left: 64px;
    }

    22% {
        margin-top: 112px;
        margin-left: 64px;
    }

    29% {
        margin-top: 112px;
        margin-left: 80px;
    }

    36% {
        margin-top: 175px;
        margin-left: 80px;
    }

    43% {
        margin-top: 175px;
        margin-left: 48px;
    }

    50% {
        margin-top: 112px;
        margin-left: 48px;
    }
    57% {
        margin-top: 112px;
        margin-left: 0px;
    }
    64% {
        margin-top: 48px;
        margin-left: 0px;
    }
    71% {
        margin-top: 48px;
        margin-left: 16px;
    }
    78% {
        margin-top: 16px;
        margin-left: 16px;
    }
    85% {
        margin-top: 16px;
        margin-left: 0px;
    }

    90% {
        margin-top: 0px;
        opacity: 1;
    }
}

/*** HARDWARE TRACE #5 ***/
@-webkit-keyframes traceFive {
    0% {
        margin-left: 0px;
    }

    20% {
        margin-left: 0px;
        opacity: 1;
    }

    50% {
        margin-top: 0px;
        margin-left: -80px;
    }

    80% {
        opacity: 1;
        margin-top: -64px;
    }

    100% {
        opacity: 0;
        margin-top: -64px;
        margin-left: -80px;
    }
}
@keyframes traceFive {
    10% {
        margin-left: 0px;
    }

    20% {
        margin-left: 0px;
        opacity: 1;
    }

    50% {
        margin-top: 0px;
        margin-left: -80px;
    }

    90% {
        opacity: 1;
        margin-top: -64px;
    }

    100% {
        opacity: 0;
        margin-top: -64px;
        margin-left: -80px;
    }
}

/*** MIXY SQUARE  ***/
@keyframes squareDance {
    0% {
        transform: translate(-20px, -6px) rotate(2deg);
    }
    50% {
        transform: translate(20px, 6px) rotate(-2deg);
    }

    100% {
        transform: translate(-20px, -6px) rotate(2deg);
    }
}

@-webkit-keyframes squareDance {
    0% {
        transform: translate(-20px, -6px) rotate(2deg);
    }
    50% {
        transform: translate(20px, 6px) rotate(-2deg);
    }

    100% {
        transform: translate(-20px, -6px) rotate(2deg);
    }
}

/*** 0% > 35% OPACITY ***/
@-webkit-keyframes fadeInThird {
    0% {
        opacity: 0;
    }
    to {
        opacity: 0.35;
    }
}
@keyframes fadeInThird {
    0% {
        opacity: 0;
    }
    to {
        opacity: 0.35;
    }
}

/*** 0% > 50% OPACITY ***/
@-webkit-keyframes fadeInHalf {
    0% {
        opacity: 0;
    }
    to {
        opacity: 0.5;
    }
}
@keyframes fadeInHalf {
    0% {
        opacity: 0;
    }
    to {
        opacity: 0.5;
    }
}

/*** 35% > 0% OPACITY ***/
@-webkit-keyframes fadeOutThird {
    0% {
        opacity: 0.35;
    }
    to {
        opacity: 0;
    }
}
@keyframes fadeOutThird {
    0% {
        opacity: 0.35;
    }
    to {
        opacity: 0;
    }
}

/*** 50% > 0% OPACITY ***/
@-webkit-keyframes fadeOutHalf {
    0% {
        opacity: 0.5;
    }
    to {
        opacity: 0;
    }
}
@keyframes fadeOutHalf {
    0% {
        opacity: 0.5;
    }
    to {
        opacity: 0;
    }
}