.drawer-container {
  position: fixed;
  visibility: hidden;
  z-index: 100;
  background: #1f4ab8;
  color: #EEEEEE;
  height: 100dvh;
  width: 70dvw;
  max-width: 800px;
  transition: transform 300ms ease-out, visibility 300ms;
  transform: translateX(-100%);
  box-shadow: 0px 0px 8px #1f4ab8;
  overflow-y: auto;
  display: flex;
  flex-direction: column; }
  .drawer-container > .drawer-title {
    margin-top: 20px;
    padding: 20px;
    box-sizing: border-box;
    height: 200px; }
    .drawer-container > .drawer-title > img {
      width: 100%;
      height: 100%;
      object-fit: contain; }
  .drawer-container > .drawer-content > nav {
    font-size: 1.2em; }
    .drawer-container > .drawer-content > nav > .group-separator {
      padding: 0px 20px;
      font-weight: bold;
      margin-block-start: 0.7em;
      display: flex;
      flex-direction: row;
      align-items: center; }
      .drawer-container > .drawer-content > nav > .group-separator > .group-title {
        width: auto;
        font-size: 1.2em; }
    .drawer-container > .drawer-content > nav > .group-separator::after {
      content: "";
      flex-grow: 1;
      height: 0px;
      margin-left: 10px;
      border-top: solid 1px rgba(238, 238, 238, 0.4); }
    .drawer-container > .drawer-content > nav > ul {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-inline: 0;
      margin-block: 0;
      list-style-type: none; }
      .drawer-container > .drawer-content > nav > ul > li {
        display: inline-block;
        width: 100%;
        padding: 9px 20px;
        box-sizing: border-box;
        transition: background-color 300ms; }
      .drawer-container > .drawer-content > nav > ul > li:hover {
        background-color: #00000020; }
      .drawer-container > .drawer-content > nav > ul > li a {
        text-decoration: none;
        color: inherit;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px 20px;
        box-sizing: border-box; }
        .drawer-container > .drawer-content > nav > ul > li a > span {
          flex-grow: 1; }
        .drawer-container > .drawer-content > nav > ul > li a > .icon {
          width: 30px;
          height: 30px;
          margin-left: 20px;
          margin-right: 40px; }
    .drawer-container > .drawer-content > nav > ul:first-child {
      border-top: none; }

.drawer-container.open {
  visibility: visible;
  transform: none; }