/*--------------------- Nav Bar Hover ---------------------*/

nav {
    display:flex;
    justify-content:space-between;
    align-items:center;
    position: relative;
    
}

nav ul {
    display:flex;
    list-style:none;
    gap:30px;
}

nav a {
    color:#00ff88;
    text-decoration:none;
}

nav a:hover {
    text-shadow: 0 0 2px #b9fede;
}

/*--------------------- Navigation Nav Bar ---------------------*/

nav a.active{
    color:#00ff88;
    text-shadow:
        0 0 10px #00ff88;
}

/*--------------------- Arrow Nav Bar ---------------------*/

nav a.active::before{
    content:"● ";
    color:#00ff88;
}

/*--------------------- %-List Nav Bar ---------------------*/

#progress-bar{
    bottom:-3px;
    position:absolute;
    left:0;
    bottom:0;
    width:0%;
    height:3px;
    background:#00ff88;
    box-shadow:
        0 0 10px #00ff88,
        0 0 20px rgba(0,255,136,.7);
}

/*--------------------- Logo Status ---------------------*/

.logo{
    display:flex;
    align-items:center;
    gap:10px;
}

.logo-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#4a4a4a;
    transition:
        background-color .4s ease,
        box-shadow .4s ease,
        transform .4s ease;
}

.logo-dot.active{
    background:#00ff88;
    box-shadow:
        0 0 10px #00ff88,
        0 0 20px rgba(0,255,136,.8);
    animation:pulseLogo 2s infinite;
}

@keyframes pulseLogo{
    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.2);
    }
    
    100%{
        transform:scale(1);
    }
}