header{

    position:fixed;

    top:25px;

    width:100%;

    z-index:100;

    display:flex;

    justify-content:center;

}



.navbar{


    width:min(1200px,90%);


    display:flex;


    align-items:center;


    justify-content:space-between;



    padding:16px 24px;



    background:

    rgba(255,255,255,.08);



    backdrop-filter:blur(15px);



    border:

    1px solid var(--border);



    border-radius:999px;



    box-shadow:

    0 15px 40px rgba(0,0,0,.15);



}



.logo{


    font-size:32px;


    font-weight:900;


    color:var(--yellow);



    text-shadow:

    0 0 20px rgba(255,209,102,.5);



}



.nav-links{


    display:flex;


    gap:35px;


}



.nav-links a{


    color:var(--text-muted);


    font-weight:500;


    transition:var(--transition);


    position:relative;


}



.nav-links a::after{


    content:"";


    position:absolute;


    bottom:-8px;


    right:0;


    width:0;


    height:3px;


    border-radius:10px;


    background:var(--yellow);


    transition:.3s;


}



.nav-links a:hover{


    color:white;


}



.nav-links a:hover::after{


    width:100%;


}





.nav-actions{


    display:flex;


    align-items:center;


    gap:20px;


}



.login{


    color:white;


}



.register-btn{


    background:

    linear-gradient(

        135deg,

        var(--yellow),

        var(--orange)

    );


    color:#111;


    padding:12px 24px;


    border-radius:999px;


    font-weight:700;


    transition:.3s;



}



.register-btn:hover{


    transform:translateY(-4px);


    box-shadow:

    0 15px 30px rgba(255,209,102,.35);



}



.nav-toggle{

    display:none;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:5px;

    width:34px;

    height:34px;

    background:none;

    border:none;

    cursor:pointer;

    flex-shrink:0;

}



.nav-toggle span{

    width:100%;

    height:3px;

    border-radius:3px;

    background:var(--text);

    transition:.3s;

}



.nav-toggle.active span:nth-child(1){

    transform:translateY(8px) rotate(45deg);

}



.nav-toggle.active span:nth-child(2){

    opacity:0;

}



.nav-toggle.active span:nth-child(3){

    transform:translateY(-8px) rotate(-45deg);

}



@media(max-width:900px){


    .navbar{

        flex-wrap:wrap;

        border-radius:28px;

        padding:14px 20px;

        transition:border-radius .3s;

    }


    .nav-toggle{

        display:flex;

    }


    .nav-links,
    .nav-actions{

        flex-basis:100%;

        flex-direction:column;

        align-items:stretch;

        gap:18px;

        max-height:0;

        overflow:hidden;

        opacity:0;

        margin-top:0;

        transition:max-height .35s ease,opacity .3s ease,margin-top .35s ease;

    }


    .nav-links a,
    .login{

        text-align:center;

    }


    .register-btn{

        text-align:center;

    }


    .navbar.nav-open{

        border-radius:28px;

    }


    .navbar.nav-open .nav-links,
    .navbar.nav-open .nav-actions{

        max-height:400px;

        opacity:1;

        margin-top:16px;

    }


}

.user-name {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.logout-form {
    margin: 0;
}

.logout-btn {
    background: none;
    border: none;
    color: #d8def0;
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
    padding: 8px 12px;
}

.logout-btn:hover {
    color: #ff7070;
}