@media (max-width: 670px) {

    header {
        background: rgb(177, 155, 223);
        padding: 1rem;
        display: block;
    }

    #head {
        display: flex;
        align-items: center;
        justify-content: left;
        flex-wrap: wrap;
    }

    #logo {
        padding: 1rem;
        max-width: 100px;
    }

    h3 {
        font-size: 40px;
    }

    nav {
        background: none;
    }

    #menu {
        display: flex;
        margin: auto;
        font-size: 40px;
        position: absolute;
        top: 2rem;
        right: 2rem;
    }

    #menu::before {
        content: "☰";
    }

    #menu.open::before {
        content: "❌";
    }

    #mainNav {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        list-style: none;
    }

    #mainNav a {
        display: none;
        text-decoration: none;
        padding: 1rem;
    }

    #mainNav a:hover {
        text-decoration: underline;
    }

    #mainNav.open a {
        display: block;
    }

    #sections {
        display: block;
    }

    #certificate {
        display: flex;
        justify-content: space-between;
        gap: 0;
        margin: 0;
    }

}