#stack-item {
    transition: all .8s cubic-bezier(0.075, 0.82, 0.165, 1);
    width: -webkit-fill-available;
    padding: .7rem;
    border: 1px solid var(--border);
    border-radius: var(--round);
    background-color: var(--background-muted);
}

#stack-item.core {
    background-color: var(--primary);
    padding: .8rem;
    border: 1px solid var(--primary);
}

#stack-item:hover {
    transform: translateY(-8px);
    background-color: var(--text);
    border: 1px solid var(--text);
    color: var(--background-muted);
}


#timeline-item {
    position: relative;

    padding: 1rem 3rem;
    border-radius: var(--round-xl);

    background: var(--primary);

}

#timeline-item::before {
    content: '';
    position: absolute;
    left: -3.25%;
    top: 40%;
    width: 1rem;
    height: 1rem;
    background-color: var(--primary);
    border: 2px solid var(--accent);
    border-radius: 100%;
}

.item-date {
    font-weight: 100 !important;
}

.contact-card {
    transition: all .8s cubic-bezier(0.075, 0.82, 0.165, 1);
    width: -webkit-fill-available;
    align-items: center;
    background-color: var(--primary);

    padding: 1rem 2rem;
    gap: 2rem;

    border-radius: var(--round);
}

.contact-card #icon {
    transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    color: var(--primary);
    background-color: var(--text);

    padding: .8rem;
    border-radius: 100%;
}

.contact-card a {
    text-decoration: none;
    color: var(--text);
}

.contact-card p {
    line-height: 1rem !important;
    margin: .35rem 0;
}

.contact-card:hover {
    cursor: pointer;
    color: var(--background) !important;
    background-color: var(--text);

    transform: translateY(-10px);
}

.contact-card:hover #icon {
    color: var(--text);
    background: linear-gradient(145deg,
            var(--primary) 50%,
            var(--secondary) 90%,
            var(--accent) 10%);
}

.contact-card:hover p {
    opacity: .8;
}

.contact-card:hover a {
    color: var(--primary);
}

.ingredient-card {
    width: -webkit-fill-available;

    align-items: center;
    justify-content: space-between;
    text-align: left;

    padding: 1rem 2rem;
    gap: 2rem;

    border-radius: var(--round-lg);
    border: 1px solid color-mix(in srgb, var(--background) 80%, white);
    background-color: color-mix(in srgb, var(--background) 93%, white);

}

.ingredient-card p {
    line-height: 1.3rem !important;
}

@media (width <=900px) {
    #timeline-item::before {
        left: -4vw;
    }
}

@media (width <=450px) {
    #timeline-item::before {
        left: -6.8%;
    }
}