:root {
    --default-padding: 4rem;
    --roundness-sm: 8px;
    --roundness-lg: 12px;
    --roundness-xl: 24px;
    --roundness-full: 250px;
}

.profile-container {
    width: 17.5rem;
    height: 17.5rem;

    margin: 0 0 2.5rem 0;

    border-radius: var(--roundness-xl);
    
    img {
        width: 17.5rem;
        height: 17.5rem;
        object-fit: cover;

        border-radius: var(--roundness-full);
        border: 2px solid var(--color-background);
        box-shadow: 0 0 20rem 15rem var(--color-background) inset;

        transition: ease-in-out 1s;

        animation-name: fade-in-profile;
        animation-duration: 1.75s;
        animation-fill-mode: both
    }
}

.about-container {
    width: 30rem;
    height: 10rem;

    padding: .5rem;

    border-radius: var(--roundness-xl);
    background-color: var(--color-background);
    
    transition: ease-in-out 1s;

    animation-name: fade-in-container;
    animation-duration: 1s;
    animation-fill-mode: both;

    gap: 1rem;
}

.footer {
    bottom: 1rem;

    width: 50rem;
    height: 3rem;

    border-radius: var(--roundness-xl);
    background-color: var(--color-background);

    transition: ease-in-out 1s;

    animation-name: fade-in-footer;
    animation-duration: 2s;
    animation-fill-mode: both;

    gap: 1rem;
}