.title-bar {
  user-select: none;
  background-color: var(--c-surface-container-high);
  width: 100%;
  flex: 2;
  flex-direction: row;
  display: flex;
  vertical-align: middle;
  padding: 0 0.5em 0 0.5em;
  border-radius: 0;
  padding: 1em;
  margin-bottom: 0.25em;
  /*box-shadow: -1px 6px 21px 6px rgba(0, 0, 0, 0.51);*/

  font-size: clamp(0.5em, 3dvw, 1em);

  div,
  h1,
  a {
    margin: auto;
    text-align: center;
    flex: 100;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  a {
    font-size: 2em;
    font-weight: bolder;
    text-decoration: none;
  }

  > button {
    flex: 1;
    margin: 0 1em 0 1em;
    background-color: transparent !important;
    font-size: 2em;

    > span.material-symbols-rounded {
      font-size: 200%;
      padding: 0 0.05em 0 0.05em;
    }
  }

  img {
    scale: 1.25;
  }
}

.main-content {
  flex: 100;

  max-width: 100%;
  --max_width: 100%;

  overflow-x: hidden;
  overflow-y: auto;

  display: flex;
  flex-direction: column;

  align-items: center;
  align-content: center;

  vertical-align: top;
  box-sizing: content-box;

  width: 100%;

  > *:last-child {
    margin-bottom: 10dvh !important;
  }
}

.popup {
  z-index: 1000;
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  justify-self: center;
  justify-items: center;
  align-items: center;
  align-content: center;
  align-self: center;
  vertical-align: middle;
  background-color: #12121288;
}

.popup h3 {
  margin: 1.5em 0 0.5em 0;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.6;
  font-weight: bold;
}

.sidebar {
  position: absolute;
  height: 100%;
  width: var(--sidebar-width);
  left: 0;
  background-color: var(--c-surface-container-highest);

  border-radius: var(--sidebar-radius);

  .content {
    padding: 1em;

    > button {
      width: 100%;
      background-color: var(--c-surface-container-highest);
      text-align: left !important;
      font-size: 1.1em;
      color: var(--c-primary);
    }
  }
}

.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin: 1em auto;
  width: min(var(--max_width), 85dvw);
  box-sizing: border-box;
}

.p-nums {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  flex-grow: 1;
}

.pagination-controls .page-info {
  font-size: 0.9em;
  opacity: 0.8;
}

.pagination-controls button img {
  width: 1.5em;
  height: 1.5em;
}

.pagination-controls button:disabled {
  opacity: 0.2;
  cursor: default;
}

.p-num {
  min-width: 2.5em;
  height: 2.5em;
  border-radius: 50% !important;
  font-weight: bold;
  font-size: 0.9em;
  transition: background-color 0.2s;
}

.p-num.active {
  background-color: var(--c-primary) !important;
  color: white !important;
}

.dots {
  opacity: 0.5;
  font-weight: bold;
}

.spacer {
  width: 100%;
  margin: 0.5em 0 0.5em 0;
  height: 0.1em;
  background-color: #413d44;
}