.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    position: fixed;
    top: 15px;
    right: 20px;
    z-index: 2000;
}

.hamburger .bar { width: 25px; height: 3px; background: white; border-radius: 2px; }

@media (max-width: 768px) {
    .hamburger { display: flex; }
    
    #nav-bar {
        position: fixed;
        left: -100%;
        top: 0;
        width: 70%;
        height: 100vh;
        background: #222;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 80px;
        transition: 0.4s;
    }

    #nav-bar.active { left: 0; }
    #nav-bar a { margin: 15px 30px; font-size: 20px; }
}