@charset "UTF-8";

/*
	Name: index.css
	Description: CSS file for index.html. Specifically intended for animations
	Author: Trent Lam
	Date Created: April 19, 2022
	Date Modified: April 25, 2022
*/

#h1Header, #h2Header {
    -webkit-animation: headerExpand 3s ease-in-out forwards;
    -webkit-animation-delay: 0s !important;
    animation: headerExpand 3s ease-in-out forwards;
    animation-delay: 0s !important;
}

@-webkit-keyframes headerExpand {
    0% {
        -webkit-filter: brightness(2) contrast(2) invert(1) grayscale(1);
        filter: brightness(2) contrast(2) invert(1) grayscale(1);
    }

    66.67% {
        -webkit-filter: brightness(1) contrast(1) invert(0) grayscale(0);
        filter: brightness(1) contrast(1) invert(0) grayscale(0);
    }

    100% {
        margin-left: 0;
        width: 100%;
        word-break: normal;
    }
}
@keyframes headerExpand {
    0% {
        -webkit-filter: brightness(2) contrast(2) invert(1) grayscale(1);
        filter: brightness(2) contrast(2) invert(1) grayscale(1);
    }

    66.67% {
        -webkit-filter: brightness(1) contrast(1) invert(0) grayscale(0);
        filter: brightness(1) contrast(1) invert(0) grayscale(0);
    }

    100% {
        margin-left: 0;
        width: 100%;
        word-break: normal;
    }
}

#mainHeader *:not(#h1Header, #h2Header), main, footer {
    -webkit-animation: bodyFade 2s ease-in-out forwards;
    -webkit-animation-delay: 1s;
    animation: bodyFade 2s ease-in-out forwards;
    animation-delay: 1s;
}

@-webkit-keyframes bodyFade {
    0% {
        -webkit-filter: brightness(2) contrast(2) invert(1) grayscale(1);
        filter: brightness(2) contrast(2) invert(1) grayscale(1);
    }

    100% {
        opacity: 100%;
        pointer-events: auto;
        -webkit-filter: brightness(1) contrast(1) invert(0) grayscale(0);
        filter: brightness(1) contrast(1) invert(0) grayscale(0);
    }
}
@keyframes bodyFade {
    0% {
        -webkit-filter: brightness(2) contrast(2) invert(1) grayscale(1);
        filter: brightness(2) contrast(2) invert(1) grayscale(1);
    }

    100% {
        opacity: 100%;
        pointer-events: auto;
        -webkit-filter: brightness(1) contrast(1) invert(0) grayscale(0);
        filter: brightness(1) contrast(1) invert(0) grayscale(0);
    }
}