body {
  /* display */
  display: flex;
  flex-flow: column nowrap;
  /* positioning */
  /* box-model */
  height: 100vh;
  background-color: var(--theme-primary-color);

  /* typography */
  /* manipulation */
  /* misc */
}

#skip-to-content {
  /* display */
  display: block;

  /* positioning */
  position: fixed;
  z-index: 1000;

  /* box-model */
  background-color: var(--theme-tertiary-color);
  padding: 0.5em;
  width: 100vw;

  /* typography */
  font-size: 1rem;
  text-align: center;

  /* manipulation */
  transform: translateY(-100%);
  transition: 0.25s linear transform;

  /* misc */
}

#skip-to-content:focus-within {
  transform: none;
}

.drop-nav {
  /* display */

  /* positioning */
  position: absolute;
  top: 1em;
  right: 1em;
  z-index: 1000;

  /* box-model */
  background-color: var(--light-text);
  border: none;
  box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.75);
  max-width: min(16em, calc(100vw - 3.5em));
  margin-left: auto;

  /* typography */
  font-size: initial;

  /* manipulation */
  transform-origin: top right;

  /* misc */
  --closed-height: 1%;
}

.drop-nav::backdrop {
  background: transparent;
}

.drop-nav[open] {
  animation: open-drawer 0.25s ease-out forwards;
}

.drop-nav.closing {
  animation: close-drawer 0.25s ease-out forwards;
}

@keyframes open-drawer {
  0% {
    transform: scaleX(0) scaleY(var(--closed-height));
  }

  25% {
    transform: scaleX(100%) scaleY(var(--closed-height));
  }

  100% {
    transform: scaleX(100%) scaleY(100%);
  }
}

@keyframes close-drawer {
  0% {
    transform: scaleX(100%) scaleY(100%);
  }

  75% {
    transform: scaleX(100%) scaleY(var(--closed-height));
  }

  100% {
    transform: scaleX(0) scaleY(var(--closed-height));
  }
}

.drop-nav nav {
  /* display */
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;

  /* positioning */
  /* box-model */
  height: 100%;
  padding: 0.5em;
  /* typography */
  /* manipulation */
  /* misc */
}

.drop-nav ul {
  list-style: none;
}

.drop-nav nav ul + ul {
  border-top: 1px solid var(--theme-primary-color);
}

.drop-nav .pfp {
  width: 1.5em;
}

.drop-nav nav a,
.drop-nav nav a:visited,
.drop-nav nav a:link {
  /* display */
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-rows: 3em;
  column-gap: 1em;
  align-items: center;
  justify-content: start;

  /* box-model */
  border-radius: 0.5em;
  padding-inline: 0.5em;

  /* typography */
  text-decoration: none;
  font: inherit;
  color: var(--dark-text);
}

.drop-nav a:focus-visible {
  outline-color: var(--theme-primary-color);
}

/* Header */
.app-header {
  /* display */
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;

  /* positioning */
  /* box-model */
  background-color: var(--theme-primary-color);

  /* typography */
  color: var(--light-text);
  font-size: 2rem;
  font-weight: 400;

  /* manipulation */
  /* misc */
}

.app-header > * {
  /* display */
  display: flex;

  /* box-model */
  background-color: inherit;
  padding: 0.5em;

  /* positioning */
  position: relative;

  /* typography */
  font-size: inherit;
  line-height: 1;
  font-weight: 200;
}

.app-header #back-button {
  display: none;
}

.app-header #back-button.show {
  display: flex;
}

.app-header #back-button.show + .page-title {
  padding-left: 0;
}

.app-header button .material-symbols-sharp {
  font-size: inherit;
}

.app-header button:nth-of-type(2) {
  margin-left: auto;
}

.app-header #refresh-page {
  transform: scaleX(0);
}

.app-header #refresh-page.show {
  transform: scaleX(1);
}

.app-header .pfp {
  width: 1em;
}

/* Footer */
.app-main {
  flex: 1 1 auto;
  padding-bottom: 2.5rem;
  background-color: var(--light-text);
}

.app-footer nav {
  /* display */
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-around;

  /* positioning */
  position: relative;

  /* box-model */
  background-color: var(--theme-primary-color);
  outline: 1px var(--light-text);

  /* typography */
  color: var(--light-text);
  font-size: 1.5rem;
  font-weight: 400;

  /* manipulation */
  /* misc */
}

.app-footer * {
  /* box-model */
  background-color: inherit;

  /* typography */
  font: inherit;
  line-height: 1;
}

.app-footer a {
  all: unset;
}

.app-footer a:active {
  -webkit-tap-highlight-color: transparent;
}

.app-footer .footer-link:not(.fab) {
  /* display */
  display: flex;
  flex-flow: column nowrap;
  align-items: center;

  /* positioning */

  /* box-model */
  padding: 0.5em;
  flex: 1 1 100px;

  /* typography */
  font-family: var(--header-font-family);
  font-weight: 300;
  color: var(--theme-tertiary-color);

  /* manipulation */
  /* misc */
}

.app-footer .footer-link.fab {
  /* display */
  display: flex;

  /* positioning */
  position: absolute;
  top: -0.75em;

  /* box-model */
  background-color: var(--light-text);
  border-radius: 50%;
  padding: 0.25em;
  box-shadow: 0 0 0 2px var(--theme-primary-color);

  /* typography */
  font-size: 2em;
  color: var(--theme-secondary-color);

  /* manipulation */
  /* misc */
}

.app-footer .footer-link:not(.fab).active {
  /* background-color: var(--theme-tertiary-color); */
  /* color: var(--dark-text); */
  color: var(--light-text);
  font-weight: 400;
}

.app-footer .footer-link.fab.active {
  /* background-color: var(--theme-tertiary-color); */
  /* color: var(--dark-text); */
  color: var(--theme-primary-color);
  font-weight: 500;
}

.app-header,
.app-footer {
  z-index: 100;
  filter: drop-shadow(0 0 5px var(--theme-primary-color));
}

.app-header button:focus-visible,
.app-footer .footer-link:focus-visible {
  background-color: var(--theme-tertiary-color);
}

pwa-update::part(updateToast) {
  z-index: 101;
}