#menuToggle
    {
        display: none;
    }

@media (max-width: 796px) {
    .links {
        display: none;
    }

    #menuToggle
    {
        display: block;
        position: absolute;
        top: 40px;
        right: 50px;
    
        z-index: 1;
        
        -webkit-user-select: none;
        user-select: none;
    }

    #menuToggle a
    {
        font-size: 1.5rem;
        font-weight: 600;
        letter-spacing: 1px;
        text-decoration: none;
        color: white;
        transition: color 0.3s ease;
    }

    #menuToggle a:hover
    {
        color: var(--azul--claro);
    }


    #menuToggle input
    {
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: -7px;
        left: -5px;
        
        cursor: pointer;
        
        opacity: 0; /* hide this */
        z-index: 2; /* and place it over the hamburger */
        
        -webkit-touch-callout: none;
    }

    /*
    * Just a quick hamburger
    */
    #menuToggle span
    {
        display: block;
        width: 33px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;
        
        background: #cdcdcd;
        border-radius: 3px;
        
        z-index: 1;
        
        transform-origin: 4px 0px;
        
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    opacity 0.55s ease;
    }

    #menuToggle span:first-child
    {
        transform-origin: 0% 0%;
    }

    #menuToggle span:nth-last-child(2)
    {
        transform-origin: 0% 100%;
    }

    /* 
    * Transform all the slices of hamburger
    * into a crossmark.
    */
    #menuToggle input:checked ~ span
    {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: #232323;
    }

    /*
    * But let's hide the middle one.
    */
    #menuToggle input:checked ~ span:nth-last-child(3)
    {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
    }

    /*
    * Ohyeah and the last one should go the other direction
    */
    #menuToggle input:checked ~ span:nth-last-child(2)
    {
    transform: rotate(-45deg) translate(0, -1px);
    }

    /*
    * Make this absolute positioned
    * at the top left of the screen
    */
    #menu
    {
    position: absolute;
    top: -40px;
    right: -50px;
    width: 220px;
    padding: 80px 60px 20px 40px;

    text-align: end;
    
    background: #696969d0;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */
    
    transform-origin: 0% 0%;
    transform: translate(0, -100%);
    
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }

    #menu li
    {
    padding: 10px 0;
    font-size: 22px;
    }

    /*
    * And let's slide it in from the left
    */
    #menuToggle input:checked ~ ul
    {
    transform: none;
    }
}