*

{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.navbar{
    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:15px 30px;

    background-color:#a3b899;

    transition:transform 0.3s ease-out;
}

.navbar.hidden{
    transform:translateY(-100%);
}

.logo{
    color:#fceee9;
    font-size:24px;
    font-weight:bold;
}

.nav-links{
    display:flex;
    gap:20px;
}

.nav-links a{
    position:relative;
    overflow:visible;

    color:#fceee9;
    text-decoration:none;

    padding:8px 14px;
    border-radius:8px;

    transition:
        transform .25s ease,
        background .25s ease,
        text-shadow .25s ease;
}

.nav-links a:hover{
    

    transform:translateY(-4px);

    text-shadow:
        0 0 5px rgba(255,255,255,.8),
        0 0 10px rgba(255,255,255,.5),
        0 0 20px rgba(255,255,255,.3);
}

.sparkle{
    position:absolute;

    pointer-events:none;

    color:white;

    font-size:14px;

    text-shadow:
        0 0 5px white,
        0 0 10px white,
        0 0 20px white;

    animation:sparkleFloat .9s ease forwards;
}

@keyframes sparkleFloat{

    0%{
        opacity:0;
        transform:
            translate(0,0)
            scale(.4)
            rotate(0deg);
    }

    20%{
        opacity:1;
    }

    100%{
        opacity:0;
        transform:
            translate(var(--moveX), var(--moveY))
            scale(1.4)
            rotate(40deg);
    }

}