/*--------------------------------------------------
Navbar
--------------------------------------------------*/
.navbar { display: flex; justify-content: space-between; align-items: center; background:#a181f8; padding:8px 12px; }
.navbarHeader { font-size: 2.4rem; color:#fff; }
.navbarHeader a { color:#fff; }
.navbarMenu { display: flex; list-style: none; padding-left:0; flex-basis: 60%; }
.navbarMenu li { padding: 8px 12px; }
.navbarMenu li:hover { background:#fff; border-radius: 4px; }
.navbarMenu li a { color:#fff; font-size:1.6rem; }
.navbarIcon { display: flex; list-style: none; color:#fff; padding-left:0; }
.navbarIcon li { padding: 8px 12px; }
.toggleBtn { position: absolute; right:32px; font-size: 24px; color:#fff; display: none; }

@media screen and (max-width: 768px){
    .navbar { flex-direction: column; align-items: flex-start; }
    .navbarMenu { flex-direction: column; align-items: center; width:100%; display: none; }
    .navbarMenu li { width:100%; text-align: center; padding:8px 24px; }
    .navbarIcon { justify-content: center; width:100%; display: none; }
    .toggleBtn { display: block; }
    .navbarMenu.active, .navbarIcon.active { display: flex; }
}

/*--------------------------------------------------
Left Navbar
--------------------------------------------------*/