/*=========================================
 NAVBAR
==========================================*/

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    backdrop-filter:blur(18px);

    background:rgba(5,5,5,.55);

    border-bottom:1px solid rgba(57,255,20,.08);

}

.nav-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:90px;

}

/*=========================================
 LOGO
==========================================*/

.logo{

    display:flex;

    align-items:center;

    gap:16px;

}

.logo img{

    width:60px;

    height:60px;

    object-fit:contain;

    filter:

        drop-shadow(0 0 8px rgba(57,255,20,.7))

        drop-shadow(0 0 20px rgba(57,255,20,.4));

    transition:.35s;

}

.logo:hover img{

    transform:rotate(-5deg) scale(1.05);

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-text h2{

    font-family:'Space Grotesk',sans-serif;

    font-size:30px;

    letter-spacing:1px;

    color:#fff;

}

.logo-text span{

    color:#39FF14;

    text-shadow:

        0 0 8px #39FF14,

        0 0 18px rgba(57,255,20,.8);

}

.logo-text p{

    margin-top:2px;

    font-size:12px;

    letter-spacing:2px;

    color:#7fff6d;

    text-transform:uppercase;

}

/*=========================================
 CLOCK
==========================================*/

.clock{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    justify-content:center;

    min-width:190px;

    padding:12px 20px;

    border-radius:18px;

    background:rgba(57,255,20,.05);

    border:1px solid rgba(57,255,20,.12);

    backdrop-filter:blur(15px);

    transition:.35s;

}

.clock:hover{

    border-color:#39FF14;

    box-shadow:

        0 0 18px rgba(57,255,20,.25);

}

#currentDate{

    font-size:12px;

    color:#b8c6b8;

    letter-spacing:1px;

    margin-bottom:6px;

}

#currentTime{

    font-size:34px;

    font-weight:700;

    color:#39FF14;

    font-family:'Space Grotesk',sans-serif;

    text-shadow:

        0 0 10px #39FF14,

        0 0 20px rgba(57,255,20,.8);

}