#xw-gn-menustate, #xw-gn-menustate ~ label
{
   display: none;
}

.xw-gn-menuitems
{
   display: flex;
   margin: 0;
   padding: 0;
   justify-content: center;
   align-items: baseline;
   list-style-type: none;
}

.xw-gn-menuitems li
{
   margin: 0;
   padding: 0;
   text-align: center;
   flex: 0 0 auto;
}

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

@media screen and (max-width: 399px)
{
   #menu
   {
      background-color: rgb(17,17,17) !important;
      text-align: left;
   }

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

   .xw-gn-menuicon-bar
   {
      display: block;
      width: 16px;
      height: 0;
      margin: 4px 0;
      background: rgb(211,211,211);
      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 ~ label:hover
   {
      color: white;
   }

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

   #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(4.2px, -4.2px);
   }

   .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 rgb(211,211,211) 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;
   }

   .xw-gn-menuitems li:first-child
   {
      visibility: visible;
      position: absolute;
      left: 50%;
      top: 0;
      width: 200px;
      margin-left: -100px;
      opacity: 1;
      text-align: center;
   }

   .xw-gn-menuitems li:first-child a
   {
      display: inline-block;
   }

   
}

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

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

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

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