#xw-gn-menustate
{
   display: none;
}

#menu .xw-gn-menuitems
{
   padding: 0;
   font-size: medium;
   list-style-type: none;
}

.xw-gn-menuitems li
{
   margin: 0;
}

.xw-gn-menuitems a
{
   display: block;
   padding: 10px;
}

#menu
{
   text-align: left;
}

#xw-gn-menustate ~ label
{
   display: inline-block;
   margin: 0 6px;
   padding: 8px 6px;
   vertical-align: bottom;
   cursor: pointer;
}

.xw-gn-menuicon-bar
{
   display: block;
   width: 24px;
   height: 0;
   margin: 6px 0;
   background: white;
   border: solid 1px;
   transition: transform 0.3s, opacity 0.3s;
}

.xw-gn-menuicon-bar:nth-child(1)
{
   margin-top: 3px;
}

.xw-gn-menuicon-bar:nth-child(3)
{
   margin-bottom: 3px;
}

#xw-gn-menustate:checked ~ label .xw-gn-menuicon-bar:nth-child(1)
{
   transform: rotate(45deg) translate(5.6px, 5.6px);
}

#xw-gn-menustate:checked ~ label .xw-gn-menuicon-bar:nth-child(2)
{
   opacity: 0;
}

#xw-gn-menustate:checked ~ label .xw-gn-menuicon-bar:nth-child(3)
{
   transform: rotate(-45deg) translate(5.6px, -5.6px);
}

#menu .xw-gn-menuitems
{
   display: block;
   height: 0;
   margin: 0 4px;
   align-items: normal;
   transition: all 0.6s;
}

#xw-gn-menustate:checked ~ .xw-gn-menuitems
{
   height: calc(100vh - 36.0px);
   padding-top: 10px;
   border-top: solid white 0.5px;
   overflow: auto;
}

.xw-gn-menuitems li
{
   display: block;
   visibility: hidden;
   margin: 0;
   padding: 0;
   opacity: 0;
   text-align: left;
   transition: opacity 0.6s, visibility 0.6s;
}

#xw-gn-menustate:checked ~ .xw-gn-menuitems li
{
   visibility: visible;
   opacity: 1;
}

@media (prefers-reduced-motion)
{
   .xw-gn-menuicon-bar
   {
      transition: 0s;
   }

   #menu .xw-gn-menuitems
   {
      transition: 0s;
   }

   .xw-gn-menuitems li
   {
      transition: opacity 0s;
   }

   #xw-gn-menustate:checked ~ .xw-gn-menuitems li
   {
      transition: opacity 0.6s;
   }
}