html {
  --theme-color: #4f46e5;
}

html.dark {
  --theme-color: #818cf8;
}

:root {
  --sidebar-width: 20rem;
}

@media screen and (max-width: 1024px) {
  .xlog-post-toc {
    display: none !important;
  }
}

@media screen and (min-width: 1024px) {
  div[class^='xlog-post-id-']:has(.xlog-post-toc) {
    margin-right: 40vh;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --sidebar-width: 16rem;
  }

  div[class^='xlog-post-id-'],
  div:has(> * > button[aria-label='toggle chain info']) {
    padding-right: 2rem;
  }
}

@media (min-width: 768px) {
  .xlog-page-index:has(button[aria-expanded='false']) div[class^='xlog-post-id-'] {
    min-height: calc(100vh - 124px);
  }

  .xlog-page-index:has(button[aria-expanded='true']) div[class^='xlog-post-id-'] {
    min-height: calc(100vh - 324px);
  }

  .xlog-post:focus {
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
      var(--tw-ring-color);
  }

  .xlog-header {
    position: fixed;
    left: 0;
    height: 100vh;
    width: var(--sidebar-width);
    z-index: 100;
  }

  div:has(> .xlog-site-navigation) {
    order: 1;
  }

  div:has(> .xlog-site-info) {
    order: 2;
    padding: 0;
  }

  .xlog-header > div:nth-child(2) > div:first-child {
    display: none;
  }

  .xlog-header > div:nth-child(2) > div:last-child {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    flex-direction: column;
  }

  .xlog-header > div:nth-child(2) > div:last-child > div:last-child {
    margin-top: 1rem;
  }

  .xlog-header .xlog-site-info {
    flex-direction: column;
  }

  .xlog-site-info > span {
    margin-bottom: 1rem;
  }

  .xlog-site-info > span + div {
    margin: 0 !important;
    width: 100%;
    text-align: center;
  }

  .xlog-site-info > span + div > div.flex:first-child {
    flex-direction: column;
  }

  .xlog-site-info > span + div > div.flex:first-child > * {
    margin-bottom: 1rem;
  }

  .xlog-site-name + div.flex {
    flex-direction: row-reverse;
    margin: 0;
    gap: 1rem;
  }

  .xlog-site-name + div.flex > * {
    margin: 0 !important;
  }

  div:has(> .xlog-site-patron) {
    flex-direction: column;
  }

  .xlog-site-description {
    order: 3;
  }

  .xlog-site-patron {
    order: 2;
    margin-top: 0.2rem !important;
    margin-left: 0 !important;
  }

  div[class^='xlog-post-id-'] {
    margin-left: calc(1rem + var(--sidebar-width));
    margin-right: 1rem;
    max-width: unset;
  }

  div:has(> * > button[aria-label='toggle chain info']) {
    margin-left: calc(1rem + var(--sidebar-width));
    margin-right: 1rem;
    max-width: unset;
  }

  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: var(--sidebar-width);
    z-index: 1000;
  }

  footer > div {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    justify-content: center !important;
    flex-direction: column-reverse;
    align-items: center;
  }

  footer > div > div {
    width: 100%;
    text-align: center;
    margin-left: 0 !important;
    margin-top: 0.75rem !important;
  }

  footer > div > div:nth-child(2) {
    display: flex !important;
    justify-content: center;
  }

  footer > div > div:nth-child(2) > * {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }

  footer > div > button {
    margin: 0 !important;
  }

  footer div[role='tooltip'] {
    transform: translateY(65px);
  }
}