@keyframes grow {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

[data-contributor="Spencer Chang"] .type {
    background: yellowgreen;
    color: var(--background);
}

[data-contributor="Spencer Chang"] .plant {
    position: absolute;
    bottom: 40%;
}

[data-contributor="Spencer Chang"] hr {
    color: springgreen;
    width: 18px;
}

[data-contributor="Spencer Chang"] span {
    z-index: 1;
}

[data-contributor="Spencer Chang"] .grow-1,
[data-contributor="Spencer Chang"] .grow-2,
[data-contributor="Spencer Chang"] .grow-3 {
    opacity: 0;
}

[data-contributor="Spencer Chang"]:hover .grow-1,
[data-contributor="Spencer Chang"]:focus .grow-1,
[data-contributor="Spencer Chang"][data-on="true"] .grow-1 {
    animation: grow 0ms linear forwards;
    animation-delay: 200ms;
}

[data-contributor="Spencer Chang"]:hover .grow-2,
[data-contributor="Spencer Chang"]:focus .grow-2,
[data-contributor="Spencer Chang"][data-on="true"] .grow-2 {
    animation: grow 0ms linear forwards;
    animation-delay: 400ms;
}

[data-contributor="Spencer Chang"]:hover .grow-3,
[data-contributor="Spencer Chang"]:focus .grow-3,
[data-contributor="Spencer Chang"][data-on="true"] .grow-3 {
    animation: grow 0ms linear forwards;
    animation-delay: 600ms;
}

@media screen and (max-width: 767px) {
    [data-contributor="Spencer Chang"] .grow-1,
    [data-contributor="Spencer Chang"] .grow-2,
    [data-contributor="Spencer Chang"] .grow-3 {
        opacity: 1;
    }
}