nav {
    position: relative;
    margin-bottom: 1rem;
  }
  
  #nav-links {
    display: flex;
    
  }
  
  #nav-links a {
    text-decoration: none;
    color: blue;
    margin-right: 1rem;
  }
  
  #nav-links a:hover {
    text-decoration: underline;
  }
  
  #menu-icon {
    display: none;
    flex-direction: column;
    cursor: pointer;
  }
  
  #menu-icon span {
    height: 3px;
    width: 25px;
    background-color: blue;
    margin: 4px 0;
    transition-duration: 500ms;
  }
  
  #menu-icon span:first-child, #menu-icon span:last-child {
    transition-property: transform;
  }
  
  #menu-icon span:nth-child(2) {
    transition-property: opacity;
  }
  
  #menu-toggle {
    display: none;
  }
  
  @media (max-width: 500px) {
    #nav-links {
        display: none;
        flex-direction: column;
        width: 50%;
        padding: 1rem;
        position: absolute;
        background-color: lightyellow;
        margin-top: 2.7rem;
    }
  
    #menu-icon {
      display: inline-flex;
    }
  
    #menu-toggle:checked + #menu-icon + #nav-links {
        display: flex;
    }
  
    #menu-toggle:checked + #menu-icon :nth-child(1) {
        transform: translate(0px, 10px) rotate(-45deg);
    }
  
    #menu-toggle:checked + #menu-icon :nth-child(2) {
        opacity: 0;
    }
  
    #menu-toggle:checked + #menu-icon :nth-child(3) {
        transform: translate(0px, -11px) rotate(45deg);
    }
  }