/* hide nav when hit bp */


/* vertical nav bar... */
.vertical-nav {
    position: fixed;
    right: 5vw;
    top: 45vh;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8vh;
    z-index: 100;
}

.nav-line {
    position: absolute;
    margin-left: 9vw;
    width: 2px;
    height: 75vh;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--purple),
        var(--purple),
        transparent
    );
    z-index: -1;
}

.nav-heart {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;

    margin-right: 10px;
    margin-top: 30px;

    z-index: 1;
}

.nav-heart img {
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.10s ease, opacity 0.10s ease;
    opacity: 0.7;
}

.nav-title {
    font-size: 1.1rem;
    color: var(--muted);
    transition: color 0.3s ease;
    white-space: nowrap;
}

.nav-heart:is(:hover, .active) img {
    transform: scale(1.15);
    opacity: 1;
}

.nav-heart:is(:hover, .active) .nav-title{
    color: var(--white);
    font-weight: 500;
}

.nav-star {
    position: absolute;
    left: 50%;
    transform-origin: center;
    transform: translateX(-50%) rotate(0deg);
    width: 50px;
}

.nav-star:nth-child(1) {
    top: -18px;
    transform: translate(-50%) rotate(-15deg);
}

.nav-star:nth-child(2) {
    top: 18%;
    width: 65px;
    transform: translate(-50%) rotate(28deg);
}

.nav-star:nth-child(3) {
    top: 45%;
    transform: translate(-50%) rotate(-50deg);

}

.nav-star:nth-child(4) {
    top: 70%;
    width: 65px;
    transform: translate(-50%) rotate(120deg);
}

.nav-star:nth-child(5) {
    bottom: -18px;
    transform: translate(-50%) rotate(17deg);
}