@keyframes drop {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

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

@keyframes slide-up {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

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

@keyframes slide-up-1 {
    0% {
        transform: translateY(100%) translateX(-100px);
        opacity: 0;
    }

    100% {
        transform: translateY(0) translateX(-100px);
        opacity: 1;
    }
}

@keyframes slide-aside {
    0% {
        transform: translateX(-100px);
        opacity: .80;
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInSlideDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

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


#section1 .flex-container {
    display: inline-flex;
    align-items: center;
}

#section1 .drop {
    animation: drop 2s ease-in-out forwards;
    opacity: 0;
}

#section1 .slide-up {
    animation: slide-up 1.5s ease-in-out 2s forwards;
    opacity: 0;
}

#section1 #name.slide-aside {
    animation: slide-up-1 1.5s ease-in-out 2s forwards, slide-aside 1s ease-in-out 3s forwards;
    opacity: 0;
}

#section1 #profile-pic {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 20px;
    animation: fadeIn 0.5s ease-in-out 4s forwards;
    vertical-align: middle;
    opacity: 0;

}

#section1 .animated-block {
    animation: fadeInSlideDown 0.75s ease-in-out 4.5s forwards;
    opacity: 0;
}

#section1 .social-media-links {
    animation: fadeIn 0.25s ease-in-out 5s forwards;
    opacity: 0;
}

/* @keyframes marquee {
    0% {
        transform: translateX(100px);
    }

    100% {
        transform: translateX(-100px);
    }
}

.text-train {
    display: block;
    white-space: nowrap;
    overflow: visible;
        animation: marquee 15s ease-in-out infinite;
        }
                 */

.email-links a img {
    transition: transform 0.3s ease-in-out;
}

.email-links a:hover img {
    transform: rotate(45deg);
}