html {
  width: 100%;
}
html body div#left-drawer {
  --drawerWidth: 280px;
  width: var(--drawerWidth);
}
html body div#left-drawer.mdui-drawer-close {
  transform: translateX(calc(var(--drawerWidth) * -1));
}
html body div#left-drawer div.drawerHeader div.drawerAbout {
  height: 175px;
  width: 100%;
}
html body div#left-drawer div.drawerHeader div.drawerAbout div.drawerAboutMain {
  height: 100%;
  width: 100%;
  --drawer-bg: url("https://picsum.photos/1280/480.webp?random=1");
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  line-height: 1.5rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
html body div#left-drawer div.drawerHeader div.drawerAbout div.drawerAboutMain img.avatar {
  width: 60px;
  height: 60px;
  margin: 10px 20px;
  order: 0;
}
html body div#left-drawer div.drawerHeader div.drawerAbout div.drawerAboutMain:before {
  content: attr(data-name);
  font-size: 18px;
  margin: 0 20px;
  order: 1;
}
html body div#left-drawer div.drawerHeader div.drawerAbout div.drawerAboutMain.light:after {
  filter: invert(1) hue-rotate(180deg);
}
html body div#left-drawer div.drawerHeader div.drawerAbout div.drawerAboutMain:after {
  content: attr(data-slogan);
  color: rgba(255,255,255,0.702);
  font-size: 14px;
  margin: 0 0 10px 20px;
  order: 2;
}
html body div#left-drawer div.drawerHeader button.nightMode {
  background-color: rgba(0,0,0,0.502);
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 10px;
  color: #000;
  font-size: 20px;
  cursor: pointer;
  transition: 0.3s;
}
html body div#left-drawer div.mdui-tab.mdui-tab-full-width.mdx-toc-tab {
  min-height: 48px;
  max-height: 72px;
}
html body div#left-drawer div.mdui-tab.mdui-tab-full-width.mdx-toc-tab a {
  min-height: 0;
  min-width: 0;
  padding: 6px;
}
html body div#left-drawer div.mdui-tab.mdui-tab-full-width.mdx-toc-tab a i {
  font-size: 18px;
}
html body div#left-drawer div.mdui-tab.mdui-tab-full-width.mdx-toc-tab a lable {
  font-size: 12px;
}
html body div#left-drawer nav#drawer-menu div a {
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
  white-space: normal;
}
html body div#left-drawer nav#drawer-menu div a i {
  margin-right: 10px;
}
html body div#left-drawer nav#drawer-menu div a.current {
  background-color: rgba(0,0,0,0.102);
}
html body div#left-drawer nav#drawer-toc ol {
  pointer-events: none;
}
html body div#left-drawer nav#drawer-toc ol li {
  padding: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
  width: 100%;
}
html body div#left-drawer nav#drawer-toc ol li::after {
  display: none;
}
html body div#left-drawer nav#drawer-toc ol li a {
  width: calc(var(--drawerWidth) - 32px);
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
  pointer-events: all;
}
html body div#left-drawer nav#drawer-toc ol li a span.mdui-list-number {
  margin-right: 10px;
}
html body div#left-drawer nav#drawer-toc ol li a span {
  pointer-events: none;
}
html body div#left-drawer nav#drawer-toc ol li i.mdui-icon.material-icons {
  margin: 0 5px;
}
html body div.pageTitle {
  height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
html body div.pageTitle h1 {
  text-shadow: 0 0 10px rgba(0,0,0,0.502);
  text-align: center;
  font-weight: normal;
}
html body div.pageTitle h2 {
  margin: 0;
  color: rgba(255,255,255,0.541);
  font-weight: normal;
  font-size: 23.4px;
}
html body div.mainContent {
  margin: 25px 0;
  width: 100%;
  max-width: 700px;
}
html body div.mainContent main.postList {
  width: 95%;
  max-width: 700px;
}
html body div.mainContent main.postList div.postItem {
  border-radius: 8px;
  margin-bottom: 25px;
}
html body div.mainContent main.postList div.postItem:last-child {
  margin-bottom: 0;
}
html body div.mainContent main.postList div.postItem div.postItemContent {
  display: flex;
  flex-direction: column;
  padding: 8px;
}
html body div.mainContent main.postList div.postItem div.postItemContent a.postTitle {
  text-decoration: none;
  font-weight: 400;
  padding: 0 10px;
}
html body div.mainContent main.postList div.postItem div.postItemContent a.postTitle h1 {
  margin-top: 8px;
  margin-bottom: 20px;
}
html body div.mainContent main.postList div.postItem div.postItemContent p.postExcerpt {
  margin: 0;
  padding: 0 10px;
}
html body div.mainContent main.postList div.postItem div.postItemContent div.mdui-divider {
  margin: 10px 0 5px 0;
}
html body div.mainContent main.postList div.postItem div.postItemContent div.postItemFooter {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 0 10px;
}
html body div.mainContent main.postList div.postItem div.postItemContent div.postItemFooter span.postItemInfo {
  display: flex;
  flex-direction: row;
  max-width: calc(100% - 100px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
html body div.mainContent main.postList div.postItem div.postItemContent div.postItemFooter span.postItemInfo div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  margin-left: 10px;
}
html body div.mainContent main.postList div.postItem div.postItemContent div.postItemFooter span.postItemInfo div:first-child {
  margin-left: 0;
}
html body div.mainContent main.postList div.postItem div.postItemContent div.postItemFooter span.postItemInfo div i {
  margin-right: 5px;
}
html body div.mainContent main.postList div.postItem div.postItemContent div.postItemFooter span.postItemInfo div a.category-link {
  text-decoration: none;
  flex-shrink: 1;
}
html body div.mainContent main.postList div.postItem div.postItemContent div.postItemFooter a.readMore {
  justify-self: flex-end;
  flex-shrink: 0;
}
html body div.mainContent main.postList div.postCount {
  text-align: center;
  width: 100%;
}
html body div.mainContent main.postList a.archiveTitle {
  text-align: center;
  text-decoration: none;
}
html body div.mainContent div.pagination {
  margin: 25px 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
html body div.mainContent div.pagination * {
  height: 35px;
  width: 35px;
  margin: 10px;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}
html body div.mainContent div.pagination span.current {
  margin-right: 10px;
}
html body div.mainContent div.pagination a.page-number,
html body div.mainContent div.pagination a.extend {
  text-decoration: none;
}
html body div.mainContent div.pagination a.page-number:hover,
html body div.mainContent div.pagination a.extend:hover {
  background: rgba(0,0,0,0.2);
}
html body footer.footer {
  font-weight: 300;
}
html body footer.footer.modern {
  background-color: #f2f2f2;
  padding: 25px 0;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
html body footer.footer.modern div.footerUpperLayer {
  display: flex;
  width: 100%;
  max-width: 700px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
html body footer.footer.modern div.footerUpperLayer div.title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-right: 0.5rem;
}
html body footer.footer.modern div.footerUpperLayer div.title a {
  text-decoration: none;
}
html body footer.footer.modern div.footerUpperLayer div.detail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 2.5rem;
}
html body footer.footer.modern div.footerUpperLayer div.detail div.text {
  display: inline-flex;
}
html body footer.footer.modern div.footerUpperLayer div.detail div.text div.contact a {
  text-decoration: none;
}
html body footer.footer.modern div.footerLowerLayer {
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
html body footer.footer.modern div.footerLowerLayer div.left a,
html body footer.footer.modern div.footerLowerLayer div.right a {
  text-decoration: none;
}
@media screen and (max-width: 480px) {
  html body footer.footer footer.footer.modern {
    padding: 25px 10px;
  }
  html body footer.footer footer.footer.modern div.footerUpperLayer,
  html body footer.footer footer.footer.modern div.footerLowerLayer {
    flex-direction: column;
    text-align: center;
  }
}
html body footer.footer.simple {
  background-color: #f2f2f2;
  color: #787878;
}
html body footer.footer.simple div.content {
  width: 100%;
  max-width: 700px;
  height: 45px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
html body footer.footer.simple div.content div.contact {
  display: inline;
  color: rgba(255,255,255,0.451);
  text-decoration: none;
}
html body footer.footer.simple div.content div.contact * {
  margin: 0 1px;
  text-decoration: none;
}
html body footer.footer.simple div.content a {
  color: rgba(255,255,255,0.302);
  text-decoration: none;
}
html body footer.footer.traditional * {
  text-decoration: none;
}
html body.mdui-theme-layout-dark figure.highlight table tbody tr td.code pre span.line span,
html body.mdui-theme-layout-dark figure.highlight table tbody tr td.code pre code.hljs span,
html body.mdui-theme-layout-dark pre.line-numbers code span,
html body.mdui-theme-layout-dark .mdui-text-color-theme {
  filter: invert(1) hue-rotate(180deg);
}
html body.mdui-theme-layout-dark div#left-drawer {
  background-color: #303030 !important;
}
html body.mdui-theme-layout-dark div.pageEnd {
  background-color: #383838 !important;
}
html body.mdui-theme-layout-dark footer.footer {
  background-color: #212121 !important;
}
html body.mdui-theme-layout-dark div.postPage {
  background-color: #303030;
}
html body.mdui-theme-layout-dark div.postPage div.mdui-card-content.mdui-typo div.mdui-panel.mdui-panel-gapless div.mdui-panel-item {
  background-color: #3d3d3d;
}
@media (prefers-color-scheme: dark) {
  html body.mdui-theme-layout-auto figure.highlight table tbody tr td.code pre span.line span,
  html body.mdui-theme-layout-auto figure.highlight table tbody tr td.code pre code.hljs span,
  html body.mdui-theme-layout-auto pre.line-numbers code span,
  html body.mdui-theme-layout-auto .mdui-text-color-theme {
    filter: invert(1) hue-rotate(180deg);
  }
  html body.mdui-theme-layout-auto div#left-drawer {
    background-color: #303030 !important;
  }
  html body.mdui-theme-layout-auto div.pageEnd {
    background-color: #383838 !important;
  }
  html body.mdui-theme-layout-auto footer.footer {
    background-color: #212121 !important;
  }
  html body.mdui-theme-layout-auto div.postPage {
    background-color: #303030;
  }
  html body.mdui-theme-layout-auto div.postPage div.mdui-card-content.mdui-typo div.mdui-panel.mdui-panel-gapless div.mdui-panel-item {
    background-color: #3d3d3d;
  }
}
html body button#goToTopBtn {
  z-index: 100;
}
html body div#searchDialog {
  padding: 15px;
  overflow-y: scroll;
}
html body div#searchDialog div#searchResultContainer {
  min-height: 500px;
  margin: 0;
}
html body div#searchDialog div#searchResultContainer div.searchResultItem {
  margin: 20px 0;
}
html body div#searchDialog div#searchResultContainer div.searchResultItem a.searchResultItemTitle {
  font-size: 1.2em;
  font-weight: bold;
  text-decoration: none;
}
html body div#searchDialog div#searchResultContainer div.searchResultItem div.searchResultItemContent {
  font-size: 0.8em;
}
html body div#searchDialog div#searchResultContainer div.searchResultItem div.searchResultItemContent span.searchResultItemMatched {
  font-weight: bold;
  background: #ff0;
  color: #000;
}