/* GLOBAL */

body{
    margin:0;
    font-family:Arial, sans-serif;
}

/* =====================
   TOP BAR
===================== */

.top-bar{
    background:#0b3d2e;
    height:45px;
    padding:0 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* =====================
   AUTH AREA
===================== */

#auth-area{
    display:flex;
    align-items:center;
    gap:12px;
}

#loginLink{
    color:white;
    text-decoration:none;
    font-size:14px;
}

#loginLink:hover{
    text-decoration:underline;
}

/* =====================
   PROFILE
===================== */

#profileBox{
    display:none;
    align-items:center;
    gap:10px;
    color:white;
    font-size:14px;
}

#userAvatar{
    width:36px;
    height:36px;
    border-radius:50%;
    border:2px solid white;
    object-fit:cover;
    cursor:pointer;
}

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

.main-navbar{
    background:white;
    height:85px;
    padding:0 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

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

/* WEBSITE LOGO */

.logo{
    height:55px;
    width:55px;
    border-radius:50%;
    object-fit:cover;
}

.brand{
    font-size:22px;
    font-weight:bold;
}

/* =====================
   CENTER MENU
===================== */

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

.nav-center a{
    text-decoration:none;
    color:black;
    font-size:16px;
}

.nav-center a:hover{
    color:#f1c40f;
}

/* =====================
   FOOTER
===================== */

footer{
    background:#0b3d2e;
    color:white;
    text-align:center;
    padding:15px;
}

footer a{
    color:white;
    text-decoration:none;
    margin:0 8px;
}

footer a:hover{
    text-decoration:underline;
}