@media screen and (max-width: 768px) {
    body {
        flex-direction: column;
    }

    nav {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        padding: 1em;
        transform: translateX(-100%);
        z-index: 999;
    }

    nav.active {
        transform: translateX(0);
    }

    .hamburger {
        display: flex;
        background: white;
        padding: .5em;
        border-radius: 5px;
    }

    main {
        padding-top: 3.5em;
    }
}