body {
    text-align: center;
}

#contents {
    display: inline-block;
    text-align: left;
}

#welcome-message {
    font-size: 4rem;
    padding: 2rem 0 2rem 4rem;
}

#about-message {
    font-size: 4rem;
    padding: 2rem 0 2rem 4rem;
}

#header {
    font-size: 2rem;
    padding: 2rem 0 0 0;
    text-align: center;
}

#header a {
    padding: 0 24px;
    color: #999;
}

#header a:hover {
    padding: 0 24px;
    animation: highlight-header 0.3s ease forwards;
    -moz-animation: highlight-header 0.3s ease forwards;
    -webkit-animation: highlight-header 0.3s ease forwards;
    -o-animation: highligh-header 0.3s ease forwards;
}

@keyframes highlight-header {
    0% {
        color: #999;
    }

    100% {
        color: #777;
    }
}

td {
    padding: 0.5rem;
}

#sub-welcome-message {
    font-size: 2rem;
    color: #999;
    padding: 0 4rem 2rem 4rem;
    max-width: 72rem;
}

#spotify-message {
    font-size: 1.5rem;
    color: #999;
    padding: 0rem 4rem 2rem 4rem;
    max-width: 72rem;
    opacity: 0;
    animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    -moz-animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    -webkit-animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    -o-animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    animation-delay: 4.6s;
}

#sub-1 {
    display: inline-block;
    opacity: 0;
    animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    -moz-animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    -webkit-animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    -o-animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    animation-delay: 1.4s;
}

#sub-2 {
    display: inline-block;
    opacity: 0;
    padding-top: 2rem;
    animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    -moz-animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    -webkit-animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    -o-animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    animation-delay: 2.1s;
}

#sub-3 {
    display: inline-block;
    opacity: 0;
    padding-top: 2rem;
    animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    -moz-animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    -webkit-animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    -o-animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    animation-delay: 2.8s;
}

#thank-you-message {
    font-size: 2rem;
    color: #999;
    padding: 4rem 4rem 4rem 4rem;
    max-width: 72rem;
    display: inline-block;
    opacity: 0;
    animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    -moz-animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    -webkit-animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    -o-animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    animation-delay: 3.8s;

}

#style-discord {
    color: #5865F2;
}

#style-travelers {
    color: #ff0000;
}

#style-spotify {
    color: #1DB954;
}

#style-spotify:hover {
    animation: highlight-spotify 0.3s ease forwards;
    -moz-animation: highlight-spotify 0.3s ease forwards;
    -webkit-animation: highlight-spotify 0.3s ease forwards;
    -o-animation: highligh-spotify 0.3s ease forwards;
}


#style-discord:hover {
    animation: highlight-discord 0.3s ease forwards;
    -moz-animation: highlight-discord 0.3s ease forwards;
    -webkit-animation: highlight-discord 0.3s ease forwards;
    -o-animation: highligh-discord 0.3s ease forwards;
}

@keyframes highlight-discord {
    0% {
        color: #5865F2;
    }

    100% {
        color: #fff;
        background-color: #5865F2;
    }
}

@keyframes highlight-spotify {
    0% {
        color: #1DB954;
    }

    100% {
        color: #fff;
        background-color: #1DB954;
    }
}

#style-amazon {
    color: #ff9900;
}

#style-amazon:hover {
    animation: highlight-amazon 0.3s ease forwards;
    -moz-animation: highlight-amazon 0.3s ease forwards;
    -webkit-animation: highlight-amazon 0.3s ease forwards;
    -o-animation: highligh-amazon 0.3s ease forwards;
}

@keyframes highlight-amazon {
    0% {
        color: #ff9900;
    }

    100% {
        color: #fff;
        background-color: #ff9900;
    }
}


#style-travelers:hover {
    animation: highlight-travelers 0.3s ease forwards;
    -moz-animation: highlight-travelers 0.3s ease forwards;
    -webkit-animation: highlight-travelers 0.3s ease forwards;
    -o-animation: highlight-travelers 0.3s ease forwards;
}

@keyframes highlight-travelers {
    0% {
        color: #ff0000;
    }

    100% {
        color: #fff;
        background-color: #f00;
    }
}

#style-data-science {
    color: rgb(0, 200, 0);
}

#style-data-science:hover {
    animation: highlight-data-science 0.3s ease forwards;
    -moz-animation: highlight-data-science 0.3s ease forwards;
    -webkit-animation: highlight-data-science 0.3s ease forwards;
    -o-animation: highlight-data-science 0.3s ease forwards;
}

@keyframes highlight-data-science {
    0% {
        color: rgb(0, 200, 0);
    }

    100% {
        color: #fff;
        background-color: rgb(0, 200, 0);
    }
}


#style-machine-learning {
    color: rgb(0, 132, 255);
}

#style-machine-learning:hover {
    animation: highlight-machine-learning 0.3s ease forwards;
    -moz-animation: highlight-machine-learning 0.3s ease forwards;
    -webkit-animation: highlight-machine-learning 0.3s ease forwards;
    -o-animation: highlight-machine-learning 0.3s ease forwards;
}

@keyframes highlight-machine-learning {
    0% {
        color: rgb(0, 132, 255);
    }

    100% {
        color: #fff;
        background-color: rgb(0, 132, 255);
    }
}


#style-ut {
    color: #bf5700;
}

#style-ut:hover {
    animation: highlight-ut 0.3s ease forwards;
    -moz-animation: highlight-ut 0.3s ease forwards;
    -webkit-animation: highlight-ut 0.3s ease forwards;
    -o-animation: highlight-ut 0.3s ease forwards;
}

@keyframes highlight-ut {
    0% {
        color: #bf5700;
    }

    100% {
        color: #fff;
        background-color: #bf5700;
    }
}

.last-char {
    display: inline-block;
    animation:
        appear 0.1s ease,
        slide-down 0.1s ease;
    -moz-animation: appear 0.1s ease,
        slide-down 0.1s ease;
    -webkit-animation: appear 0.1s ease,
        slide-down 0.1s ease;
    -o-animation: appear 0.1s ease,
        slide-down 0.1s ease;
}

@keyframes slide-down {
    0% {
        transform: translateY(-30%);
    }

    100% {
        transform: translateY(0);
    }
}

.social-links {
    font-size: 2rem;
    padding: 0 0 0 4rem;
    opacity: 0;
}

#projects {
    padding-left: 4rem;
    padding-right: 4rem;
    color: #999;
    opacity: 0;
    animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    -moz-animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    -webkit-animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    -o-animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    animation-delay: 3.8s;
}

#projects-message {
    padding-left: 4rem;
    opacity: 0;
    animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    -moz-animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    -webkit-animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    -o-animation: appear 1.2s ease forwards,
        slide-down 1.2s ease forwards;
    animation-delay: 3.8s;


}

#style-linkedin {
    color: #2867b2;
}

#style-linkedin:hover {
    animation: highlight-linkedin 0.3s ease forwards;
    -moz-animation: highlight-linkedin 0.3s ease forwards;
    -webkit-animation: highlight-linkedin 0.3s ease forwards;
    -o-animation: highlight-linkedin 0.3s ease forwards;
}

@keyframes highlight-linkedin {
    0% {
        color: #2867b2;
    }

    100% {
        color: #fff;
        background-color: #2867b2;
    }
}

#style-github {
    color: #6e5494;
}

#style-github:hover {
    animation: highlight-github 0.3s ease forwards;
    -moz-animation: highlight-github 0.3s ease forwards;
    -webkit-animation: highlight-github 0.3s ease forwards;
    -o-animation: highlight-github 0.3s ease forwards;
}

@keyframes highlight-github {
    0% {
        color: #6e5494;
    }

    100% {
        color: #fff;
        background-color: #6e5494;
    }
}

#style-resume {
    color: rgb(0, 132, 255);
}

#style-resume:hover {
    animation: highlight-resume 0.3s ease forwards;
    -moz-animation: highlight-resume 0.3s ease forwards;
    -webkit-animation: highlight-resume 0.3s ease forwards;
    -o-animation: highlight-resume 0.3s ease forwards;
}

@keyframes highlight-resume {
    0% {
        color: rgb(0, 132, 255);
    }

    100% {
        color: #fff;
        background-color: rgb(0, 132, 255);
    }
}


@keyframes appear {
    0% {
        opacity: 0
    }

    100% {
        opacity: 100%
    }
}

a:hover {
    text-decoration: none;
}

/* 
@keyframes expand {
    0% { width: 0 }
    50% { width: 20% }
    100% { width: 100%}
} */