.profile {
    width: 10rem;
    height: 10rem;
    margin: 10vh auto 2.5rem auto;
    padding: 0.25rem;
    border-radius: 50%;
    background: linear-gradient(0deg, #37b, #3b7, #37b);
    background-size: 100% 200%;
    box-sizing: border-box;
    animation: roll-in 0.75s ease-out 0.25s backwards, background-slide-up 5s linear infinite;
}

.profile-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

main {
    text-align: center;
    font-size: 1.5rem;
    animation: slide-in 0.5s ease-out 1s backwards;
}

h1 {
    font-size: 5rem;
}

p {
    margin: 0.5rem 0;
}

a {
    margin: 0.5rem 0;
    width: 10rem;
    padding: 0.5rem;
}

@keyframes roll-in {
    0% {
        transform: translateY(calc(-10rem - 10vh - 1px)) rotate(-180deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

@keyframes background-slide-up {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 0 200%;
    }
}