header {
  align-items: center;
  background-color: var(--x-ml-foreground-color, #2b2b2b);
  display: flex;
  height: 4rem;
  justify-content: space-between;
  max-height: 4rem;
            /* tb-rl */
  padding: 0.5rem 1rem;
}

header a {
  color: var(--x-ml-background-color, #f5f5f5);
  margin-left: 1rem;
  text-decoration: none;
}

header,
h1 {
  font: var(
      --md-sys-typescale-headline-small-weight,
      var(--md-ref-typeface-weight-regular, 400)
    )
    var(--md-sys-typescale-headline-small-size, 1.5rem) /
    var(--md-sys-typescale-headline-small-line-height, 2rem)
    var(
      --md-sys-typescale-headline-small-font,
      var(--md-ref-typeface-brand, Roboto)
    );
}

.header-container {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#shell {
  display: flex;
  flex-grow: 1;
  overflow: hidden;
}

aside {
  overflow: hidden;
  transition: width 0.3s ease-out;
  width: 0;
}

aside.open {
  background-color: var(--x-ml-aside-background-color);
  border-right: 1px solid var(--x-ml-foreground-color);
  flex: none;
  width: 15.625rem;
}

aside > .aside-header {
  margin-bottom: 0;
  padding-left: 0.5rem;
}

md-list a {
  color: var(--x-ml-foreground-color, #2b2b2b);
}

md-divider {
  --md-divider-margin-top: 0;
}

main {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1rem;
  transition: margin-left 0.3s ease-out;
}

md-icon-button {
  align-items: center;
  display: flex;
  height: 3rem;
  justify-content: center;
  width: 3rem;
}

md-list {
  padding-right: 0.5rem;
}

md-list-item {
  cursor: pointer;
  transition: background-color 0.3s ease;
}

md-list-item:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

md-list-item::part(focus-ring),
.hidden,
.js-show {
  display: none;
}

x-ml-item, article {
  display: block;
  margin: auto;
  max-width: 53rem;
        /* t-rl-b */
  padding: 0 0 2rem;
  width: 100%;
}

@media (min-width: 1024px) {
  x-ml-item, article {
    width: 80%;
  }
}