.menu {
             background-color: #bbbbbb;
             border-bottom-right-radius: .4rem;
             border-top-right-radius: .4rem;
             display: flex;
             flex-direction: column;
             height: max-content;
             left: 0;
             list-style: none;
             margin: 0;
             padding: .5rem .5rem .5rem .5rem;
             position: absolute;
             overflow: hidden;
             top: 4rem;
             white-space: nowrap;
             width: var(--menu-min-width);
         }

         .menu {
             display: none;
         }

         .menu-icon {
             cursor: pointer;
             font-size: 2rem;
             text-align: center;
             width: 3.3rem;
         }

         .menu-icon {
             color: #ffffff;
             margin-right: 1rem;
         }

         .menu-item {
             padding-right: 1rem;
             margin-bottom: 1rem;
         }

         .menu-icon,
         .menu-text {
             display: inline-block;
         }

         .menu-link {
             text-decoration: none;
             color: #333333;
             display: flex;
             align-items: center;
         }

         .menu-sidebar {
             z-index: 99999;
         }

         .menu-sidebar input[type="checkbox"] {
             display: none;
         }

         .menu a {
             color: #eeeeee;
         }

         .menu a:hover {
             color: #ff6600;
         }

         .menu-toggle:checked~.menu {
             display: block;
         }

         .sub-menu {
             display: none;
             list-style: none;
             margin: .2rem .2rem 1rem 5rem;
             padding: 1rem 0;
         }

         .sub-menu-toggle:checked~.sub-menu {
             display: block;
         }