@media screen and (max-width: 768px){  
   
    #menu {
        display: flex;
        font-size: 2rem;
        border: 0px solid rgba(0,0,0,.3);
        background-color: #95EDEE;
        color: #000;
        position: absolute ;
        top: 0;
        right: 0;
    }

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

    #menu.show::before {
        content: "X";
    }
    .navigation {
        list-style: none;
        margin: 0 auto;
        max-width: 760px;
    }
    
    .navigation li {
        display: none;
    }

    .navigation a {
        display: block;
        padding: 0.75rem;
        text-align: left;
        text-decoration: none;
        color: black;
        font-weight: 700;
        transition: 0.5s;
        font-size: clamp(1rem, 2vmin, 1.5rem);
    }

    .navigation a:hover, .navigation a:active {
        color: white;
        background-color: #424651;
    }
   
    .show li {
        display: block;
    }
    

    
}