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 (min-width: 769px) {
  .xlog-social-platforms.hidden {
    display: none;
  }
}

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

  .xlog-post-area {
    padding-right: 2rem;
  }
}

@media (min-width: 768px) {

  .medium-zoom-image--opened {
    z-index: 1001;
  }

  .medium-zoom-overlay {
    z-index: 1000;
  }

  .xlog-post-area>div:is(.mx-auto, .max-w-screen-md) {
    margin: 0;
    max-width: unset;
  }

  .xlog-post-actions {
    left: calc(100% + 4rem);
  }

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

  .xlog-header .xlog-banner+div.flex.flex-col {
    flex-direction: column-reverse;
    justify-content: flex-end;
  }

  .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-social-platforms {
    display: none;
  }

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

  .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;
  }

  .xlog-site-description+div.flex.flex-col {
    flex-direction: column;
  }

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

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

  .xlog-post-area {
    margin-left: calc(1rem + var(--sidebar-width));
    margin-right: 20vw;
    max-width: unset;
  }

  section.xlog-blockchain-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 {
    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);
  }
}