html,
body {
  font-family: sans-serif;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

html {
  --primary-background-color-light: #333;
  --primary-foreground-color-light: #fff;
  --primary-background-contrast-color-light: #222;
  --primary-drawer-color-light: #fff;
  --primary-color-light: #111;
  --primary-contrast-color-light: #ddd;

  --primary-background-color-dark: #333;
  --primary-foreground-color-dark: #333;
  --primary-background-contrast-color-dark: #222;
  --primary-drawer-color-dark: #bbb;
  --primary-color-dark: #ccc;
  --primary-contrast-color-dark: #6c6c6c;

  --x-postpress-article-gallery-item-2col-padding: 3%;
  --x-postpress-article-gallery-item-3col-padding: 3%;
  --x-postpress-article-margin: 0 auto 2rem auto;
  --x-postpress-h1-font-size: 1.75rem;
  --x-postpress-hr-margin: 3rem 0 0 0;
  --x-postpress-observer-height: 6.25rem;

  --mdc-typography-font-family: sans-serif;
  --mdc-typography-headline6-font-family: sans-serif;
  --mdc-typography-headline6-font-size: var(--x-postpress-h1-font-size);
  --mdc-typography-headline6-font-weight: normal;
  --mdc-typography-headline6-letter-spacing: normal;
  --mdc-typography-headline6-line-height: 2rem;
  --mdc-typography-headline6-text-transform: inherit;
}

.theme-light body {
  --primary-color: var(--primary-color-light);
  --primary-foreground-color: var(--primary-foreground-color-light);
  --primary-contrast-color: var(--primary-contrast-color-light);

  --mdc-theme-primary: var(--primary-background-color-light);
  --mdc-theme-surface: var(--primary-background-color-light);
  --mdc-theme-on-surface: var(--primary-background-color-light);
  --mdc-theme-secondary: var(--primary-background-color-light);

  background-color: var(--primary-foreground-color);
  color: var(--primary-color);

  --x-postpress-portfolio-header-background-color: var(--mdc-theme-primary);
  --x-postpress-drawer-header-background-color: var(--primary-background-contrast-color-light);
  --x-postpress-drawer-header-color: var(--primary-drawer-color-light);
  --x-postpress-drawer-item-background-color: var(--primary-background-color-light);
  --x-postpress-a-color: var(--primary-foreground-color-dark);
  --x-postpress-a-hover-text-decoration: underline;
  --x-postpress-a-text-decoration: underline;
}

.theme-light x-postpress-drawer-item a:active,
.theme-light x-postpress-drawer-item a:focus,
.theme-light x-postpress-drawer-item a:hover,
.theme-light x-postpress-drawer-item a:link,
.theme-light x-postpress-drawer-item a:visited,
.theme-light x-postpress-drawer-header a:active,
.theme-light x-postpress-drawer-header a:focus,
.theme-light x-postpress-drawer-header a:hover,
.theme-light x-postpress-drawer-header a:link,
.theme-light x-postpress-drawer-header a:visited {
  color: var(--x-postpress-drawer-header-color);
}

body mwc-top-app-bar {
  background-color: var(--primary-background-color-light);
}

#appTitle {
  color: var(--primary-foreground-color-light);
  font-size: 2rem;
}

.theme-dark body {
  --primary-color: var(--primary-color-dark);
  --primary-foreground-color: var(--primary-foreground-color-dark);
  --primary-contrast-color: var(--primary-contrast-color-dark);

  --mdc-theme-primary: var(--primary-background-color-dark);
  --mdc-theme-surface: var(--primary-background-color-dark);
  --mdc-theme-on-surface: var(--primary-background-color-dark);
  --mdc-theme-secondary: var(--primary-background-color-dark);

  background-color: var(--primary-foreground-color);
  color: var(--primary-color);

  --x-postpress-portfolio-header-background-color: var(--primary-background-contrast-color-dark);
  --x-postpress-drawer-header-background-color: var(--primary-background-contrast-color-dark);
  --x-postpress-drawer-header-color: var(--primary-drawer-color-dark);
  --x-postpress-drawer-item-background-color: var(--primary-background-color-dark);
  --x-postpress-a-color: var(--primary-foreground-color-light);
  --x-postpress-a-hover-text-decoration: underline;
  --x-postpress-a-text-decoration: underline;
}

.theme-dark x-postpress-drawer-item a:active,
.theme-dark x-postpress-drawer-item a:focus,
.theme-dark x-postpress-drawer-item a:hover,
.theme-dark x-postpress-drawer-item a:link,
.theme-dark x-postpress-drawer-item a:visited {
  color: var(--x-postpress-drawer-header-color);
}

.theme-dark body mwc-top-app-bar {
  background-color: var(--primary-background-contrast-color-dark);
  --mdc-theme-primary: var(--primary-background-contrast-color-dark);
}

mwc-circular-progress {
  --mdc-theme-primary: var(--primary-color);
}

mwc-top-app-bar {
  align-items: center;
  display: flex;
  font-family: var(--mdc-typography-headline6-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
  font-size: var(--mdc-typography-headline6-font-size, 1.25rem);
  font-weight: var(--mdc-typography-headline6-font-weight, 500);
  height: 4rem;
  letter-spacing: var(--mdc-typography-headline6-letter-spacing, 0.0125em);
  line-height: var(--mdc-typography-headline6-line-height, 2rem);
  text-transform: var(--mdc-typography-headline6-text-transform, inherit);
}

mwc-top-app-bar mwc-icon-button {
  align-self: center;
  color: var(--primary-foreground-color-light);
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

mwc-top-app-bar mwc-icon-button svg {
  align-self: center;
}

mwc-drawer {
  border: 0;
}

div[slot='navigationIcon'] {
  display: flex;
  height: 3rem;
  justify-content: center;
  width: 3rem;
}

#light-dom-navigation-flex-1 {
  width: 0.25rem;
}

#light-dom-navigation-flex-2 {
  width: 1.25rem;
}

@media (min-width: 37.5em) {
  #light-dom-navigation-flex-1 {
    width: 0.75rem;
  }

  #light-dom-navigation-flex-2 {
    width: 1.25rem;
  }
}

div[slot='title'] {
  padding: 0.1875rem 2rem 0 0;
}

div[slot='title'] a {
  text-decoration: none;
}

#appContent {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

section {
  display: flex;
  flex-direction: column;
}

section[slot='multi-posts'], section[slot='portfolio'] {
  padding-top: 1rem;
}

x-postpress-app {
  --x-postpress-article-gallery-display: flex;
  --x-postpress-article-gallery-item-flex: auto;
  --x-postpress-article-gallery-item-margin: 0;
  --x-postpress-article-gallery-item-padding: 0.5rem 0;

  --x-postpress-h1-font-weight: 400;
  --x-postpress-h1-margin: 0.5rem 0;
  --x-postpress-h2-display: none;
  --x-postpress-img-max-width: 100%;
  --x-postpress-img-padding: 0;
  --x-postpress-li-display: list-item;
  --x-postpress-ul-list-style-type: disc;
  --x-postpress-ul-margin: 0 0 0 1rem;
}

x-postpress-app-multi-post[header-align="left"] {
  --x-postpress-h1-text-align: left;
}

x-postpress-app-multi-post[header-align="center"] {
  --x-postpress-h1-text-align: center;
}

x-postpress-app-multi-post, x-postpress-app-portfolio {
  display: block;
  max-width: 65rem;
  margin: auto;
}

x-postpress-app-multi-post[single='single']::part(infinite-target),
x-postpress-app-multi-post[single='single']::part(infinite-observer) {
  display: none;
}

x-postpress-app-portfolio {
  max-width: 33.75rem;

  --x-postpress-h2-font-size: 1.5rem;
  --x-postpress-h2-text-align: center;
}

#portfolioHeading,
#portfolioHeading a:active,
#portfolioHeading a:focus,
#portfolioHeading a:hover,
#portfolioHeading a:link,
#portfolioHeading a:visited {
  color: var(--primary-foreground-color-light);
  font-size: 1.75rem;
}

#portfolioHeading {
  background-color: var(--x-postpress-portfolio-header-background-color);
}

x-postpress-drawer-header, x-postpress-drawer-item {
  align-items: center;
  background-color: var(--x-postpress-drawer-header-background-color);
  color: var(--x-postpress-drawer-header-color);
  display: flex;
  font-size: 1.25rem;
  font-weight: 400;
  height: 4rem;
  line-height: 1.5rem;
  padding-left: 0.5rem;
}

x-postpress-drawer-item  {
  background-color: var(--x-postpress-drawer-item-background-color);
  font-size: 1rem;
  padding-left: 1rem;
}

x-postpress-drawer-item:active,
x-postpress-drawer-item:focus,
x-postpress-drawer-item:hover,
x-postpress-drawer-item {
  cursor: pointer;
  text-decoration: none;
}

x-postpress-drawer-item > x-postpress-app-theme-switcher,
x-postpress-drawer-item > a {
  align-items: center;
  display: flex;
  height: 100%;
  width: 100%;
}

mwc-drawer {
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

#x-postpress-drawer-contents {
  display: none; /* is set to display: block if script enabled */
  bottom: 0;
  left: 0;
  overflow-y: scroll;  /* is set to overflow-y: unset if noscript enabled */
  position: absolute; /* is set to position: relative if noscript enabled */
  right: -1rem;
  top: 0;
}

#x-postpress-drawer-contents a {
  text-decoration: none;
}

#x-postpress-drawer-contents section > * {
  padding: 0 1rem;
}

/* begin: x-postpress shared styles */
a,
a:link,
a:visited {
  color: var(--x-postpress-a-color);
  text-decoration: var(--x-postpress-a-text-decoration);
}

a:hover {
  text-decoration: var(--x-postpress-a-hover-text-decoration);
}

a,
a:link,
a:visited {
  color: var(--x-postpress-a-color);
  text-decoration: var(--x-postpress-a-text-decoration);
}

a:hover {
  text-decoration: var(--x-postpress-a-hover-text-decoration);
}

article,
::slotted(article) {
  clear: var(--x-postpress-article-clear, inherit);
  margin: var(--x-postpress-article-margin, inherit);
  width: var(--x-postpress-article-width, 80%);
}

article .gallery {
  display: var(--x-postpress-article-gallery-display, inherit);
  flex-wrap: wrap;
}

article .gallery-item {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex: var(--x-postpress-article-gallery-item-flex, inherit);
  justify-content: flex-start;
  line-height: 1;
  margin: var(--x-postpress-article-gallery-item-margin, inherit);
  padding: var(--x-postpress-article-gallery-item-padding, inherit)
}

article .gallery-columns-2 .gallery-item {
  flex-basis: 43.3%;
  padding: 3%;
}

article .gallery-columns-3 .gallery-item {
  flex-basis: 23.3%;
  padding: 3%;
}

article .gallery-icon {
  padding: 0 0.25rem 0 0.25rem;
}

.alignleft {
  float: left;
  margin: 0;
}

.alignright {
  float: right;
  margin: 0;
}

figure {
  margin: 0;
  padding: 0 0.25rem 0 0.25rem;
}

figure.alignleft {
  padding: 0 1rem 0 0;
}

figure > figcaption {
  font-size: smaller;
  min-height: 2rem;
  text-align: center;
}

h1 {
  color: var(--x-postpress-h1-color, inherit);
  font-size: var(--x-postpress-h1-font-size, inherit);
  font-weight: var(--x-postpress-h1-font-weight, inherit);
  margin: var(--x-postpress-h1-margin, inherit);
  text-align: var(--x-postpress-h1-text-align, initial);
}

h1 a, h1 a:visited, h1 a:link, h1 a:hover {
  text-decoration: none;
}

h2 {
  color: var(--x-postpress-h2-color, #777);
  display: var(--x-postpress-h2-display, initial);
  font-size: var(--x-postpress-h2-font-size, smaller);
  text-align: var(--x-postpress-h2-text-align, initial);
}

hr {
  clear: var(--x-postpress-hr-clear, both);
  display: var(--x-postpress-hr-display, block);
  margin: var(--x-postpress-hr-margin, initial);
  padding: var(--x-postpress-hr-padding, initial);
}

.wp-block-gallery img {
  display: var(--x-postpress-wp-block-gallery-img-display, inherit);
  float: var(--x-postpress-wp-block-gallery-img-float, inherit);
  height: var(--x-postpress-wp-block-gallery-img-height, auto);
  margin: var(--x-postpress-wp-block-gallery-img-margin, inherit);
  max-height: var(--x-postpress-wp-block-gallery-img-max-height, inherit);
  max-width: var(--x-postpress-wp-block-gallery-img-max-width, inherit);
  min-height: var(--x-postpress-wp-block-gallery-img-min-height, inherit);
  min-width: var(--x-postpress-wp-block-gallery-img-min-width, inherit);
  padding: var(--x-postpress-wp-block-gallery-img-padding, inherit);
  width: var(--x-postpress-wp-block-gallery-img-width, auto);
}

img {
  display: var(--x-postpress-img-display, inherit);
  float: var(--x-postpress-img-float, inherit);
  height: var(--x-postpress-img-height, auto);
  margin: var(--x-postpress-img-margin, inherit);
  max-height: var(--x-postpress-img-max-height, inherit);
  max-width: var(--x-postpress-img-max-width, inherit);
  min-height: var(--x-postpress-img-min-height, inherit);
  min-width: var(--x-postpress-img-min-width, inherit);
  padding: var(--x-postpress-img-padding, inherit);
  width: var(--x-postpress-img-width, auto);
}

ul {
  display: var(--x-postpress-ul-display, inherit);
  list-style-type: var(--x-postpress-ul-list-style-type, inherit);
  margin: var(--x-postpress-ul-margin, inherit);
  padding: var(--x-postpress-ul-padding, inherit);
}

li {
  display: var(--x-postpress-li-display, inherit);
  margin: var(--x-postpress-li-margin, inherit);
  padding: var(--x-postpress-li-padding, inherit);
}

p {
  clear: var(--x-postpress-p-clear, inherit);
  text-align: var(--x-postpress-p-text-align, inherit);
}

pre {
  overflow: auto;
}

x-postpress-code {
  margin: 1rem 0;
}

#singlePostNavigation, #previousPost, #nextPost {
  display: flex;
  flex: 1;
  justify-content: space-evenly;
  margin: 0 1.5rem;
  text-align: center;
}

#previousPost, #nextPost {
  max-width: 33vw;
}

#previousPost span, #nextPost span {
  display: inline-flex;
}
/* end: x-postpress shared styles */