:root {
  --weblite-layout-gutter: 1.5rem;
  --weblite-layout-gap: 1.5rem;
  --weblite-page-bg-color: white;
  --weblite-main-bg-color: none;
  --weblite-sidebar-bg-color: none;
  --weblite-content-text-color: #3333;
  --weblite-main-content-link-text-color: #0000ff;
  --weblite-sidebar-content-link-text-color: #0000ff;
  --weblite-content-font-size: 1em;
  --weblite-content-font-weight: 1em;
  --weblite-content-padding-inline: 1em;
  --weblite-content-padding-block: 1em;
  --weblite-content-block-gap: 1.5em;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#page-wrap {
  flex-direction: column;
  display: flex;
  min-height: 100vh;
  position: relative;
  background-color: var(--weblite-page-bg-color);
}

.header,
.main,
.footer  {
  animation: fade-in 500ms ease-in-out; /* Adjust the duration and timing function as needed */
}

#content {
  position: relative;
  overflow: scroll;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  z-index: 2;
  font-size: var(--weblite-content-font-size);
  font-weight: var(--weblite-content-font-weight);
  gap: var(--weblite-layout-gap);
  padding-block: var(--weblite-layout-gap);
}

main a {
 color: var(--weblite-main-content-link-text-color);
}

aside a {
 color: var(--weblite-sidebar-content-link-text-color);
}

.post-content-widget-area {
  z-index: 2;
}

[id^='main'] {
  flex-grow: 1;
  background-color: var(--weblite-main-bg-color);
}

#sidebar {
  z-index: 2;
  background-color: var(--weblite-sidebar-bg-color);
}

[id^='main'] .main-content,
#sidebar .sidebar-content {
  padding-inline: var(--weblite-content-padding-inline);
  padding-block: var(--weblite-content-padding-block);
  display: grid;
  gap: var(--weblite-content-block-gap);
}

/* Default Margin for #main and #sidebar */
[id^='main'], #sidebar {
  margin-inline: max(
    calc(100vw - var(--content-max-width-desktop)) / 6,
    var(--weblite-layout-gutter)
  );
}

/* Styles for tablets */
@media (min-width: 768px) {
  [data-layout-breakpoint='tablet'].has-sidebar #content {
    flex-direction: row;
    flex-direction: row-reverse;
  }

  [data-layout-breakpoint='tablet'].has-sidebar [id^='main'] {
    margin-right: max(
      calc(100vw - var(--content-max-width-tablet)) / 6,
      var(--weblite-layout-gutter)
      );
      margin-left: clamp(1.25em, 2vw, 2.5em);
    }
  
  /* change the default margin for #main and #sidebar to / 4 */
  [data-layout-breakpoint='tablet'].has-sidebar #sidebar {
    flex-basis: 25%;
    margin-left: max(
      calc(100vw - var(--content-max-width-tablet)) / 6,
    var(--weblite-layout-gutter)
  );
  margin-right: clamp(1.25em, 2vw, 2.5em);
}
}

/* Styles for small laptops */
@media (min-width: 992px) {
  [data-layout-breakpoint='laptop'].has-sidebar #content {
    flex-direction: row;
    flex-direction: row-reverse;
  }

  [data-layout-breakpoint='laptop'].has-sidebar [id^='main'] {
    margin-right: max(
      calc(100vw - var(--content-max-width-laptop)) / 6,
      var(--weblite-layout-gutter)
      );
      margin-left: clamp(1.25em, 2vw, 2.5em);
    }
  
  /* change the default margin for #main and #sidebar to / 4 */
  [data-layout-breakpoint='laptop'].has-sidebar #sidebar {
    flex-basis: 33%;
    margin-left: max(
      calc(100vw - var(--content-max-width-laptop)) / 6,
    var(--weblite-layout-gutter)
    );
    margin-right: clamp(1.25em, 2vw, 2.5em);
  }
}

/* Styles for desktops */
@media (min-width: 1280px) {
  [data-layout-breakpoint='desktop'].has-sidebar #content {
    flex-direction: row;
    flex-direction: row-reverse;
  }

  [data-layout-breakpoint='desktop'].has-sidebar [id^='main'] {
    margin-right: max(
      calc(100vw + 40vw - var(--content-max-width-desktop)) / 6,
      var(--weblite-layout-gutter)
      );
      margin-left: clamp(1.25em, 2vw, 2.5em);
    }
  
  /* change the default margin for #main and #sidebar to / 4 */
  [data-layout-breakpoint='desktop'].has-sidebar #sidebar {
    flex-basis: 40%;
    margin-left: max(
      calc(100vw + 40vw - var(--content-max-width-desktop)) / 6,
    var(--weblite-layout-gutter)
    );
    margin-right: clamp(1.25em, 2vw, 2.5em);
  }
}