#menuToggle a {text-decoration: none;}
#menuToggle span:first-child {transform-origin: 0% 0%;}
#menuToggle span:nth-last-child(2) {transform-origin: 0% 100%;}
#menuToggle input:checked ~ span:nth-last-child(3) {opacity: 0;}
#menuToggle input:checked ~ ul {transform: none;}
#menuToggle input:checked ~ span:nth-last-child(2) {transform: rotate(-45deg) translate(1px, 10px);}

#menuToggle {
    width: min-content;
    border-radius: 50%;
    display: block;
    position: fixed;
    top: 10px;
    left: 20px;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
}
#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;
}
#menuToggle span {
   border: 1px solid #00000080;
   display: block;
   width: 33px;
   height: 4px;
   margin-bottom: 5px;
   position: relative;
   background: white;
   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 input:checked ~ span {
   opacity: 1;
   transform: rotate(45deg) translate(10px, 0px);
   background: #71D7F7;
   border: 1px solid #00000000;
}

#menu {
    position: absolute;
    height: 100vh;
    margin: -100px 0 0 -50px;
    padding-top: 125px;
    width: max-content;
    padding-inline: 50px 25px;
    margin-left: -50px;
    background: #00000080;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
 
 #menu li {
   padding: 10px 0;
   font-size: 2.2rem;
   color: white;
}
#menu li:hover {
   color: #71D7F7;
}