@keyframes greetingIn {
    from { width: 0%; }
    to { width: 100%; }
}
@keyframes greetingPartIn {
    from { transform: translate(-32px); opacity: 0;}
    to { transform: translate(0); opacity: 1;}
}

.about-container {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    width: 50%;
}

.greeting {
    display: flex;
    align-items: center;
    font-size: 2em;
    width: 100%;
}

.greeting-icon {
    border-radius: 10%;
    height: 50px;
    filter: drop-shadow(0 0 5px black);
}
.greeting-icon.visible {
    animation: greetingPartIn 1s ease forwards;
}

.greeting-text {
    margin-left: 16px;
    filter: drop-shadow(0 0 5px black);
}
.greeting-text.visible {
    animation: greetingPartIn 1s ease forwards;
}

.yap {
    width: 100%;
    opacity: 0;
    padding: 8px;

    border-left: 2px dashed;
}
.yap.visible {
    animation: 0.5s greetingPartIn 0.5s ease forwards;
}